Эффективный поиск объекта в массиве JavaScript: метод includes()

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

Для определения, присутствует ли элемент в массиве JavaScript, основными употребляемыми методами являются includes() и indexOf().

const numArray = [1, 2, 3];
const doesExist = numArray.includes(2); // возвращает true, поскольку число 2 содержится в массиве.

Для тех, кто при работе использует более ранние версии JavaScript, актуален следующий код:

const doesExistOld = numArray.indexOf(2) > -1; // возвращает true, число 2 найдено, данный метод использовался до IE8.

Методы подробнее

Запомните важные нюансы:

• includes() возвращает boolean значение, которое указывает на присутствие или отсутствие элемента.
• indexOf() возвращает индекс элемента, если он содержится в массиве, или -1, если элемента в массиве нет.

Для поиска непримитивных типов данных, таких как объекты, используйте метод some():

const guests = [{ name: 'John', diet: 'vegan' }, { name: 'Emma', glutenFree: true }];

const isEmmaHere = guests.some(guest => guest.name === 'Emma'); // возвращает true, в списке гостей обнаружена Эмма.

Поддержка в старых браузерах

IE6-8 не поддерживают некоторые современные методы, поэтому для них потребуется специфический подход:

• Полифилл позволяет добавить поддержку метода Array.prototype.includes().
• Вы также можете объявить собственную функцию include(), используя Array.prototype.indexOf().
• Надстройки массива от Эрика Арвидссона предлагают высококачественные полифиллы.

Проверка скорости

Производительность зависит от размера массива и положения элемента в нем:

• Для больших массивов ключевым является вопрос эффективности.
• Для небольших массивов достаточно лишь проверить результаты операций.

Если требования высокой скорости критичны, используйте Set, который работает быстрее:

const superSet = new Set([1, '2', 3, { name: 'Emma' }]);

const isEmmaInSet = superSet.has({ name: 'Emma' }); // возвращает false, Set не смог найти объект без идеального совпадения.

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

Представьте себя дефективом, который ищет улику в переполненном городе:

Город (Массив): [🌳, 🚗, 🏠, 🕵️‍♂️, 🏢]
Улика (Элемент): 🕵️‍♂️

Примените свое увеличительное стекло — метод includes():

city.includes(clue); // 👍 Улика найдена!

Продвинутое расследование

Если ваше расследование требует учета сложных условий или объектов, вам помогут следующие инструменты:

find() для сложных условий

const found = guests.find(guest => guest.name === 'Emma' && guest.glutenFree); // Обнаружена Эмма, у ней нет аллергии на глютен.

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

Вложенные массивы

Не беспокойтесь о вложенных структурах, используйте рекурсию или lodash для облегчения поиска:

const circus = [[1, 2], [3, 4], [5, 6]];
const foundFour = circus.some(tent => tent.includes(4)); // Возвращает true, число 4 обнаружено.

Строгое сравнение

Будьте внимательны, чтобы избежать ошибки приведения типов:

const mixedArray = [1, '2', 3];

const isItHere = mixedArray.includes('2'); // возвращает true, строка '2' обнаружена в массиве.
const isItReallyHere = mixedArray.includes(2); // возвращает false, число 2 в массиве отсутствует.

Подводные камни и рекомендации

• Обращайте особое внимание на значения null или undefined, они способны вызвать проблемы!
• Полифиллы должны соответствовать рекомендациям MDN.
• Если работаете с jQuery, используйте $.inArray() для совместимости со старыми браузерами.

Тестируйте и обновляйте свои функции постоянно для их безошибочного функционирования.

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

1. Array.prototype.includes() – JavaScript | MDN — здесь подробно описан метод includes() для работы с массивами.
2. Array.prototype.some() – JavaScript | MDN — здесь можно узнать подробности о методе some().
3. How do I check if an array includes a value in JavaScript? – Stack Overflow — советы разработчиков из сообщества Stack Overflow.
4. Set – JavaScript | MDN — подробно о Set, который позволяет оптимизировать поиск.
5. ECMAScript 2015 Language Specification – ECMA-262 6th Edition — спецификации языка JavaScript.