ES6+ includes()

1. 前言

在字符串中我們學習了 includes () 方法，在數組中同樣存在 includes () 方法，用來查找數組。includes () 的存在是為了取代 indexOf () 方法而設計的， indexOf() 在數組查找時存在一定缺陷，對于數組中元素是 undefined、NaN 時查找的結果是有問題的。為了保持語法的一致性和簡潔性 indexOf () 方法也是有必要的，本節(jié)我們就來學習數組中的 includes() 方法。

2. 方法詳解

includes () 方法用于查找一個數組中是否包含一個指定的元素，并返回一個布爾值，如果包含返回 true 否則返回 false。

使用語法：

arr.includes(valueToFind[, fromIndex])

參數解釋：

語法實例：

var arr = ['imooc', 'ES6', 'wiki'];

console.log(arr.includes('ES6'));     // true

和字符串中的 includes() 方法一樣，當沒有參數時，includes() 方法會把第一個參數置成 undefined，注意，不同的是這里的 undefined 不是字符串 “undefined”。如下實例：

[undefined].includes();		// true

['undefined'].includes();	// false

3. indexOf () 的問題

indexOf() 在查詢數組中元素時存在一些問題，下面我們就來看看為什么 ES6 要引入 includes() 方法。

在 ES5 中使用 indexOf() 方法在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回 -1。但是查找數組時存在一定缺陷，indexOf 不能判斷數組中是否有 NaN，對于數組中的空項也不能判斷。

var arr1 = [,,,,,];
var arr2 = [null, undefined, NaN];
console.log(arr1[0], arr1[1])		// undefined undefined
arr1.indexOf(undefined)            // -1
arr2.indexOf(NaN);    // -1

上面的代碼可以看到，在第 1 行中數組的每一項都是空的， 使用 indexOf() 查找返回的結果為 -1，沒有查到 undefined 值，但從第 3 行打印的結果可以看到其實空數組的每一項都是 undefined。另外，還有個問題 indexOf() 不能解決，數組中有 NaN 時查詢不了，返回的結果也是 -1。ES6 的includes() 可以完美解決上面的問題，看如下示例：

[,,,,,].includes(undefined)           // true
[null, undefined, NaN].includes(NaN)]   // true

從上面的代碼可以看出，使用 includes() 查詢可以得到正確的結果。

indexOf 返回的是數值型的，而 includes 返回的是布爾型的，方便邏輯判斷。如下實例：

var arr = ['imooc', 'ES6', 'wiki'];
if (arr.includes('ES6')) {
  // todo
}
if (arr.indexOf('ES6') !== -1) {
  // todo
}

4. 使用場景

4.1 參數簡介

includes() 方法返回一個布爾值，表示某個數組是否包含給定的值，如果給定的值是 NaN 也是可以判斷的。

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

該方法的第二個參數表示搜索的起始位置，包括當前的位置，如果第二個參數大于或等于數組的長度時，則返回 false。

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

4.2 第二個參數為負值時

如果第二個參數為負值時，計算數組的長度和第二個參數之和小于 0，則整個數組都會被搜索。

var arr = ['a', 'b', 'c'];

arr.includes('a', -10);   // true
arr.includes('b', -10);   // true
arr.includes('a', -2);    // false

arr 的數組長度是 3，第二個參數是 - 10，計算之和為 -7 小于 0，則整個數組都會被搜索。

4.3 作為通用方法

我們看到在字符串和數組中都有 includes() 方法，其有意設計為通用方法。它不要求 this 值是數組對象，所以它可以被用于其他類型的對象 (比如類數組對象)。下面的例子展示了 在函數的 arguments 對象上調用的 includes() 方法。

function fn() {
  console.log([].includes.call(arguments, 'a'));
  console.log([].includes.call(arguments, 'd'));
}
fn('a', 'b', 'c');
// true
// false

上面的代碼中，includes 方法接收 arguments 對象，并且正確地返回相應的結果。

5. 小結

本節(jié)講解了數組的 includes() 方法的使用，并對比了 ES5 中的 indexOf() 并回答了為什么 includes() 就是比較好的選擇 ，總結有以下幾點：

1. includes() 返回的是布爾值更容易做條件判斷；
2. indexOf() 不能對數組空項和數組項為 NaN 的元素進行查找，而 includes() 可以很好地解決這個問題；
3. includes() 被設計為通用方法，可以在類數組中使用。