Эффективные способы поиска элемента в массиве Javascript

Быстрый ответ

Для быстрой проверки присутствия элемента в массиве используйте метод Array.includes(), который возвращает булево значение: true, если элемент найден, и false — если не найден.

const array = [1, 2, 3];
const isPresent = array.includes(2); // true

Метод Array.includes() упрощает проверку и оптимизирует ваш код.

Глубже внутрь

Основы Array.includes()

Метод Array.includes(), появившийся в ECMAScript 2016, незаменим для поиска элементов в массиве. Его простота и прозрачность делают его настолько удобным.

Подробнее об этом расскажет наш спикер на видео

Указание начального индекса

Array.includes() позволяет задавать второй параметр — начальный индекс поиска, что позволяет уменьшить количество проверок.

const fruits = ['apple', 'banana', 'mango'];
const startsAtTwo = fruits.includes('apple', 2); // false – яблоко не входит в число фруктов, начиная с третьего!

Уникальность объектов

В JavaScript каждый объект уникален, даже если внешне они похожи. Так, Array.includes() считает объекты, подобные друг другу, разными.

const objects = [{ id: 1 }, { id: 2 }];
const isPresent = objects.includes({ id: 1 }); // false – для JavaScript они так же разные, как яблоки и груши.

Совместимость с браузерами

Array.includes() поддерживается большинством браузеров, но для старых версий потребуется полифилл, особенно при работе с Internet Explorer.

indexOf как альтернатива

До появления Array.includes() использовался Array.indexOf(), который до сегодняшнего дня может быть хорошей альтернативой.

const array = [1, 2, 3];
const isPresent = array.indexOf(2) !== -1; // true

Преобразование результата indexOf в булево значение

Чтобы получить результат в виде true или false, применяйте унарную операцию отрицания (!!) или прибавьте единицу к результату indexOf.

const isPresent = !!array.indexOf(2); // false
const isPresent = array.indexOf(2) + 1; // 1, что интерпретируется как `true`

Порядок элементов

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

Анализ производительности

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

Визуализация

Представьте массив как карту сокровищ (🗺), где мы ищем определённое сокровище (💎):

🗺: [🏴‍☠️, 🦜, 🏝, 💎, 🍹]  // Пиратская жизнь — это захватывающее приключение!

Осмотрим карту в поисках сокровища:

array.includes(💎); // Где же ты, мой драгоценный камень?

На выходе мы получаем:

💎 присутствует на карте: **True** ✅ 
// "X" отмечает место – сокровище найдено!

А если сокровища нет? Тогда получитe следующее:

🛑 на карте: **False** ❌
// К сожалению, на этой карте нет места для стоп-знака.

Нагляднее вряд ли можно представить, не так ли?

Практические примеры

Ускорение поиска с указанием начального индекса

Если вы уверены, что рассматриваемый элемент отсутствует в начале массива, начните проверку с определённого индекса:

const bigArray = new Array(1000).fill('gold').concat(['diamond']);
bigArray.includes('diamond', 1000); // true – наконец-то мы богаты!

Создание полифилла

Для обеспечения поддержки Array.includes() в устаревших браузерах можно использовать полифилл:

if (!Array.prototype.includes) {
  Array.prototype.includes = function(element, fromIndex) {
    return this.indexOf(element, fromIndex) !== -1;
  };
}

Производительность и Array.includes()

Array.includes() может работать по-разному в зависимости от оптимизаций в различных движках JavaScript. indexOf, выполняет линейный поиск, в среднем делает около n/2 сравнений. Поэтому важно учесть специфику задачи при выборе метода.

Полезные материалы

1. Array.prototype.includes() – JavaScript | MDN — Подробное руководство по использованию Array.includes().
2. Метод indexOf() массива JavaScript на W3Schools — Учебный материал по методу indexOf().
3. Как проверить наличие ключа в объекте JavaScript? – Stack Overflow — Обсуждение способов проверки наличия ключей в объекте на форуме Stack Overflow.
4. Спецификация языка ECMAScript® 2024 — Официальная документация от экспертной группы Ecma International.
5. Изучаем использование ключевого слова "this" в JavaScript — SitePoint — Статья по использованию оператора "this" в JavaScript.
6. Курс "Изучение JavaScript" на Codecademy — Полный учебный курс, где среди прочего рассматривается работа с методами .forEach(), .map(), .filter() и другими.
7. Туториал по итерациям массивов в JavaScript на DigitalOcean — Руководство по методам и процедурам итераций в массивах.