包括与 Array.Prototype.indexOf 的对比

除了提高可读性之外，includes比 indexOf有什么优势吗? 它们看起来和我一样。

有什么区别

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

这个呢？

var y = [1,2,3].includes(1); //true
94057 次浏览
小开
最佳答案

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 比较算法而不是严格相等比较，因此使 [NaN].includes(NaN)为 true 之外，其语义几乎与上面的相同。

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

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

进一步资料:

小开

严格来说

使用 indexOf时，NaN将 找不到

[NaN].indexOf(NaN) // => -1 (not found)
[NaN].includes(NaN) // => true

includes也没有用。

可读性

arr.indexOf('blah') !== -1是 可读性和可维护性更差。另一方面，arr.includes('blah')执行它所说的操作，并且很明显它返回一个 boolean。

表演

根据 这篇文章对主题 没有明显的区别虽然 includes可能会慢一点点。

历史

indexOf比 includes早很多。

小开

从概念上讲，当你想使用位置 indexOf 时，你应该使用 indexOf，只要给你提取值或者操作数组，即在你得到元素的位置之后使用切片、移位或者拆分。另一方面，Use Array.include 只是为了知道值是否在数组中，而不是位置，因为您不关心它。

小开

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

数组中的用法

(林克到 ECMAScript 规范)

  1. indexOf使用 严格的平等比较，而 includes使用 SameValueZero算法。

  2. 正如 菲利克斯・克林所指出的，在 NaN的情况下，行为是不同的。

let arr = [NaN];


arr.indexOf(NaN); // returns -1; meaning NaN is not present
arr.includes(NaN); // returns true
  1. 在 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 2015中引入的，而 Array.prototype.includes()是在 ECMAScript 2016中引入的。关于浏览器支持，请明智地使用它们。

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

小开

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

indexOf返回一个数字(如果元素不在数组中，返回 -1; 如果元素在数组中，返回数组位置)。

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

小开

Internet Explorer 不支持包括，如果这有助于你决定。

Https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/includes#browser_compatibility

小开

IndexOf 是检查数组中是否有内容的老方法，新方法更好，因为不需要写条件为(- 1) ，这就是为什么使用 include ()方法返回布尔值。

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

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

小开

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

因此，我将包括这个例子来详细说明 Include 可用于检查未定义值和 NaN 值，否则 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 可以用于检查数组中的未定义值和 NaN 值
  • indexOf 不能用于检查数组中的未定义值和 NaN 值
小开

使用自动类型转换，例如字符串和数字之间。

小开 

let allGroceries = ['tomato', 'baked bean',];
 

//returns true or false
console.log(allGroceries.includes("tomato")); //uses boolean value to check


let fruits2 = ["apple", "banana", "orange"];
console.log(fruits2.includes("banana"));
// returns true because banana is in the array






//.indexOf returns the index of the value


console.log(allGroceries.indexOf("tomato"));//returns the index of the value
//returns -1 because tomato is not in the array
//fromIndex
console.log(allGroceries.indexOf("tomato", 2));
小开

Include ()方法与 indexOf ()方法略有不同 IndexOf ()使用 与 ===运算符相同的算法，以及相等算法 认为非 a 值与其他值是不同的 Value (包括它自己)使用稍微不同的版本 的等式，它确实认为 NaN 等于它自己。这意味着 IndexOf ()不会检测数组中的 NaN 值，但是 包括()将:

let a = [1,true,3,NaN];
a.includes(NaN) // => true
a.indexOf(NaN) // => -1; indexOf can't find NaN

来自 JavaScript: 通用指南作者: David Flanagan


提交答案