重溫ES6系列之「數組的擴展-數組實例的find()、findIndex()、fill()、includes()」

一、find()

數組實例的find方法，用於找出第一個符合條件的數組成員。 它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值

爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。

[1, 4, -5, 10].find((n) => n < 0)

// -5
複製代碼

上面代碼找出數組中第一個小於0的成員。

[1, 5, 10, 15].find(function(value, index, arr) {

return value > 9;

}) // 10
複製代碼

上面代碼中，find方法的回調函數能夠接受三個參數，依次爲當前的值、當前的位置和原數組。

二、findIndex()

數組實例的findIndex方法的用法與find方法很是相似，返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {

return value > 9;}) // 2
複製代碼

這兩個方法均可以接受第二個參數，用來綁定回調函數的this對象。

另外，這兩個方法均可以發現NaN，彌補了數組的IndexOf方法的不足。

[NaN].indexOf(NaN)

// -1

[NaN].findIndex(y => Object.is(NaN, y))

// 0
複製代碼

上面代碼中，indexOf方法沒法識別數組的NaN成員，可是findIndex方法能夠藉助Object.is方法作到

3.fill()

fill方法使用給定值，填充一個數組。

['a', 'b', 'c'].fill(7)

// [7, 7, 7]

new Array(3).fill(7)

// [7, 7, 7]
複製代碼

上面代碼代表，fill方法用於空數組的初始化很是方便。數組中已有的元素，會被所有抹去。

fill方法還能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置。

['a', 'b', 'c'].fill(7, 1, 2)

// ['a', 7, 'c']
複製代碼

上面代碼表示，fill方法從1號位開始，向原數組填充7，到2號位以前結束。

4.includes()

Array.prototype.includes方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法相似。

[1, 2, 3].includes(2); // true

[1, 2, 3].includes(4); // false

[1, 2, NaN].includes(NaN); // true
複製代碼

該方法的第二個參數表示搜索的起始位置，默認爲0。若是第二個參數爲負數，則表示倒數的位置，若是這時它大於數組長度（好比第二個參數爲-4，但數組長度爲3），則會重置爲從0開始。

[1, 2, 3].includes(3, 3); // false

[1, 2, 3].includes(3, -1); // true
複製代碼

沒有該方法以前，咱們一般使用數組的indexOf方法，檢查是否包含某個值。

if (arr.indexOf(el) !== -1) {

// ...

}
複製代碼

indexOf方法有兩個缺點:

• 不夠語義化，它的含義是找到參數值的第一個出現位置，因此要去比較是否不等於-1，表達起來不夠直觀。
• 內部使用嚴格至關運算符（===）進行判斷，這會致使對NaN的誤判。

[NaN].indexOf(NaN)

// -1
複製代碼

includes使用的是不同的判斷算法，就沒有這個問題。

[NaN].includes(NaN)

// true
複製代碼

下面代碼用來檢查當前環境是否支持該方法，若是不支持，部署一個簡易的替代版本。

const contains = (() =>

Array.prototype.includes

? (arr, value) => arr.includes(value)

: (arr, value) => arr.some(el => el === value)

)();

contains(["foo", "bar"], "baz"); // => false
複製代碼

Map和Set數據結構有一個has方法，須要注意與includes區分。

Map結構的has方法，是用來查找鍵名的，好比Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set結構的has方法，是用來查找值的，好比Set.prototype.has(value)、WeakSet.prototype.has(value)。