解决ES7/8中的Array.include()方法遇到的坑

在ES7/8中，Array.include()方法旨在简化一些常见的任务。 它可以很方便地检查数组是否包含特定的值，以便于数据处理。但是在使用这种方法时，我们需要注意一些细节，否则可能会遇到一些不必要的错误。

坑

1. 参数不正确

在使用Array.include()方法时，我们需要传递一个参数 - 需要查找的值。 但是，如果我们未传递任何参数，则会抛出一个TypeError。 如果我们传递的参数不是单个值，则会对每个值执行检查，并返回true或false。 这很容易混淆结果。

const arr = [1,2,3];

// 未传递任何参数
console.log(arr.includes()); // TypeError

// 参数不正确
console.log(arr.includes(1, 2)); // false
console.log(arr.includes([1, 2])); // false

2. NaN无法正确识别

Array.include()方法无法正确识别NaN。当我们尝试在数组中查找NaN时，它将返回false，即使NaN实际上已经存在于数组中。

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

console.log(arr.includes(NaN)); // false

3. 对象不能被正确比较

Array.include()方法无法处理对象。如果我们尝试将对象作为参数传递给Array.include()，它将无法正确比较两个对象，并返回false。

const john = { name: 'John' };
const arr = [john];

console.log(arr.includes({ name: 'John' })); // false

解决方法

为了充分利用Array.include()方法，我们需要注意上述错误，采取一些必要的措施。

1. 确保参数正确

在使用Array.include()方法之前，请确保传递正确的参数。 如果我们只是想检查数组是否包含一个值，请确保只传递一个值。

2. 为NaN设置特殊情况

由于Array.include()方法无法正确识别NaN，我们需要采取特殊的措施。

const arr = [1, 2, 3, NaN];
const hasNaN = arr.some(v => Number.isNaN(v));
console.log(hasNaN); // true

3. 对象需要特殊处理

在ES6中引入了Symbol类型，它与对象相比较，具有唯一性，可以作为Map和Set的键使用。通过使用Symbol，我们可以确保对值的正确比较。

const john = { name: 'John' };
const arr = [john];
const symbolJohn = Symbol('John');
const obj = {};
obj[symbolJohn] = john;

console.log(arr.includes(john)); // true
console.log(Object.getOwnPropertySymbols(obj).includes(symbolJohn)); // true

结论

当我们在ES7/8中使用Array.include()方法时，需要特别注意一些坑。避免这些问题的方法是确保参数正确、为NaN设置特殊情况，并对对象进行特殊处理。通过这些简单的措施，我们可以轻松地使用这个方便的方法，使我们的代码更加健壮和可靠。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ed792bbc9e1890c5e1b71d