Эффективный поиск объекта в массиве 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()
для совместимости со старыми браузерами.
Тестируйте и обновляйте свои функции постоянно для их безошибочного функционирования.
Полезные материалы
- Array.prototype.includes() – JavaScript | MDN — здесь подробно описан метод
includes()
для работы с массивами. - Array.prototype.some() – JavaScript | MDN — здесь можно узнать подробности о методе
some()
. - How do I check if an array includes a value in JavaScript? – Stack Overflow — советы разработчиков из сообщества Stack Overflow.
- Set – JavaScript | MDN — подробно о
Set
, который позволяет оптимизировать поиск. - ECMAScript 2015 Language Specification – ECMA-262 6th Edition — спецификации языка JavaScript.