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对象的使用。