Array.prototype.includes против Array.prototype.indexOf

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

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

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

И это?

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

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 вместо строгого сравнения равенства, что делает его [NaN].includes(NaN)истинным.

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

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

Дальнейшая информация:

• SameValueZero алгоритм
• Strict Equality Comparison алгоритм

Если вас интересует производительность, на данный момент indexOf работает быстрее, но этот тест JSperf, как правило, показывает, что чем больше времени проходит, тем includes()быстрее будет больше indexOf(я думаю, он будет оптимизирован дальше).

ИМХО, я тоже предпочитаю писать, if (arr.includes(el)) {}так как он понятнее и удобнее, чемif (arr.indexOf(el) !== -1) {}

.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

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

Производительность

Как указал 538ROMEO , это includesможет быть немного (очень крошечное) немного медленнее (поскольку ему нужно проверять регулярное выражение в качестве первого аргумента), чем, 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()и includes()оба могут использоваться для поиска элементов в массиве, однако каждая функция дает разные возвращаемые значения.

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

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