使用 ES7 中的 Array.prototype.includes 解决 indexOf 的缺陷

在前端开发中，经常需要对数组进行操作。而在对数组进行操作时，我们可能会用到 indexOf 方法来查找元素在数组中的位置。然而，这种方法存在一些缺陷，比如无法判断 NaN 是否在数组中，也无法判断对象是否在数组中。为了解决这些问题，ES7 中新增了一个方法，即 Array.prototype.includes。本篇文章将详细介绍这个方法的使用方法、优缺点以及应用。

Array.prototype.includes 的使用方法

Array.prototype.includes 方法用来判断数组中是否包含某个元素，返回一个布尔值。它的语法如下：

array.includes(searchElement[, fromIndex])

其中，searchElement 是要查找的元素，fromIndex 是可选参数，表示从哪个位置开始查找，默认值为 0。

下面是一个例子：

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

从上面的例子可以看出，Array.prototype.includes 方法可以正确判断 NaN 是否在数组中，而 indexOf 方法则无法判断。

Array.prototype.includes 的优缺点

相较于 indexOf 方法，Array.prototype.includes 方法具有以下优点：

1. 可以正确判断 NaN 是否在数组中。
2. 可以正确判断对象是否在数组中。
3. 代码更加简洁，可读性更好。

当然，Array.prototype.includes 方法也有一些缺点：

1. 无法判断元素在数组中的位置。
2. 不支持查找子字符串。

因此，在使用 Array.prototype.includes 方法时，需要根据实际情况进行选择。

Array.prototype.includes 的应用

在实际项目中，Array.prototype.includes 方法可以用来判断某个元素是否在数组中，从而进行相应的操作。下面是一个例子：

const arr = ['apple', 'banana', 'orange'];
if (arr.includes('apple')) {
  console.log('I love apples!');
} else {
  console.log('I don\'t like apples.');
}

在上面的例子中，如果数组中包含 'apple'，则输出 'I love apples!'，否则输出 'I don't like apples.'。

总结

本文介绍了 ES7 中新增的 Array.prototype.includes 方法的使用方法、优缺点以及应用。相较于 indexOf 方法，Array.prototype.includes 方法具有更好的判断能力和代码可读性，但也存在一些缺点。在实际开发中，需要根据实际情况进行选择。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660bb2d9d10417a222be2e9f