es6学习总结（一）---变量解构，扩展运算符，rest运算符

扩展运算符（...）的用途

扩展运算符就是三个点“...”，就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用。;扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值

合并数组

arr1.push(...arr2) // 把arr2合并到arr1的后面
arr1.unshift(...arr2) //把arr2合并到arr1的前面

等同于：

 arr1.concat(arr2)
 
 arr2.concat(arr1)
 

如果你想在数组内合并数组，你可以像下面这样做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

等同于下面代码：

 var arr1 = ['two', 'three'];
 var arr2 = ['one'].concat(arr1, ['four', 'five']);
 

复制数组

const arr = [1,2,3];
let arr2 = [...arr]; // 就像 arr.slice()
arr2.push(4);
console.log(arr);
console.log(arr2);

等同于：
  
    var arr = [1, 2, 3];
    var arr2 = [].concat(arr); // 就像 arr.slice()
    arr2.push(4);
    console.log(arr);
    console.log(arr2);

const arr3 = [4,5,6]
let arr4 = arr3
arr4.push(7);
console.log(arr3);
console.log(arr4);

结果：

   [1, 2, 3]
   [1, 2, 3, 4]
   [4, 5, 6, 7]
   [4, 5, 6, 7]
   
   
   

结构赋值

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

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

变量的解构赋值

数组解构赋值：

    var arr = ['this is a string', 2, 3];

    //传统方式
    var a = arr[0],
        b = arr[1],
        c = arr[2];

    //解构赋值，是不是简洁很多？
    var [a, b, c] = arr;

    console.log(a);//this is a string
    console.log(b);//2
    console.log(c);//3

注意：

数组的元素是按次序排列的，变量的取值由它的位置决定；

嵌套数组解构

var arr = [[1, 2, [3, 4]], 5, 6];
var [[d, e, [f, g]], h, i] = arr;
console.log(d);//1
console.log(f);//3
console.log(i);//6

函数传参解构

var arr = ['this is a string', 2, 3];

function fn1([a, b, c]) {
    console.log(a);
    console.log(b);
    console.log(c);
}

fn1(arr);
//this is a string
//2
//3

for循环解构

    var arr = [[11, 12], [21, 22], [31, 32]];
    var arra=[];
    var arrb=[]
    for (let [a, b] of arr) {
        arra.push(a)
        arrb.push(b)
    }
    console.log(arra);
    console.log(arrb);

结果：

    [11, 21, 31]
    [12, 22, 32]
    

对象赋值解构

var obj = {
    name: 'chris',
    sex: 'male',
    age: 26,
    son: {
        sonname: '大熊',
        sonsex: 'male',
        sonage: 1
    }
};

var {name, sex, age, son} = obj;
console.log(name + ' ' + sex + ' ' + age); //chris male 26
console.log(son); // { sonname: '大熊', sonsex: 'male', sonage: 1 }

注意：

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

对象传参解构

var obj = {
    name: 'chris',
    sex: 'male',
    age: 26,
    son: {
        sonname: '大熊',
        sonsex: 'male',
        sonage: 1
    }
};

function fn2({sex, age, name}) {
    console.log(name + ' ' + sex + ' ' + age);
}

fn2(obj);
//chris male 26

变量名与对象属性名不一致解构

    var obj = {
        name: 'chris',
        sex: 'male',
        age: 26
    };
    var {name: nickname, age: howold} = obj;
    console.log(nickname + ' ' + howold); //chris 26

等同于：

    var obj = {
        name: 'chris',
        sex: 'male',
        age: 26
    };
    var nickname = obj.name,
        howold = obj.age;

    console.log(nickname + ' ' + howold); //chris 26
    

嵌套对象解构

    var obj = {
        name: 'chris',
        sex: 'male',
        age: 26,
        son: {
            sonname: '大熊',
            sonsex: 'male',
            sonage: 1
        }
    };
    var {name, sex, age, son: {sonname, sonsex, sonage}} = obj;
    console.log(sonname + ' ' + sonsex + ' ' + sonage);
    

等同于：

    var obj = {
        name: 'chris',
        sex: 'male',
        age: 26,
        son: {
            sonname: '大熊',
            sonsex: 'male',
            sonage: 1
        }
    };
    var name = obj.name,
        sex = obj.sex,
        age = obj.age,
        _obj$son = obj.son,
        sonname = _obj$son.sonname,
        sonsex = _obj$son.sonsex,
        sonage = _obj$son.sonage;

    console.log(sonname + ' ' + sonsex + ' ' + sonage);

    

rest运算符

rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

//主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}

bar(1, 2, 3, 4);
//1
//2
//3
//4

bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}

bar(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]

rest运算符配合解构使用：

     var [a, ...rest] = [1, 2, 3, 4];
    console.log(a);//1
    console.log(rest);//[2, 3, 4]
    
    

总结

• 等号表达式是典型的赋值形式，函数传参和for循环的变量都是特殊形式的赋值。
• 解构的原理是赋值的两边具有相同的结构，就可以正确取出数组或对象里面的元素或属性值，省略了使用下标逐个赋值的麻烦。
• 对于三个点号，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。
• 在等号赋值或for循环中，如果需要从数组或对象中取值，尽量使用解构。
• 在自己定义函数的时候，如果调用者传来的是数组或对象，形参尽量使用解构方式，优先使用对象解构，其次是数组解构。代码可读性会很好。
• 在调用第三方函数的时候，如果该函数接受多个参数，并且你要传入的实参为数组，则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。
• rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。