chapter08 數組的擴展

8.1 擴展運算符

8.1.1 擴展運算符的含義

...

如同rest運算符的逆運算，將一個數組轉換為用逗號分隔的參數序列。

    console.log(...[1, 2, 3])  // 1, 2, 3
    // 用於函數調用
    function add (x, y) {
        return x + y;
    }
    
    add(...[1, 2]); // 3

8.1.2 代替數組的apply方法

apply方法可以將數組轉為函數的參數

    // ES5的寫法
    function f (x, y ,z) {
        // todo
    }
    let args = [1, 2, 3];
    f.apply(null, args);
    // ES6的寫法
    function f (x, y ,z) {
        // todo
    }
    let args = [1, 2, 3];
    f(...args);

8.1.3 擴展運算符的應用

• 合併數組

  // ES5
  [1, 2].concat(more);
  // ES6
  [1, 2, ...more]

• 與解構賦值相結合

  // ES5
  a = list[0]
  rest = list.slice(1);
  // ES6
  [a, ...rest] = list;
  
  const [first, ...rest] = [1, 2, 3, 4, 5];
  first // 1
  rest  // [2, 3, 4 ,5]

  註意：如果擴展運算符用於解構賦值，只能將其放置在參數的最後一位

• 處理函數的返回值

  函數返回了一個可枚舉的數據類型，則可以對其使用擴展運算符處理。

• 字元串

  [...'hello'] // ['h', 'e', 'l', 'l', 'o']

  這種寫法的好處是可以正確識別32位的Unicode
  javascript function length (str) { return ...str.length; }
  以上函數可以正確返回字元串的長度

• Iterator介面

  擴展運算符可以作用在任何實現了Iterator介面的數據類型上（Map, Set, Generator等）。

8.2 Array.from()

Array.from()用於將兩類對象轉換為真正的數組：類似數組的對象和可遍歷的對象（包括ES6新增的Set和Map）。

    let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };

    // ES5的寫法
    let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

    // ES6的寫法
    let arr2 = Array.from(arrayLike);

常見的類數組對象：DOM操作返回的NodeList對象和arguments對象。

所謂類數組，本質特征只有一點：必須具有length屬性。任何有有length屬性的對象，都可以通過Array.from方法轉為數組。

...擴展運算符也可以將某些數據結構轉換成數組，但是其原理是通過Iterator介面轉換。

    Array.from({ length: 2});
    // [undefined, undefined]

Array.from()還可以接受第二個參數，作用類似於數組的map方法，用於對每一個數組元素進行處理，並且將處理後的值放入返回的數組。

如果map函數裡面用到了this，還可以指定第三個參數用來綁定this。

    Array.from({ length: 2 }, () => 'jack');
    // ['jack', 'jack']

    function countSymbol (string) {
        return Array.from(string).length;
    }

8.3 Array.of()

將一組值轉換為一個數組，主要是用來解決Array構造函數的怪異。

8.4 數組實例.copyWithin()

在數組內部進行複製，參數（target, start, end）

• target （可選）開始進行複製的下標
• start （可選）開始被覆制的下標
• end （可選）要被覆制的範圍，不包括

8.5 Array.find() & Array.findIndex()

作用就和名稱一致。
參數：

• fn (value, index, arr) {}

  篩選函數，最多接受三個參數

• this

  篩選函數的this對象

8.6 Array.fill()

填充數組

擴展版本：Array.fill(str2Fill, start, end)

指定填充的區間 [ start, end )

8.7 數組實例的enties() keys() values()

分別返回三種迭代器，可以使用 for/of 或者 next() 方法進行迭代。

8.8 數組實例的includes() 方法

見名知義
includes()和find()方法可以找到NaN

8.9 數組的空位

ES6將空位視為undefined

空位處理的規則並不統一，所以建議儘量不要出現空位。