ES6+ includes()

1. 前言

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

2. 方法詳解

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

使用語法：

arr.includes(valueToFind[, fromIndex])

參數(shù)解釋：

語法實(shí)例：

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

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

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

[undefined].includes();		// true

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

3. indexOf () 的問題

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

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

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

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

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

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

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

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

4. 使用場景

4.1 參數(shù)簡介

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

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

該方法的第二個(gè)參數(shù)表示搜索的起始位置，包括當(dāng)前的位置，如果第二個(gè)參數(shù)大于或等于數(shù)組的長度時(shí)，則返回 false。

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

4.2 第二個(gè)參數(shù)為負(fù)值時(shí)

如果第二個(gè)參數(shù)為負(fù)值時(shí)，計(jì)算數(shù)組的長度和第二個(gè)參數(shù)之和小于 0，則整個(gè)數(shù)組都會被搜索。

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

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

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

4.3 作為通用方法

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

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

上面的代碼中，includes 方法接收 arguments 對象，并且正確地返回相應(yīng)的結(jié)果。

5. 小結(jié)

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

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