ES6+ includes()使用方法详解

发布时间：2023-03-24 14:22:43 所属栏目：教程来源：

导读：在字符串中我们学习了 includes () 方法，在数组中同样存在 includes () 方法，用来查找数组。includes () 的存在是为了取代 indexOf () 方法而设计的， indexOf() 在数组查找时存在一定缺陷，对于数组中元素是 unde

在字符串中我们学习了 includes () 方法，在数组中同样存在 includes () 方法，用来查找数组。includes () 的存在是为了取代 indexOf () 方法而设计的， indexOf() 在数组查找时存在一定缺陷，对于数组中元素是 undefined、NaN 时查找的结果是有问题的。为了保持语法的一致性和简洁性 indexOf () 方法也是有必要的，本节我们就来学习数组中的 includes() 方法。

includes () 方法用于查找一个数组中是否包含一个指定的元素，并返回一个布尔值，如果包含返回 true 否则返回 false。

使用语法：

arr.includes(valuetoFind[, fromIndex])
参数解释：

参数   描述
valuetoFind   需要查找的目标值
fromIndex   （可选）从 fromIndex 索引处开始查找 valuetoFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜（就是从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
语法实例：

var arr = ['imooc', 'ES6', 'wiki'];
console.log(arr.includes('ES6')); // true
和字符串中的 includes() 方法一样，当没有参数时，includes() 方法会把第一个参数置成 undefined，注意，不同的是这里的 undefined 不是字符串 “undefined”。如下实例：

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

indexOf() 在查询数组中元素时存在一些问题，下面我们就来看看为什么 ES6 要引入 includes() 方法。

在 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
从上面的代码可以看出，使用 includes() 查询可以得到正确的结果。

indexOf 返回的是数值型的，而 includes 返回的是布尔型的，方便逻辑判断。如下实例：

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!