ES6 includes方法完全指南

ES6 includes方法是JavaScript語言新增的一種數組方法，它被用於檢測一個數組是否包含一個指定的元素，返回一個布爾值。本文將從多個方面介紹ES6 includes方法，包括語法、參數、返回值、應用場景等。

一、ES6 includes方法語法

ES6 includes方法的語法十分簡單，僅需使用數組對象後直接調用，並傳入需要查找的元素即可。

    arr.includes(searchElement[, fromIndex])

其中，searchElement為需要查找的元素，fromIndex可選，表示從哪個索引開始查找。如果省略則默認從數組開頭查找。

二、ES6 includes方法參數解析

arr.includes(searchElement[, fromIndex])方法中可傳入兩個參數，分別為需要查找的元素和查找的起始索引。

1. searchElement（必填）

表示需要查找的元素，可以是任何類型的數據：字符串、數值、對象或者其他。

如果需要查找的元素不同於數組中的元素，本方法會返回false。

    const arr = [1, 2, 3, 4, 5];
    console.log(arr.includes(0)); //false，不存在元素0

該方法的查找規則比較嚴格，其處理方式與全等（===）相似，不會自動轉換數據類型。因此，如果需要查找的元素與數組元素不是同類型，也會返回false。

    const arr = [1, 2, 3, 4, 5];
    console.log(arr.includes("2")); //false，"2"為字符串類型，不等同於2

2. fromIndex（可選）

表示查找的起始位置，如果不指定該參數，則默認從數組的第一個元素開始查找。該參數為單個有效的整數值。

如果傳入一個不是數字的值，該參數會自動轉換為數字。

“`js
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3, “2”)); //true， “2” 默認轉換為數字 2
“`

如果傳入的起始位置參數為負值，則從數組末尾開始計數。例如，-1指的是數組最後一個元素。

    const arr = [1, 2, 3, 4, 5];
    console.log(arr.includes(3, -1)); //false，從數組的最後一個元素開始查找

三、ES6 includes方法返回值

ES6 includes方法返回一個布爾類型的值，表明數組中是否包含被查找的元素。

如果數組中找到了被查找的元素，則返回true，反之則返回false。

    const arr = [1, 2, 3, 4, 5];
    console.log(arr.includes(3)); //true

四、ES6 includes方法與indexOf方法的區別

ES6 includes方法與原有的indexOf方法在功能上有些類似，都是返回一個布爾類型值，判斷一個元素是否存在於數組之中。但它們也存在着顯著的區別。

1、ES6 includes方法比indexOf方法更為簡潔，代碼可讀性更高。

2、ES6 includes方法可以查找NaN元素的位置，且不需要額外的處理。

“`js
const arr = [1, 2, 3, NaN];
console.log(arr.includes(NaN)); //true
“`

使用indexOf方法需要進行額外的判斷。

“`js
const arr = [1, 2, 3, NaN];
console.log(arr.indexOf(NaN) !== -1); //true
“`

3、ES6 includes方法的查找範圍不包含起始位置 等價於arr.indexOf(searchElement, fromIndex) !== -1)。

最後，需要注意ES6 includes方法與indexOf方法，會出現錯誤的情況是，當搜索的值是數組中某個帶有原型屬性的對象時，ES6 includes方法並沒有順着原型鏈進行查找，而indexOf方法則會。

五、ES6 includes方法的應用場景

ES6 includes方法主要用於判斷數組中是否含有某個元素，其在實際開發中很有用，尤其是處理一個數組需要找某個元素時。下面介紹一些更具體的應用場景。

1、判斷一個數組是否包含某些元素

ES6 includes方法可以判斷一個數組是否包含某些元素。我們不需要使用for循環遍曆數組，只需使用 includes方法即可輕鬆實現。

“`js
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
“`

2、過濾數組中的特定元素

使用ES6 includes方法可以輕鬆過濾掉數組中的某些元素。

“`js
const arr = [1, 2, 3, 4, 5];
const evenArr = arr.filter(num => !arr.includes(num % 2 !== 0));
console.log(evenArr); //[2, 4]
“`

上述代碼中，過濾掉arr中不是偶數的元素，返回僅包含偶數的新數組。

3、驗證用戶的輸入

ES6 includes方法可用於驗證用戶輸入的值是否符合規定的格式，增強前端驗證用戶輸入的表單。

“`html

郵箱：

提交

const userEmail = document.getElementById(“userEmail”);
const submitBtn = document.getElementById(“submitBtn”);
submitBtn.addEventListener(“click”, event => {
event.preventDefault();
if (!userEmail.value.includes(“@”)) {
alert(“請輸入正確的郵箱地址”);
} else {
alert(“表單提交成功”);
//…表單提交後續邏輯
}
});

“`

上述代碼中，使用ES6 includes方法驗證用戶輸入的郵箱地址，如果不符合規則，則提示用戶重新輸入。

六、ES6 includes方法總結

ES6 includes方法是一個實用的數組方法，可以更方便、快捷地判斷一個元素是否在數組中，擴展了JavaScript的數組功能，並且代碼可讀性更高。在實際開發中，可以應用於驗證用戶輸入、過濾數組中的特定元素等場景。

需要注意的是，ES6 includes方法的查找規則與全等（===）相似，不會自動轉換數據類型，所以如果需要查找的元素與數組元素不是同類型，也會返回false。 在處理查找範圍和查找方式上與indexOf方法也有所不同，需要根據具體的業務場景進行選擇。