JavaScript includes 方法，全面解析与实用指南

terry 1周前 (05-02) 阅读数 40 #Vue

文章标签 includes

什么是 JavaScript 的 includes 方法？

JavaScript 的 includes 方法是一个用于判断数组或字符串中是否包含特定元素或子字符串的内置方法，它返回一个布尔值，如果包含则返回 true，否则返回 false。

includes 方法在数组中的应用

基本用法

在数组中使用 includes 方法非常简单。

```javascript const fruits = ['apple', 'banana', 'cherry']; console.log(fruits.includes('banana')); // 输出: true console.log(fruits.includes('orange')); // 输出: false ```

这里,我们创建了一个包含三种水果的数组 fruits，然后使用 includes 方法分别检查数组中是否包含 'banana' 和 'orange'。

从指定位置开始搜索

includes 方法还可以接受第二个参数，指定从数组的哪个位置开始搜索。

```javascript const numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3, 2)); // 输出: true（从索引 2 开始搜索，找到 3） console.log(numbers.includes(3, 3)); // 输出: false（从索引 3 开始搜索，找不到 3） ```

在这个例子中,我们演示了如何从指定位置开始搜索数组中的元素。

与 NaN 的比较

在数组中,includes 方法可以正确识别 NaN。

```javascript const arrayWithNaN = [1, NaN, 3]; console.log(arrayWithNaN.includes(NaN)); // 输出: true ```

这与使用严格相等运算符（）不同，因为 NaN === NaN 的结果是 false。

includes 方法在字符串中的应用

基本用法

在字符串中使用 includes 方法也很直观。

```javascript const str = 'Hello, world!'; console.log(str.includes('world')); // 输出: true console.log(str.includes('JavaScript')); // 输出: false ```

这里,我们创建了一个字符串 str，然后使用 includes 方法检查字符串中是否包含特定的子字符串。

区分大小写

需要注意的是,includes 方法在字符串中是区分大小写的。

```javascript const text = 'JavaScript is awesome'; console.log(text.includes('javascript')); // 输出: false console.log(text.includes('JavaScript')); // 输出: true ```

如果我们希望进行不区分大小写的搜索,可以先将字符串转换为统一的大小写形式，然后再进行搜索。

```javascript const text = 'JavaScript is awesome'; const searchTerm = 'javascript'; console.log(text.toLowerCase().includes(searchTerm.toLowerCase())); // 输出: true ```

从指定位置开始搜索

与数组类似,字符串的 includes 方法也可以接受第二个参数，指定从字符串的哪个位置开始搜索。

```javascript const longStr = 'This is a long string'; console.log(longStr.includes('is', 3)); // 输出: true（从索引 3 开始搜索，找到 'is'） console.log(longStr.includes('is', 5)); // 输出: false（从索引 5 开始搜索，找不到 'is'） ```

includes 方法与其他方法的比较

与 indexOf 方法的比较

indexOf 方法也可以用于判断数组或字符串中是否包含特定元素或子字符串，它返回元素或子字符串在数组或字符串中的索引，如果不存在则返回 -1。

```javascript const fruits = ['apple', 'banana', 'cherry']; console.log(fruits.indexOf('banana')!== -1); // 输出: true（等价于 fruits.includes('banana')） console.log(fruits.indexOf('orange')!== -1); // 输出: false ```

虽然 indexOf 方法可以实现与 includes 方法类似的功能，但 includes 方法更加简洁和直观，尤其是在判断是否包含元素时。includes 方法在处理 NaN 时更加准确。

与 includes 方法和 includes 方法的比较

在 JavaScript 中，还有其他一些方法可以用于判断数组或字符串中是否包含特定元素或子字符串，some 方法和 includes 方法。

some 方法用于检测数组中是否至少有一个元素满足指定的条件，它接受一个回调函数作为参数，回调函数返回一个布尔值。

```javascript const numbers = [1, 2, 3, 4, 5]; console.log(numbers.some(num => num === 3)); // 输出: true console.log(numbers.some(num => num === 6)); // 输出: false ```

includes 方法则更加简洁和直接，适用于简单的包含判断。