es6陣列includes()用法例項分析

本文例項講述了es6陣列includes()用法。分享給大家供大家參考，具體如下：

Array.prototype.includes方法返回一個布林值，表示某個陣列是否包含給定的值，與字串的includes方法類似。ES2016引入了該方法。

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

該方法的第二個引數表示搜尋的起始位置，預設為0。如果第二個引數為負數，則表示倒數的位置，如果這時它大於陣列長度(比如第二個引數為-4，但陣列長度為3)，則會重置為0開始。

[1,3].includes(3,3); // false
[1,-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) 
)()

另外，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)

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。