ES6+ includes()
1. 前言
在字符串中我们学习了 includes ()
方法,在数组中同样存在 includes ()
方法,用来查找数组。includes ()
的存在是为了取代 indexOf ()
方法而设计的, indexOf()
在数组查找时存在一定缺陷,对于数组中元素是 undefined
、NaN
时查找的结果是有问题的。为了保持语法的一致性和简洁性 indexOf ()
方法也是有必要的,本节我们就来学习数组中的 includes()
方法。
2. 方法详解
使用语法:
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 () 的问题
在 ES5 中使用 indexOf()
方法在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1。但是查找数组时存在一定缺陷,indexOf
不能判断数组中是否有 NaN
,对于数组中的空项也不能判断。
var arr1 = [,,,,,];
var arr2 = [null, undefined, ];
console.log(arr1[], arr1[]) // undefined undefined
arr1.indexOf(undefined) // -1
arr2.indexOf(); // -1
上面的代码可以看到,在第 1 行中数组的每一项都是空的, 使用 indexOf()
查找返回的结果为 -1,没有查到 undefined
值,但从第 3 行打印的结果可以看到其实空数组的每一项都是 undefined
。另外,还有个问题 indexOf()
不能解决,数组中有 NaN 时查询不了,返回的结果也是 -1。ES6 的includes()
可以完美解决上面的问题,看如下示例:
[,,,,,].includes(undefined) // true
[null, undefined, ].includes()] // true
indexOf 返回的是数值型的,而 includes 返回的是布尔型的,方便逻辑判断。如下实例:
var arr = ['imooc', 'ES6', 'wiki'];
if (arr.includes('ES6')) {
// todo
}
if (arr.indexOf('ES6') !== -) {
// todo
}
4. 使用场景
4.1 参数简介
[, , ].includes(); // true
[, , ].includes(); // false
[, , ].includes(); // true
[undefined].includes(undefined) // true
[, , ].includes(, ); // false
[, , ].includes(, ); // true
4.2 第二个参数为负值时
如果第二个参数为负值时,计算数组的长度和第二个参数之和小于 0,则整个数组都会被搜索。
var arr = ['a', 'b', 'c'];
arr.includes('a', -); // true
arr.includes('b', -); // true
arr.includes('a', -); // 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
5. 小结
本节讲解了数组的 includes()
方法的使用,并对比了 ES5 中的 indexOf()
并回答了为什么 includes()
就是比较好的选择 ,总结有以下几点: