在前端开发中，我们经常需要处理数组数据。其中，判断一个元素是否在数组中存在是一个很常见的需求。在 ES7 中，新引入了 Array.prototype.includes 方法，使得这个需求变得更加方便和简单。本文将介绍使用 Array.prototype.includes 方法时需要注意的细节问题，并提供相应的示例代码。
1. 注意参数类型的区别
Array.prototype.includes 方法的一个参数是需要被查找的元素，另一个参数是可选的起始位置。需要注意的是，这两个参数的类型是有区别的。也就是说，它们对于相同的值可以有不同的处理方式。
- 对于第一个参数，它的值可以是任意类型，包括
Number、String、Boolean、Object等。但需要注意的是，在检查是否包含该值时，使用的算法是“严格相等”的，即对于两个对象，只有它们在内存中都指向同一个对象时才会返回true。下面的示例代码演示了这一点：
const arr = [{name: 'Alice'}, {name: 'Bob'}]
const obj = {name: 'Alice'}
console.log(arr.includes(obj)) // false，因为 obj 不等于 {name: 'Alice'}
console.log(arr.includes(arr[0])) // true，因为 arr[0] 等于 {name: 'Alice'}- 对于第二个参数，它的值应该是一个数字类型。默认的起始位置是 0，如果指定了该参数，则从该位置开始查找元素。需要注意的是，如果指定的位置小于等于负数组长度，则会从数组末尾开始计算。下面的示例代码演示了这一点：
const arr = [1, 2, 3, 4, 5] console.log(arr.includes(3, 1)) // true，从下标1开始查找元素3，返回true console.log(arr.includes(3, -3)) // false，从下标2开始查找元素3（即从数组倒数第3个元素往后开始查找），但是该元素不存在，返回false console.log(arr.includes(3, -2)) // true，从下标3开始查找元素3（即从数组倒数第2个元素往后开始查找），返回true
2. 注意处理 NaN 值的特殊情况
在 JavaScript 中，NaN 的一个特点是自身不等于任何值，包括自身。这意味着使用严格相等运算符 === 来判断一个值是否为 NaN 时会返回 false，因为 NaN === NaN 的结果是 false。
在使用 Array.prototype.includes 方法时，如果查找的元素是 NaN，需要注意它与自身不相等的特殊情况。这时可以使用 Number.isNaN 方法来判断该值是否为 NaN。下面的示例代码演示了这一点：
const arr = [1, 2, NaN] console.log(arr.includes(NaN)) // true，虽然 NaN 与自身不相等，但会被认为是数组的一个元素 console.log(arr.includes(Number.NaN)) // true，同样被认为是数组的一个元素 console.log(arr.indexOf(NaN) !== -1) // true，使用 indexOf 方法检查 NaN 值时也需要注意该特殊情况 console.log(arr.findIndex(Number.isNaN)) // 2，可以使用 findIndex 方法来查找 NaN 值
3. 注意处理对数组中每个元素的回调函数的调用方式
Array.prototype.includes 方法可以接受一个回调函数作为第二个参数，用来自定义对每个元素的匹配方式。这个回调函数接受三个参数：value（当前元素的值）、index（当前元素的索引）和 array（当前数组对象）。需要注意的是，回调函数中对元素的操作应该是没有副作用的，即不会修改数组中任何元素的值。
下面的示例代码演示了如何使用回调函数来实现基于对象属性进行匹配的功能：
const arr = [{name: 'Alice'}, {name: 'Bob'}]
console.log(arr.includes({name: 'Alice'})) // false，因为对象不同
console.log(arr.includes({name: 'Bob'}, 1)) // true，从下标1开始查找元素{name: 'Bob'}
console.log(arr.includes({name: 'Bob'}, 1, o => o.name)) // true，使用回调函数匹配元素结语
使用 Array.prototype.includes 方法可以简化对数组中元素的查找操作，但需要注意上述细节问题。希望本文对大家在实际开发中使用该方法时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67825334935627c900023b0e
