Array.prototype.includes与Array.prototype.indexOf

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

从提案:

动机

使用ECMAScript数组时,通常需要确定数组是否包含元素.目前的主要模式是

if (arr.indexOf(el) !== -1) {
    ...
}

具有各种其他可能性,例如arr.indexOf(el) >= 0,甚至~arr.indexOf(el).

这些模式表现出两个问题:

• 他们没有"说出你的意思":不是询问数组是否包含一个元素,而是询问数组中第一次出现该元素的索引是什么,然后比较它或者将它旋转,以确定你实际问题的答案.
• 他们失败了NaN,因为indexOf使用了严格的平等比较[NaN].indexOf(NaN) === -1.

提出的解决方案

我们建议添加一种Array.prototype.includes方法,以便可以将上述模式重写为

if (arr.includes(el)) {
    ...
}

它具有与上面几乎相同的语义,除了它使用SameValueZero比较算法而不是Strict Equality Comparison,因此变为[NaN].includes(NaN)true.

因此,该提议解决了现有代码中出现的两个问题.

为了一致性fromIndex,我们另外添加一个类似于Array.prototype.indexOf和的参数String.prototype.includes.

更多的信息:

• SameValueZero 算法
• Strict Equality Comparison 算法

Answer 2

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

数组中的用法

（链接到 ECMAScript 规范）

1. indexOf使用严格相等比较而includes使用SameValueZero算法。由于这个原因，出现了以下两点差异。

2. 正如Felix Kling所指出的，在 的情况下，行为是不同的NaN。

let arr = [NaN];

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

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

let arr = [ , , ];

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

字符串中的用法

（链接到 ECMAScript 规范）

1. 如果您将 RegExp 传递给indexOf，它会将 RegExp 视为字符串并返回字符串的索引（如果找到）。但是，如果您将 RegExp 传递给includes，它将引发异常。

let str = "javascript";

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

表现

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

历史

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

String.prototype.indexOf()并且Array.prototype.indexOf()出现在 ECMAScript 的 ES5 版本中，因此被所有浏览器支持。

Answer 3

如果你想知道性能,目前,indexOf更快,但这个JSperf测试倾向于表明更多的时间通过,更多includes()将更快indexOf(我猜它将进一步优化).

恕我直言,我也更喜欢写,if (arr.includes(el)) {}因为它更清晰,更易于维护if (arr.indexOf(el) !== -1) {}

Answer 4

从概念上讲，当您想使用 indexOf 位置时，您应该使用 indexOf 只是让您提取值或对数组进行操作，即在获得元素位置后使用切片、移位或拆分。另一方面，使用 Array.includes 只知道值是否在数组内而不是位置，因为您不关心它。