ES6的学习记录（二）

此只为ES6学习自我记录，不喜勿喷！~~(基于浏览器支持ES6的前提下)

3.箭头函数

什么叫箭头函数了，直接上代码：

//ES5定义函数
function test(){

}

//ES6箭头函数
()=>{

}

一般来说箭头函数的优点是简便，可读性更好，但是箭头函数有一个最大的有点，解决了this指向的问题

普通函数一般指向的是调用函数的对象，没有调用时或者匿名函数指向window或者undefined；而箭头函数是在定义的时候就继承了定义函数的对象

var a=11;
function test(){
    this.a=22;
    console.log(this.a);
    return function(){
            console.log(this.a)
    }
}; 
var x=new test()()



var a=11;
function test(){
    this.a=22;
    console.log(this.a);
    return ()=> console.log(this.a)
}; 
var x=new test()()

感受这两段代码的差异  （参考：https://www.jianshu.com/p/c1ee12a328d2）

 

4.函数传参

ES6增加了一个新东西（...），三个点，比如:

function test(a,b,...args){
    console.log(a,b,args)
}

test(10,20,30,40,70)

可以看到args输出了一个数组

三个点不仅可以作为传参，还可以用于替代数组，比如：

var arr1=[1,2,3];
var arr2=[4,5,6];
var arr=[...arr1,...arr2];   //相当于[1,2,3,4,5,6]
console.log(arr);

还有一点，ES6函数可以设定默认值，比如：

//新版
function test(a,b=1){
console.log(a,b);
}

test(1);


//旧版
function test1(a,b){
b=b||1;
console.log(a,b);
}

test1(1);

 

5.解构赋值

解构赋值的特点：

   1.左右两边的结构必须一致

   

let [a,b,c]=[1,2,3];
let { m, n} = { m: 1, n: 2};
console.log(a,b,c);
console.log(m,n);

注意：   对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

2.右边必须是合法的结构

let { m, n} = {  1, 2};

出现异常，虽然结构看起来一样，但是右边并不是合法的对象结构

   3.定义和申明必须要在一起

let [a,b,c];
[a,b,c]=[1,2,3];

出现异常，定义和申明必须在一起