[JavaScript知识库]es6基础语法

es6基础语法

1.letlet age = 12;

（1）. 作用:与var类似, 用于声明一个变量

（2）. 特点:在块作用域内有效不能重复声明不会预处理, 不存在提升

（3）. 应用:循环遍历加监听使用let取代var是趋势

2.constconst 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      console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`); //我叫:anverson, 我的年龄是：41
## 5.简写的对象写法：省略同名的属性省略方法function以及前面的：
```js
 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  1
4     //将一个数组插入到另一个数组 
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