前端学习JavaScript基础语法

JavaScript组成ECMAScript(简称 ESjavascript语法DOM:页面文档对象模型对页面中的元素进行操作BOM:浏览器对象模型对浏览器窗口进行操作书写形式行内式inputtypebuttonvalue这是一个按钮onclickalert(这是一个按钮)内嵌式scriptalert(这是一个按钮);/script外部式scriptsrchellp.js/script引入js文件定义变量scriptvarname小明;console.log(Hello, name!);// 输出: Hello, 小明!letage18;console.log(年龄: age);// 输出: 年龄: 18/scriptlet比var出现的晚意味着避免了var这块定义变量的时候的一些缺陷如果使用let定义变量此时变量生命周期作用域基本和java类似的JS中定义一个变量的时候不需要对找个变量指定类型对于数字只有一个数值类型什么是强类型变量弱类型变量强类型变量意味着不同的类型之间进行赋值的时候需要进行一定的手段强制类型转化弱类型变量在不同类型之间变量进行赋值的时候可以直接赋值a 1 b b b a console.log(b) 打印1什么是动态类型变量什么是静态类型变量动态类型意味着代码在执行过程中变量类型可以随时发生变化静态类型意味着变量定义的时候是什么类型在运行过程中就是什么类型a 1 console.log(typeof a) // 输出: number b b a b console.log(typeof a) // 输出: string基础数据类型number 数字不分整数和小数boolean: true 真false 假string 字符串类型undefined 只有唯一的值 undefined 表示未定义的值null 只有唯一的值 null 表示空值数字类型八进制0开头例如07十六进制0x开头二进制0b开头特殊的数字值infinity:无穷大大于任何数字表示数字已经超过了JS能表示的范围-infinity:负无穷大小于任何数字表示数字已经超过了JS能表示的范围NaN:表示当前的结果不是一个数字console.log(10/0)infinity console.log(-10/0)-infinity console.log(hhhhh-1)NaNstring类型双引号和单引号都能使用都是string类型双引号可以加单引号反过来一样求字符串长度letagggalert(a.length)拼接用 console.log(100100)数字 console.log(100100)字符串100100boolean类型boolean参与运算时当作1和0来看待undefined 未定义的类型leta console.log(a)underined console.log(a20)underined20 console.log(a1)NaN运算符 比较相等比较内容会进行隐式类型转化 比较相等比较内容数据类型不会进行隐式类型转化数组创建数组vararrnewArray();vararr[];vararr2[1,2,haha,false];数据类型可以不一样访问用下标注意不要给数组直接赋值此时数组中的所有元素都没了新增数组元素vararr[];arr[2]10console.log(arr)push追加vararr[1,2,3,4,5,6]varnewArr[]for(vari0;iarr.length;i){if(arr[i]%2!0){newArr.push(arr[i]);}}删除newArr.splice(0,1);从0下标开始删除1个函数function函数名形参列表{函数体return返回值}函数表达式letresult(function(){leta0;for(vari0;i5;i){ai;}returna;})();console.log(result);作用域letnum10;functiontest01(){letnum100;console.log(num);}functiontest02(){letnum200;console.log(num);}console.log(num);test01();test02();for(i1;i100;i){}console.log(i);//JS中如果定义一个变量不使用let,var此时这个变量就会变成一个全局变量作用域链letnum10;functiontest01(){letnum100;console.log(num);functiontest02(){letnum200;console.log(num);}test02();}test01();//200变量局部优先再找全局对象使用字面量创建对象leta{}letstudent{name:cyy,height:123,weight:34kg,sayHello:function(){console.log(hello)}}console.log(student.name);console.log(student[name]);student.sayHello();使用 new Object创建对象letstudentnewObject()student.namecyystudent.height180student[weight]80student.sayHellofunction(){console.log(say hello)}console.log(student.name)student.sayHello()使用构造函数创建对象functionPeople(name,height,weight){this.namenamethis.heightheightthis.weightweightthis.Sayfunction(){console.log(name say hello)}}letcyynewPeople(cyy,175,70)console.log(cyy)cyy.Say()ES6,class和构造classPeople{constructor(name,height,weight){//构造函数this.namenamethis.heightheightthis.weightweight}Say(){console.log(this.name正在说)}}letcyynewPeople(cyy,111,22)console.log(cyy)cyy.Say();static关键字classPeople{constructor(name,height,weight){//构造函数this.namenamethis.heightheightthis.weightweight}Say(){console.log(this.name正在说)}staticotherother//属于类}letcyynewPeople(cyy,111,22)console.log(cyy)cyy.Say();console.log(People.other)继承classStudentextendsPeople{constructor(name,weight,height,number){super(name,height,weight)this.numbernumber}Say(){alert(this.name)}}letstudentnewStudent(zhang,190,80,2)console.log(student)student.Say()