新的 Array API


陣列是經常使用的資料結構,在 ES6 中,Array 上新增了一些 API 值得介紹一下。首先是替換 Array 建構式用的 Array.of

> Array.of(1);
[ 1 ]
> Array.of(1, 2);
[ 1, 2 ]
> Array.of(1, 2, 3);
[ 1, 2, 3 ]
> Array.of(1, 2, 3, undefined, 4);
[ 1, 2, 3, undefined, 4 ]
>

在只有一個引數的時候,不會像 Array(1)new Array(1) 有別於其他引數長度時的行為,如果中間有元素從缺,使用 Array.of 必須明確指定從缺的值是什麼(nullundefined?),如果你寫 [1, 2, 3, ,4 ] 會如何呢?索引 3 處會是空項目(empty item),不是 undefined,在〈數字為特性的陣列〉中談過,空項目並不是 undefined

除此之外,我想的到的,大概就是在某些場合需要指定回呼函式,而你可以將 Array.of 傳入(指定 Array?認真的嗎?),因為你不能將 [] 當成函式傳入。

接著,在〈數字為特性的陣列〉談過,在 JavaScript 的世界中,你會有很多機會遇到許多長得像陣列(Array-like)的物件,而有時候,你需要將這些物件轉成陣例,使之具有真正陣列該有的行為,這不單只是將 forEach 之類的方法設給該物件,還有許多瑣碎的事要做。

這時 ES6 的 Array.from 可以省許多功夫:

> let o = {
...    '0' : 100,
...    '1' : 200,
...    '2' : 300,
...    length : 3
... };
undefined
> let arr = Array.from(o);
undefined
> arr.forEach(elem => console.log(elem));
100
200
300
undefined
> arr instanceof Array;
true
>

Array.from 遇到有空項目,或轉換過程會發生空項目的情況,會明確使用 undefined

> Array.from([1,,2]);
[ 1, undefined, 2 ]
> Array.from({length : 4});
[ undefined, undefined, undefined, undefined ]
>

除此之外,Array.from 可以接受一個回呼函式,在轉換過程可以進行 map 的動作:

> Array.from([1, , 3], elem => elem ? elem * 2 : 0);
[ 2, 0, 6 ]
>

如果要用某個值填滿陣列,那麼 Array.fill 很方便:

> Array(10).fill(0);
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
> [1, 2, 3, 4, 5].fill(0, 2, 4);
[ 1, 2, 0, 0, 5 ]
>

Array.fill 第一個參數接受要填充的值,之後選擇性地接受 startend,用來指定填充的索引起始與結束。

Arrayfind 方法其實是 findFirst 的概念,可以找到第一個符合條件的數,找不到就傳回 undefinedfindIndex 則是找到第一個符合條件的元素索引位置,找不到傳回 -1:

> [10, 20, -30, 40].find(n => n < 0);
-30
> [10, 20, -30, 40].findIndex(n => n < 0);
2
>

findfindIndex 的回呼函式,其實可以接受三個引數,分別是元素值、索引與原陣列參考,上面的範例只使用了元素值的部份。