JavaScript数组includes方法详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript数组includes用法详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

JavaScript的includes()方法用于检查数组是否包含某个特定元素，返回布尔值。它接受两个参数：要查找的元素和可选起始位置，从该位置开始搜索元素。若省略起始位置，则默认从索引0开始；若起始位置为负数，则从array.length + start的位置开始搜索。includes()使用严格相等(===)比较元素，并能正确处理NaN值。与indexOf()相比，includes()更易读且能检测NaN，但不返回元素位置。对于旧浏览器，可用indexOf()或手动实现polyfill模拟includes()功能。处理对象数组时，includes()按引用而非值比较，如需按属性判断，可使用some()方法、转换为字符串或借助第三方库。1. includes()返回true/false；2. 支持起始索引及负值；3. 正确识别NaN；4. 与indexOf()区别在于返回值和NaN处理；5. 对象数组需用some()或转换处理。

JavaScript的includes()方法用于检查数组是否包含某个特定元素。如果包含，则返回true；否则，返回false。它提供了一种简单而直观的方式来判断数组中是否存在某个值，而无需手动遍历数组。

解决方案

includes()方法是ES6引入的，使用起来非常简单。它接受两个参数：要查找的元素和可选的起始搜索位置。基本语法如下：

array.includes(element, start)

• element: 要查找的元素。
• start: (可选) 从此索引位置开始搜索。如果省略，则从索引0开始搜索。如果start大于或等于数组的长度，则返回false，不会搜索数组。如果start为负值，则从array.length + start的索引开始搜索。

示例 1：检查数组是否包含某个字符串

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.includes('banana'));   // 输出: true
console.log(fruits.includes('grape'));    // 输出: false

示例 2：使用起始位置参数

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3, 2));    // 输出: true (从索引2开始搜索)
console.log(numbers.includes(1, 3));    // 输出: false (从索引3开始搜索)

示例 3：处理负数起始位置

const data = [10, 20, 30, 40, 50];

console.log(data.includes(20, -4));   // 输出: true (从索引1开始搜索，相当于data.length - 4 = 1)
console.log(data.includes(10, -1));   // 输出: false (从索引4开始搜索，相当于data.length - 1 = 4)

示例 4：检查NaN

includes()方法可以正确处理NaN值。

const values = [1, 2, NaN, 4, 5];

console.log(values.includes(NaN));    // 输出: true

注意事项

• includes()方法使用严格相等 (===) 来比较元素。这意味着类型必须匹配。
• 对于稀疏数组，includes()的行为与其他数组方法类似，会跳过空槽。

includes() 和 indexOf() 的区别是什么？什么时候应该使用哪个？

includes() 和 indexOf() 都可以用来检查数组中是否包含某个元素，但它们之间存在一些关键区别。

• 返回值： includes() 返回一个布尔值 (true 或 false)，表示数组是否包含该元素。indexOf() 返回元素在数组中的第一个索引，如果未找到则返回 -1。
• NaN 处理： includes() 可以正确检测 NaN，而 indexOf() 不能。因为 NaN === NaN 的结果是 false。
• 可读性： includes() 的意图更明确，代码更易读。

示例：

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

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

if (arr.includes(2)) {
  console.log("数组包含元素 2");
}

if (arr.indexOf(2) !== -1) {
  console.log("数组包含元素 2");
}

选择哪个？

• 如果只需要知道数组是否包含某个元素，而不需要知道它的位置，那么应该使用 includes()。
• 如果需要知道元素在数组中的位置，或者需要兼容不支持 includes() 的旧版本浏览器，那么可以使用 indexOf()。

如何在不支持 includes() 的旧浏览器中使用类似的功能？

如果需要在不支持 includes() 的旧版本浏览器中使用类似的功能，可以使用 Array.prototype.indexOf() 方法，或者手动实现一个 polyfill。

1. 使用 indexOf() 方法：

这是最简单的方法，因为 indexOf() 方法在较早版本的 JavaScript 中就已经存在。

function includesPolyfill(arr, element) {
  return arr.indexOf(element) !== -1;
}

const myArray = [1, 2, 3, 4, 5];

console.log(includesPolyfill(myArray, 3));  // 输出: true
console.log(includesPolyfill(myArray, 6));  // 输出: false

2. 手动实现 Polyfill：

如果需要完全模拟 includes() 的行为（包括对 NaN 的正确处理），可以手动实现一个 polyfill。

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.includes called on null or undefined');
    }

    const O = Object(this);
    const len = parseInt(O.length, 10) || 0;
    if (len === 0) {
      return false;
    }
    const n = parseInt(arguments[1], 10) || 0;
    let k = n >= 0 ? n : Math.max(len + n, 0);
    while (k < len) {
      const elementK = O[k];
      if (searchElement === elementK || (searchElement !== searchElement && elementK !== elementK)) {
        return true;
      }
      k++;
    }
    return false;
  };
}

const myArray = [1, 2, NaN, 4, 5];

console.log(myArray.includes(NaN));  // 输出: true

这个 polyfill 首先检查 Array.prototype.includes 是否存在。如果不存在，则定义一个 includes 方法，该方法模拟了 ES6 includes() 的行为，包括对 NaN 的处理。

includes() 方法在处理对象数组时需要注意什么？

当使用 includes() 方法处理对象数组时，需要特别注意对象是按引用比较的，而不是按值比较的。这意味着，即使两个对象具有相同的属性和值，如果它们是不同的对象实例，includes() 仍然会返回 false。

示例：

const objects = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const alice = { id: 1, name: 'Alice' };

console.log(objects.includes(alice));  // 输出: false (因为 alice 是一个新的对象实例)

const existingAlice = objects[0];
console.log(objects.includes(existingAlice)); // 输出: true (因为 existingAlice 是数组中已存在的对象)

解决方案：

如果需要检查对象数组中是否包含具有特定属性和值的对象，可以使用以下方法：

1. 使用 some() 方法：

   some() 方法允许你使用自定义的比较逻辑来检查数组中的元素。

   const objects = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
   const alice = { id: 1, name: 'Alice' };
   
   const containsAlice = objects.some(obj => obj.id === alice.id && obj.name === alice.name);
   console.log(containsAlice);  // 输出: true

2. 将对象转换为字符串进行比较：

   可以将对象转换为 JSON 字符串，然后使用 includes() 方法进行比较。但这种方法可能会受到属性顺序的影响。

   const objects = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
   const alice = { id: 1, name: 'Alice' };
   
   const objectsAsStrings = objects.map(obj => JSON.stringify(obj));
   console.log(objectsAsStrings.includes(JSON.stringify(alice))); // 输出: true (如果属性顺序一致)

3. 使用第三方库：

   一些第三方库（如 Lodash）提供了更强大的对象比较功能。

   const objects = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
   const alice = { id: 1, name: 'Alice' };
   
   const _ = require('lodash'); // 引入 Lodash
   
   const containsAlice = _.some(objects, alice);
   console.log(containsAlice); // 输出: true

选择哪种方法取决于具体的需求和项目的复杂性。some() 方法通常是最灵活和可靠的选择。

到这里，我们也就讲完了《JavaScript数组includes方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！