Помимо улучшенной читаемости, есть ли какое-то преимущество у includes над indexOf? Мне они кажутся идентичными.

В чем разница между этим

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

А это?

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

Matt

Ответов: 8

Ответы (8)

tl; dr: NaN обрабатывается иначе:

  • [NaN] .indexOf (NaN)> -1 равно false
  • [NaN] .includes (NaN) is 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) истинным.

Таким образом, это предложение решает обе проблемы, обнаруженные в существующем коде.

Мы дополнительно добавляем параметр fromIndex, аналогичный Array.prototype.indexOf и String.prototype.includes, для согласованности.


Дополнительная информация:

Internet Explorer не поддерживает включение, если это поможет вам решить.

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

indexOf() and includes() can both be used to find elements in an array, however each function yields different return values.

indexOf возвращает число (-1, если элемент отсутствует в массиве, или позицию массива, если элемент присутствует).

includes () возвращает логическое значение (true или false).

Все ответы и примеры были великолепны. Однако (на первый взгляд) это заставило меня неправильно понять, что включает всегда будет возвращать true при использовании undefined.

Следовательно, я включаю пример для уточнения включает в себя, можно использовать для проверки значений undefined и NaN, где indexOf не может

// Массив без неопределенных значений и без значений NaN.
// includes вернет false, потому что нет значений NaN и undefined

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

console.log (myarray.includes (undefined)) // возвращает false
console.log (myarray.includes (NaN)) // возвращает false


// Массив с неопределенными значениями и Nan значениями.
// включает найдет их и вернет истину

const myarray2 = [1, NaN,, 4]

console.log (myarray2.includes (undefined)) // возвращает истину
console.log (myarray2.includes (NaN)) // возвращает истину


console.log (myarray2.indexOf (undefined)> -1) // возвращает false
console.log (myarray2.indexOf (NaN)> -1) // возвращает false

Сводка

  • включает может использоваться для проверки неопределенных значений и значений NaN в массиве
  • indexOf нельзя использовать для проверки значений undefined и NaN в массиве

.indexOf () и .includes () методы могут использоваться для поиска элемента в массиве или для поиска символа / подстроки в заданной строке.

Использование в массиве

(Ссылка на спецификацию ECMAScript)

  1. indexOf использует Strict Equality Comparison, тогда как 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 в , включая, он выдаст исключение.

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, включает может быть немного (очень крошечным) немного медленнее (для него необходимо проверить регулярное выражение в качестве первого аргумента), чем indexOf но на самом деле это не имеет большого значения и незначительно.

История

String.prototype.includes () был представлен в ECMAScript 2015, тогда как Array.prototype.includes () был представлен в ECMAScript 2016. Что касается поддержки браузером, используйте их с умом .

String.prototype.indexOf () и Array.prototype.indexOf () присутствуют в версии ECMAScript для ES5 и, следовательно, поддерживаются всеми браузерами.

По идее, вы должны использовать indexOf, когда хотите использовать позицию indexOf, которая просто дает вам извлекать значение или работать с массивом, то есть с помощью среза, сдвига или разделения после того, как вы получили позицию элемента. С другой стороны, Use Array.includes только для того, чтобы знать, находится ли значение внутри массива, а не позиция, потому что вам это не важно.

indexOf - это более старый способ проверить, есть ли что-то в массиве, новый метод лучше, потому что вам не нужно писать условие для того, чтобы быть (-1), поэтому для использования метода include (), который возвращает логическое значение.

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

поэтому для поиска индекса лучше первый, но для проверки того, является он или нет, более полезен второй метод.

Технически, единственная разница как NaN и undefined обрабатываются. Их невозможно будет найти при использовании indexOf

arr.indexOf ('blah')! == -1 is менее читаемый и поддерживаемый. С другой стороны, arr.includes ('blah') делает то, что он говорит, и очевидно, что он возвращает логическое.

включает также бесполезен , если вы хотите знать, где находится строка в массиве.

Относительно характеристик: согласно этой статье по теме заметной разницы нет хотя включает может быть совсем немного медленнее.

indexOf был создан до того, как включает.

2022 WebDevInsider