JS的ES6的基础语法
JS的ES6
1.let
let age = 12;
（1）. 作用:
-
与var类似, 用于声明一个变量
（2）. 特点:
-
在块作用域内有效
-
不能重复声明
-
不会预处理, 不存在提升
（3）. 应用:
-
循环遍历加监听
-
使用let取代var是趋势
2.const
const sex = '男';
（1）. 作用:
-
定义一个常量
（2）. 特点:
-
不能修改
-
其它特点同let
（3）. 应用:
-
保存不用改变的数据
3.解构赋值
（1）对象的解构赋值：从对象的属性中取到想要的属性值
1 let obj = {name : 'kobe', age : 39}; 2 //对象的解构赋值 3 let {name,age,xxx} = obj; //定义的变量要与属性key相同,使用大括号{} 4 console.log(age,name,xxx); //39 "kobe" undefined
（2）数组的解构赋值
1 let arr = ['abc', 23, true]; 2 let [, b, c, d] = arr; //使用中括号[],可以使用占位空的，还是按顺序获得数组下标对应的值 3 console.log(b, c, d); //23 true undefined
用处：简化传参
1 let obj = {name : 'kobe', age : 39}; 2 3 function person1({name, age}) { 4 console.log(name, age); 5 } 6 person1(obj);
4.模版字符串
模板字符串必须用 `` 包含，变量用${xxx}
1 let obj = { 2 name : 'anverson', 3 age : 41 4 }; 5 console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age); //我叫:anverson, 我的年龄是：41 6 7 console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`); //我叫:anverson, 我的年龄是：41
5.简写的对象写法：
-
省略同名的属性
-
省略方法function以及前面的：
1 let x = 3; 2 let y = 5; 3 //普通额写法 4 // let obj = { 5 // x : x, 6 // y : y, 7 // getPoint : function () { 8 // return this.x + this.y 9 // } 10 // }; 11 //简化的写法 12 let obj = { 13 x, //为外部的x 14 y, //为外部的y 15 getPoint(){ //省略：function 16 return this.x 17 } 18 }; 19 console.log(obj, obj.getPoint()); //Object 3
6.三点运算符
又称：rest参数
作用：用来取代arguments 但比arguments灵活
限制：
-
只能是最后部分形参参数。
-
只能遍历数组，不能遍历对象。
1 //作为形参，是真实的数组可以遍历 2 function fun(...values) { 3 console.log(arguments); 4 // arguments.forEach(function (item, index) { 5 // console.log(item, index); //报错，arguments是伪数组不能遍历 6 // }); 7 console.log(values); 8 values.forEach(function (item, index) { 9 console.log(item, index); 10 }) 11 } 12 fun(1,2,3); 13 14 //将一个数组插入到另一个数组 15 let arr = [2,3,4,5,6]; 16 let arr1 = ['abc',...arr, 'fg']; 17 console.log(arr1); //'abc' 2 3 4 5 6 'fg'
7.形参的默认值
作用：当不传入参数的时候默认使用形参里的默认值
1 //定义一个点的坐标 2 function Point(x=12, y=12) { 3 this.x = x; 4 this.y = y; 5 } 6 let point = new Point(25, 36); 7 console.log(point); //25 36 8 let point2 = new Point(); 9 console.log(point2); // 12 12
8.箭头函数
又称：lambda表达式[和Java的差不多,但符号是=>]
1 //1.普通写法 2 let fun = function () { 3 console.log('fun()'); 4 }; 5 fun(); 6 //2.没有形参，并且函数体只有一条语句 7 let fun1 = () => console.log('fun1()'); 8 fun1(); 9 console.log(fun1()); 10 //3.一个形参，并且函数体只有一条语句 11 let fun2 = x => x; 12 console.log(fun2(5)); 13 //4.形参是一个以上 14 let fun3 = (x, y) => x + y; 15 console.log(fun3(25, 39)); //64 16 17 //5.函数体有多条语句 18 let fun4 = (x, y) => { 19 console.log(x, y); 20 return x + y; 21 }; 22 console.log(fun4(34, 48)); //82
特殊点在this:
箭头函数的this看外层的是否有函数，
- 如果有，外层函数的this就是内部箭头函数的this.
- 如果没有，则this是window。
箭头函数在定义时就确定了！！！使用call，apply，bind都不能绑定this。
一般函数得看谁调用他，this就是谁，可以使用call，apply，bind。
1 <button id="btn">测试箭头函数this_1</button> 2 <button id="btn2">测试箭头函数this_2</button>
1 setTimeout(() => { 2 console.log(this); //window 3 }, 1000) 4 5 let btn = document.getElementById('btn'); 6 //没有箭头函数 7 btn.onclick = function () { 8 console.log(this); //btn 9 }; 10 //箭头函数 11 let btn2 = document.getElementById('btn2'); 12 13 let obj = { 14 name: 'kobe', 15 age: 39, 16 getName: () => { 17 btn2.onclick = () => { 18 console.log(this); 19 }; 20 } 21 }; 22 obj.getName(); //window 23 24 25 function Person() { 26 this.obj = { 27 showThis: () => { 28 console.log(this); 29 } 30 } 31 } 32 let fun5 = new Person(); 33 fun5.obj.showThis(); //Person
1 var name = "windowname"; 2 var oo = { 3 name:"outname", 4 ll :{ 5 inname : "inname", 6 f : () => console.log(this), 7 ff(){ 8 console.log(this); 9 } 10 } 11 } 12 13 var obj4 = { 14 name : "name" 15 } 16 17 oo.ll.f(); //window 18 oo.ll.ff(); //调用它的ll ==> Object {inname: "inname"} 19 oo.ll.ff.call(obj4); //obj4 ==>Object {name: "name"} 20 oo.ll.f.call(obj4); //绑定不了还是window
