利用 ES7 中的 Array.includes() 方法避免使用 Array.indexOf() 的一些错误

在 JavaScript 中，数组是一种常用的数据类型。在数组中，我们经常需要查找某个元素的索引位置。在过去，我们通常使用 Array.indexOf() 方法来查找元素的索引位置，但是这种方式存在一些问题。ES7 中提供了一个新的方法 Array.includes()，可以帮助我们避免一些错误。

Array.indexOf() 的问题

Array.indexOf() 方法用于查找数组中某个元素的索引位置。该方法返回元素在数组中的位置，如果元素不存在，则返回 -1。

下面是一个使用 Array.indexOf() 方法的示例代码：

const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3);
console.log(index); // 2

在上面的示例代码中，我们查找数组中元素值为 3 的元素的索引位置，结果为 2。

然而，Array.indexOf() 方法存在一些问题。下面是一些常见问题：

无法判断元素是否存在于数组中

当 Array.indexOf() 方法返回 -1 时，我们无法确定元素是否存在于数组中。例如，下面的代码：

const array = [1, 2, 3, 4, 5];
const index = array.indexOf(6);
if (index !== -1) {
  console.log('元素存在于数组中');
} else {
  console.log('元素不存在于数组中');
}

在上面的示例代码中，我们查找数组中元素值为 6 的元素的索引位置，结果为 -1。然而，由于 -1 也是一个合法的索引位置，因此我们无法确定元素是否存在于数组中。

无法处理 NaN 元素

当数组中存在 NaN 元素时，Array.indexOf() 方法无法正确处理。例如，下面的代码：

const array = [1, 2, NaN, 4, 5];
const index = array.indexOf(NaN);
console.log(index); // -1

在上面的示例代码中，我们查找数组中值为 NaN 的元素的索引位置，结果为 -1。然而，由于 NaN 与任何值都不相等，因此 Array.indexOf() 方法无法正确处理。

Array.includes() 的优点

ES7 中提供了一个新的方法 Array.includes()，用于判断数组中是否存在某个元素。该方法返回一个布尔值，表示元素是否存在于数组中。

下面是一个使用 Array.includes() 方法的示例代码：

const array = [1, 2, 3, 4, 5];
const isExist = array.includes(3);
console.log(isExist); // true

在上面的示例代码中，我们判断数组中是否存在元素值为 3 的元素，结果为 true。

Array.includes() 方法有以下优点：

可以判断元素是否存在于数组中

当 Array.includes() 方法返回 true 时，我们可以确定元素存在于数组中。例如，下面的代码：

const array = [1, 2, 3, 4, 5];
const isExist = array.includes(6);
if (isExist) {
  console.log('元素存在于数组中');
} else {
  console.log('元素不存在于数组中');
}

在上面的示例代码中，我们判断数组中是否存在元素值为 6 的元素，结果为 false。由于 Array.includes() 方法返回一个布尔值，因此我们可以确定元素不存在于数组中。

可以处理 NaN 元素

当数组中存在 NaN 元素时，Array.includes() 方法可以正确处理。例如，下面的代码：

const array = [1, 2, NaN, 4, 5];
const isExist = array.includes(NaN);
console.log(isExist); // true

在上面的示例代码中，我们判断数组中是否存在值为 NaN 的元素，结果为 true。由于 NaN 与任何值都不相等，因此 Array.includes() 方法可以正确处理。

总结

在 JavaScript 中，数组是一种常用的数据类型。在数组中，我们经常需要查找某个元素的索引位置。在过去，我们通常使用 Array.indexOf() 方法来查找元素的索引位置，但是该方法存在一些问题。

ES7 中提供了一个新的方法 Array.includes()，用于判断数组中是否存在某个元素。该方法可以避免 Array.indexOf() 方法的一些错误，并且具有更好的性能。因此，在编写 JavaScript 代码时，我们应该优先考虑使用 Array.includes() 方法。

下面是一个使用 Array.includes() 方法的示例代码：

const array = [1, 2, 3, 4, 5];
const isExist = array.includes(3);
console.log(isExist); // true

希望本文能够帮助大家更好地理解和使用 Array.includes() 方法。

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