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引入的，使用起来非常简单。它接受两个参数：要查找的元素和可选的起始搜索位置。基本语法如下：
立即学习“Java免费学习笔记（深入）”；
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 是数组中已存在的对象)
解决方案：
如果需要检查对象数组中是否包含具有特定属性和值的对象，可以使用以下方法：
-
使用 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 -
将对象转换为字符串进行比较：
可以将对象转换为 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 (如果属性顺序一致) -
使用第三方库：
一些第三方库（如 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() 方法通常是最灵活和可靠的选择。
