使用 ES7 的 Array.prototype.includes 方法检查数组中是否存在某个值-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，经常需要检查一个数组中是否包含某个特定值。在过去，我们可能会使用 Array.prototype.indexOf 方法来完成这个任务。然而，这个方法并不是太方便使用，因为它返回的是一个值的下标，而不是一个布尔值。

幸运的是，ES7 引入了一个新的方法，即 Array.prototype.includes 方法。这个方法非常方便，在这篇文章中，我们将深入探讨这个方法的应用和使用技巧。

includes 方法的基本用法

Array.prototype.includes 方法接受一个参数，即待查找的值。如果这个值存在数组中，则方法会返回 true，否则返回 false。以下是一个简单的示例：

const arr = ['apple', 'orange', 'banana'];
console.log(arr.includes('apple')); // true
console.log(arr.includes('peach')); // false

includes 方法的能力

使用 includes 方法判断 NaN

在 JavaScript 中，NaN 是一个特殊的值，它代表"不是数字"。因为 NaN 不等于任何值，我们不能使用传统的比较运算符（如 === 或 ==）来判断一个值是否为 NaN。

幸运的是，Array.prototype.includes 方法可以正确地处理 NaN 值。以下是一个示例：

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

使用 includes 方法判断字符串

在查找字符串时，Array.prototype.includes 方法非常实用。这个方法默认是区分大小写的，但可以使用字符串的 toLowerCase() 或 toUpperCase() 方法将字符串转换为小写或大写形式。

const arr = ['apple', 'orange', 'banana'];
console.log(arr.includes('ORANGE')); // false
console.log(arr.includes('orange'.toUpperCase())); // true

使用 includes 方法进行部分匹配

在一些情况下，我们需要检查数组中是否包含特定的子字符串。在这种情况下，Array.prototype.includes 方法不能解决问题。我们需要使用其他方法，例如 Array.prototype.some 或 Array.prototype.find。以下是使用 Array.prototype.some 的示例：

const arr = ['apple', 'orange', 'banana'];
const match = arr.some(item => item.includes('an'));
console.log(match); // true

使用 includes 方法进行转型

在某些情况下，我们需要将数组中的值转换为其他类型，然后再进行比较。在这种情况下，我们可以传递一个回调函数给 Array.prototype.includes 方法，在回调函数中进行转换。以下是一个示例：

const arr = ['1', '2', '3'];
console.log(arr.includes(2)); // false
console.log(arr.includes(2, 1)); // true
console.log(arr.includes('2', 1)); // true
console.log(arr.includes(+'2', 1)); // true
console.log(arr.includes(eval('2'), 1)); // true

在这个示例中，我们将字符串转换为数字，然后再进行检查。注意，在第四行中，我们使用了加号操作符来将字符串转换为数字。

总结

Array.prototype.includes 方法是一个强大而实用的工具，可以帮助我们快速查找数组中的值。使用这个方法可以让代码变得更加简洁、易读和可维护。当然，在某些情况下，我们需要使用其他方法来完成复杂的任务。在实际开发中，我们应该灵活运用各种方法，以便快速解决问题。

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