ES6 解構和forEach()

怎麼個解構法叻?

先來個例子:

用了ES6解構的：

let zoo = { dog: 'harry', cat: 'miumiu' };
    let { dog: a, cat: b } = zoo;
    console.log(a)  // 'harry'
    console.log(b)  // 'miumiu'複製代碼

與舊寫法的比較：

let zoo = { dog: 'harry', cat: 'miumiu' };
    let a = zoo.dog;
    let b = zoo.cat;
    console.log(a)  // 'harry'
    console.log(b)  // 'miumiu'複製代碼

因此結構就是 => 按照你本身的意願從數組和對象中提取值，而後對你定的變量進行賦值，這種之前寫不少行如今只要一行的方式，被稱爲解構(Destructuring)。

---

看了上面的例子，聰慧的妹子們應該就知道大概是個什麼意思了吧，下面就是解構常見的用法；

有像這樣的：

let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3複製代碼

以及這樣的：

let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"複製代碼

還有這樣的：

let [head, ...tail] = [1, 2, 3, 4];//"..."這三個點是ES6裏的擴展運算符，意思是將一個數組轉爲用逗號分隔的參數序列。
    head // 1
    tail // [2, 3, 4]複製代碼

因此從上面這些例子能夠看出：「解構遵循「模式匹配」，只要等號兩邊的模式或者說是結構相同，左邊的變量就會被賦予相對應的值。

PS：
「若是解構不成功，變量的值就等於undefined。」好比：

「let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []」複製代碼

結構能夠設定默認值：

[x, y = 'b'] = ['a']; // x='a', y='b'
    [x, y = 'b'] = ['a', undefined]; // x='a', y='b'複製代碼

當某一個值嚴格等於(===)undefined時，默認值會自動生效；

---

對象解構

因爲對象與數組不一樣，對象的屬性們但是不分前後的，因此變量名必須與對象的屬性名相同；

對象的解構實際上是：先找到同名屬性，再賦值給對應變量

一個例子：

var { foo: baz } = { foo: "aaa", bar: "bbb" };
    baz // "aaa"
    foo // error: foo is not defined複製代碼

上面代碼中，真正被賦值的是變量baz，而不是模式foo

---

forEach()與解構;

forEach() 方法用於調用數組的每一個元素，並將元素傳遞給回調函數;
語法：

array.forEach(function(Value, index, arr), thisValue);複製代碼

例子：

var sum = 0;

    [1, 2, 3, 4].forEach(function (item, index, array) {
      sum += item;
    });

    alert(sum); // 10複製代碼

與解構配合完美無缺：

let items = [ ['foo', 3], ['bar', 9] ];
    items.forEach(([word, count]) => console.log(word+' '+count));複製代碼

上面等於：

let items = [ ['foo', 3], ['bar', 9] ];
    items.forEach(({word: w, count: c}) => console.log(w+' '+c));複製代碼

ps:ES6的for-of循環語句中也能夠使用解構：

let items = [ ['foo', 3], ['bar', 9] ];
    for ([word, count] of items) {
    console.log(word+' '+count);
}複製代碼