ES7 中的 Array.prototype.includes() 方法使用技巧合集-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，新增了一个 Array 原型方法 includes()，用于判断数组是否包含某个元素。相较于传统的 indexOf 方法，includes() 更加简洁明了，同时也避免了一些可能的误判。在本文中，我们将会介绍 includes() 方法的使用技巧，以及一些注意事项。

基本用法

includes() 方法的基本用法非常简单，只需要在数组对象上调用该方法，并传入需要查找的元素即可。以下是一个简单的示例：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

可选参数

除了查找元素之外，includes() 还可以接受一个可选参数 fromIndex，用于指定查找的起始位置。如果省略该参数，则默认从数组的第一个元素开始查找。以下是一个示例：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3, 2)); // true，从索引 2 开始查找
console.log(arr.includes(3, 3)); // false，从索引 3 开始查找

需要注意的是，如果 fromIndex 参数为负数，则会从数组末尾开始计算索引。例如：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, -3)); // false，从索引 2 开始查找
console.log(arr.includes(4, -3)); // true，从索引 2 开始查找

与其他方法的比较

includes() 方法类似于传统的 indexOf 方法，但是它们之间还是有一些区别的。以下是一个比较 includes() 和 indexOf 的示例：

const arr = [1, 2, NaN, 4];

console.log(arr.includes(NaN)); // true
console.log(arr.indexOf(NaN)); // -1

console.log(arr.includes(1, -3)); // false
console.log(arr.indexOf(1, -3)); // 0

可以看到，在查找 NaN 元素时，includes() 方法返回了 true，而 indexOf 方法返回了 -1。这是因为 includes() 方法使用了 Object.is() 方法来比较元素，而 indexOf 方法使用了 === 运算符。由于 NaN === NaN 的结果为 false，因此 indexOf 方法无法正确地查找 NaN 元素。

另外，当使用 fromIndex 参数时，includes() 方法与 indexOf 方法的行为也有所不同。在示例中，includes(1, -3) 返回了 false，而 indexOf(1, -3) 返回了 0。这是因为 includes() 方法会将负数的 fromIndex 参数转化为正数，而 indexOf 方法则不会。

总结

includes() 方法是一个非常实用的数组方法，可以帮助我们更加方便地查找数组中的元素。在使用该方法时，需要注意其默认使用 Object.is() 方法来比较元素，因此在查找 NaN 元素时需要格外小心。此外，还需要注意 fromIndex 参数的使用，以避免出现意外的结果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657b5b82d2f5e1655d5e51c7