Массивы
Итак, метод Array.prototype.includes определяет содержится ли в массиве искомое значение и возвращает true или false. Таким образом, в отличие от indexOf, который возвращает целое число, includes возвращает значение типа boolean. Это нововведение поможет разработчикам писать более чистый и понятный код.
Например, вот стандартный пример проверки того, содержится ли элемент в массиве, с помощью indexOf:
var numbers = [3, 5, 8, 11, 23, 7];
if (numbers.indexOf(1) !== -1) {
// ...
}
Используя includes, то же самое можно написать так:
var numbers = [3, 5, 8, 11, 23, 7];
if (numbers.includes(1)) {
// ...
}
Также при внедрении этого метода были учтены некоторые неочевидные особенности, замеченные при работе с indexOf. В отношении значений NaN поведение этого метода отличается.
Рассмотрим на примере:
var numbers = [3, 5, 8, 11, 23, 7, NaN];
if (numbers.indexOf(NaN) !== -1) {
// Этот код не выполнится
}
if (numbers.includes(NaN)) {
// Этот код выполнится
}
Таким образом, indexOf(NaN) всегда возвращает -1, независимо от того содержится ли это значение в массиве, а includes(NaN) возвращает true или false в зависимости от того есть этот элемен в массиве или нет.
Производительность
Оценка производительности javascript методов не такая уж очевидная вешь, так как по сути в разных браузерах одна и та же функция может быть реализована по-разному в зависимости от языка, на котором написан сам браузер. К тому же очень много зависит от компьютера, на котором делается эта оценка. Но, тем не менее, я попытался сделать небольшой анализ.
Я создал массив из 10000 целых положительных чисел и использовал для анализа сайт jsbench.github.io. В обоих случаях, для чистоты эксперимента, был использован один и тот же массив. Оценка производилась в браузерах Chrome 53 и Firefox 48.
| Chrome | ||
|---|---|---|
| includes | indexOf | |
| элемент есть в середине массива |
8,361 ops/sec ±0.38% | 31,296 ops/sec ±0.65% |
| элемент есть в начале массива |
22,043,904 ops/sec ±1.89% | 136,512,737 ops/sec ±2.06% |
| искомого эелемента нет в массиве |
4,018 ops/sec ±0.71% | 95,221 ops/sec ±0.53% |
| Firefox | ||
|---|---|---|
| includes | indexOf | |
| элемент есть в середине массива |
84,880 ops/sec ±0.59% | 86,612 ops/sec ±1.35% |
| элемент есть в начале массива |
34,087,623 ops/sec ±0.99% | 33,196,839 ops/sec ±0.84% |
| искомого эелемента нет в массиве |
25,253 ops/sec ±2.75% | 14,994 ops/sec ±1.16% |
Получается, что в Chrome indexOf всегда работает быстрее, а в Firefox ощутимой разницы практически нет (кроме случая, когда в массиве нет искомого элемента). И поведение нового метода в Firefox кажется более логичным, так как в общем-то indexOf и includes по логике должны иметь одну и ту же вычислительную сложность.
Строки
Аналогичный метод был добавлен и для работы со строками начиная с ECMAScript 2015. Ранее в Firefox в версиях с 18 по 39 этот метод существовал под именем contains, однако из-за проблем совместимости он был переименован в includes().
В заключение следует отметить, что данный метод поддерживается пока что не всеми браузерами.
| Браузер | Массив | Строки |
|---|---|---|
| Chrome | 47 | 41 |
| Firefox | 43 | 40 |
| IE | нет | нет |
| Opera | 34 | нет |
| Safari | 9 | 9 |
Комментарии (22)
AndreyRubankov
24.10.2016 08:45> так как в общем-то indexOf и includes по логике должны иметь одну и ту же вычислительную сложность.
Сложность у них разная будет, как ни крути. Вы же сами выше писали, что indexOf не правильно работает с NaN.
Для исправления этого огреха с NaN необходимо проверять каждый элемент массива на isNaN, при этом нужно будет проверить еще и тип элемента, т.к. isNaN('a') == true.
В то время когда Array.indexOf будет сравнивать по ссылке, а в некоторых случаях еще и по значению.
ishashko
24.10.2016 09:38+1Согласен с этим. Но меня удивило, что иногда результаты тестов отличаются на порядок.
Antelle
24.10.2016 09:40+1Не удивляйтесь. В погоне за фичами, сейчас все разработчики движков сначала их делают, иногда даже прямо на js, и только потом оптимизируют.
RubaXa
24.10.2016 11:22+1Надо смотреть код теста, если вы написали что-то типа:
/* Array#indexOf */ array.indexOf(XXX) /* Array#includes */ array.includes(XXX)
То может смело выкинуть результаты.
staticlab
24.10.2016 11:44Строго говоря, нет. Различие только в методе сравнения: indexOf производит Strict Equality Comparison, а includes — SameValueZero. Видимо, всё дело в оптимизации.
AndreyRubankov
24.10.2016 11:55Спасибо за ссылки! Жаль вторая не работает, но первая ответила на вопрос, который меня давно интересовал, про то, как сравниваются строки.
staticlab
24.10.2016 12:00Проверил ссылки — вроде обе корректно работают. И при чём здесь строки?
AndreyRubankov
24.10.2016 12:08Да, обе корректно отработали, видать в первый раз сильно долго грузилась страница, переход на якорь не сработал.
На счет строк — это оффтоп.staticlab
24.10.2016 12:09Простите, вы никогда не заглядывали в спецификацию экмаскрипта?
AndreyRubankov
24.10.2016 12:38Заглядывал, некоторые моменты нужно было прояснить, но не изучал. Пока что не сильно плотно с js работаю.
RubaXa
24.10.2016 11:51+5Не знаю какие тесты были автора, но начав писать микробенчмарки вы ступаете на очень скользкую дорожку, а результаты могут быть в корне неверными.
Например, можно написать вот такой тест:
http://jsbench.github.io/#0c02e5ebe25ee0374e3736f3289e922a
Array#includes — WIN!
ishashko
24.10.2016 11:58В принципе согласен. Я когда делал тесты, то тоже был уверен, что это не прям отличный показатель производительности. Но я запускал тесты несколько раз и смотрел на общую картину. Тоже считаю, что includes() более правильный метод, если речь идет именно о том содержится ли элемент в массиве. Единственное «но» здесь как обычно — это, то что не во всех браузерах работает. Хотя на сайте ECMAScript предлагается решение этой проблемы
surefire
Вариация по теме:
xenohunter
За что минусуют? Вполне читаемый вариант. Главное, чтобы в проекте везде использовался один способ.
justboris
За то, что это использование оператора не по назначению. Ничем не лучше