您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

ES6+ includes()

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

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

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
}

includes() 返回布尔值,表示某个数组是否包含给定的值,如果给定的值是 NaN 也是可以判断的。

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

该的第二个参数表示的起始位置,当前的位置,如果第二个参数大于或等于数组的长度时,则返回 false

[, , ].includes(, );   // false
[, , ].includes(, );   // true

如果第二个参数为负值时,计算数组的长度和第二个参数之和小于 0,则整个数组都会被。

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

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

arr 的数组长度是 3,第二个参数是 - 10,计算之和为 -7 小于 0,则整个数组都会被。

我们看到在字符串和数组中都有 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 对象,并且正确地返回相应的结果。

本节讲解了数组的 includes() 的使用,并对比了 ES5 中的 indexOf() 并回答了为什么 includes() 就是比较好的选择 ,总结有以下几点:


联系我
置顶