Question

除了提高可读性之外，includes优于indexOf还有什么优势？它们看起来和我一模一样。

这个

有什么区别

var x = [1,2,3].indexOf(1) > -1; //true

这个？

var y = [1,2,3].includes(1); //true

Answer 1

tl; dr： NaN的处理方式不同：

[NaN].indexOf(NaN) > -1是false
[NaN].includes(NaN)是true

来自proposal：

动机

使用ECMAScript数组时，通常需要确定数组是否包含元素。目前的主要模式是
if (arr.indexOf(el) !== -1) {
    ...
}
具有各种其他可能性，例如arr.indexOf(el) >= 0，甚至是~arr.indexOf(el)。

这些模式存在两个问题：


他们没有＆＃34;说出你的意思＆＃34;：而不是询问数组是否包含一个元素，你要问的是数组中第一次出现该元素的索引是什么，然后比较它或者说一下，确定你实际问题的答案。

NaN失败，因为indexOf使用了严格的平等比较，因而[NaN].indexOf(NaN) === -1。


提议的解决方案

我们建议添加Array.prototype.includes方法，以便上述模式可以重写为
if (arr.includes(el)) {
    ...
}
这与上面的语义几乎相同，只是它使用SameValueZero比较算法而不是Strict Equality Comparison，从而使[NaN].includes(NaN)成为真。

因此，该提案解决了现有代码中出现的两个问题。

为了保持一致，我们还添加了fromIndex参数，类似于Array.prototype.indexOf和String.prototype.includes。

更多信息：

Answer 2

如果您对表现感到疑惑，目前indexOf更快，但此JSperf测试往往会显示时间越长，includes()会比indexOf更快（我猜它会进一步优化。）

恕我直言，我也更愿意写if (arr.includes(el)) {}，因为它比if (arr.indexOf(el) !== -1) {}

更清晰，更易于维护

Answer 3

.indexOf()和.includes()方法可用于搜索数组中的元素或搜索给定字符串中的字符/子字符串。

在数组中使用

（ECMAScript规范的{Link）

indexOf使用Strict Equality Comparison，而includes使用SameValueZero算法。因此，产生了以下两点差异。
Felix Kling指出，在NaN的情况下，行为是不同的。

let arr = [NaN];

arr.indexOf(NaN); // returns -1; meaning NaN is not present
arr.includes(NaN); // returns true

在undefined的情况下，行为也不同。

let arr = [ , , ];

arr.indexOf(undefined); // returns -1; meaning undefined is not present
arr.includes(undefined); // returns true

在字符串中的用法

（ECMAScript规范的{Link）

如果将RegExp传递给indexOf，它将始终返回-1，但是如果将RegExp传递给includes，则它将引发异常。

let str = "javascript";

str.indexOf(/\w/); // returns -1 even though the elements match the regex
str.includes(/\w/); // throws TypeError: First argument to String.prototype.includes must not be a regular expression

性能

正如538ROMEO所指出的那样，includes可能比indexOf慢一点（非常小）（因为它需要检查正则表达式作为第一个参数），但实际上，这没什么大不同，可以忽略不计。

历史

String.prototype.includes()在ECMAScript 2015中引入，而Array.prototype.includes()在ECMAScript 2016中引入。关于浏览器支持，请明智地使用它们。

String.prototype.indexOf()和Array.prototype.indexOf()存在于ECMAScript的ES5版本中，因此受所有浏览器的支持。

Answer 4

indexOf()和includes()都可用于查找数组中的元素，但是每个函数产生不同的返回值。

indexOf返回一个数字（如果数组中不存在元素，则返回-1；如果存在元素，则返回数组位置）。

includes()返回一个布尔值（true或false）。

Answer 5

Internet Explorer不支持包含，如果这样可以帮助您做出决定。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Browser_compatibility

Answer 6

indexOf 是检查数组中是否包含某些内容的较旧方法，新方法更好，因为您不必为 (-1) 编写条件，这就是使用 include() 方法的原因返回一个布尔值。

array.indexOf('something')      // return index or -1
array.includes('something')     // return true of false

因此对于查找索引，第一个方法更好，但对于检查是否存在，第二个方法更有用。

Answer 7

答案和例子都很棒。然而（乍一看），它让我误解了 includes 在使用 true 时总是会返回 undefined。

因此我包含了详细说明的示例 includes 可用于检查未定义和 NaN 值 wherelse indexOf 不能

//Array without undefined values and without NaN values. 
//includes will return false because there are no NaN and undefined values

const myarray = [1,2,3,4]

console.log(myarray.includes(undefined)) //returns false
console.log(myarray.includes(NaN)) //returns false


//Array with undefined values and Nan values.
//includes will find them and return true

const myarray2 = [1,NaN, ,4]

console.log(myarray2.includes(undefined)) //returns true
console.log(myarray2.includes(NaN)) //returns true


console.log(myarray2.indexOf(undefined) > -1) //returns false
console.log(myarray2.indexOf(NaN) > -1) //returns false

总结

includes 可以用于检查数组中的 undefined 和 NaN 值
indexOf 不能用于检查数组中的 undefined 和 NaN 值

Answer 8

从概念上讲，当你想使用位置indexOf时，你应该使用indexOf，只是让你提取值或对数组进行操作，即在得到元素的位置后使用slice，shift或split。另一方面，使用Array.includes只知道值是否在数组内而不是位置，因为你不关心它。

Array.prototype.includes与Array.prototype.indexOf

8 个答案:

动机

提议的解决方案

在数组中使用

在字符串中的用法

性能

历史