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