ES7 新增的 Array.prototype.includes 你应该了解的问题

ES7 新增的 Array.prototype.includes 方法是用于检测一个元素是否存在于一个数组中的。它可以用来代替旧的 indexOf 方法，而且语法更加简洁，同时也可以使用同样的简洁语法来处理 NaN 和数组内部的对象。

includes 方法的用法

Array.prototype.includes 方法的用法非常简单。它只有一个参数，就是需要查找的元素，它会返回一个布尔值，表示该元素是否存在于该数组中。

基本例子

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3));  // true
console.log(arr.includes(10)); // false

处理 NaN

indexOf 方法对于 NaN 的处理非常不灵活，因为 NaN 不等于任何东西，甚至包括自己。而 includes 方法可以轻松处理 NaN，因为它会强制类型比较，所以只要数组里面有一个 NaN，它就会返回 true。

let arr = [1, NaN, 3, 4, 5];
console.log(arr.indexOf(NaN));      // -1
console.log(arr.includes(NaN));    // true

处理对象

indexOf 方法对于对象的查找会出现问题，因为它只是比较引用，所以除非对象引用相同才会返回 true。而 includes 方法可以寻找数组内部的对象。

let arr = [{name: 'Alice'}, {name: 'Bob'}];
console.log(arr.indexOf({name: 'Alice'}));  // -1
console.log(arr.includes({name: 'Alice'})); // false

需要注意的问题

兼容性问题

虽然 includes 方法是 ES7 新增的方法，但是它在大多数现代浏览器中都已经被支持，但是 IE 11 和 Safari 9 以下的版本不支持，如果要兼容这些浏览器，可以使用一些 polyfill 库来实现。

不支持第二个参数

和 indexOf 不同，includes 方法不支持第二个参数表示开始查找的位置。如果需要从某个位置开始查找，可以使用 slice 方法来实现。

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(1, 2)); // false
console.log(arr.slice(2).includes(1)); // false

处理字符串

如果要在字符串中查找某个字符，可以直接使用字符串的 indexOf 方法。但是如果要判断一个字符串是否包含在另一个字符串中，可以使用 ES6 的新方法 includes。

let str = 'hello world';
console.log(str.indexOf('o'));            // 4
console.log(str.includes('world'));       // true

总结

Array.prototype.includes 是非常好用的数组方法，它不仅可以代替旧的 indexOf 方法，而且还能够处理 NaN 和对象等问题。但是，需要注意的是它的兼容性和不支持第二个参数的问题。

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