Поиск индекса объекта по условию в массиве JavaScript
Быстрый ответ
Если вам нужно найти объект в массиве, основываясь на одном из свойств, то метод findIndex
станет отличным решением:
const items = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const idx = items.findIndex(obj => obj.name === 'Bob');
console.log(idx); // Выведет: 1. Боб найден успешно.
Глубокое погружение: map и findIndex в действии
Когда необходимо найти конкретное свойство, использование методов findIndex
и map
становится изящным решением. Сначала мы извлекаем нужное свойство 'hello' из каждого объекта, а затем ищем значение в получившемся массиве.
const data = [{hello: 'world'}, {hello: 'foo'}, {hello: 'bar'}];
const target = 'foo'; // 'foo' всегда в центре внимания
const targetIndex = data.map(obj => obj.hello).indexOf(target);
console.log(targetIndex); // Выведет: 1. 'foo' было обнаружено, но что же произошло с 'bar'?
Эта привлекательная запись в одну строчку делает код невероятно лаконичным и эффективным.
Поиск пути с помощью reduce
Для поиска индекса можно также использовать возможности функции reduce
, исключив тем самым необходимость ручного перебора.
const target = 'foo'; // И снова мы ищем 'foo'
const targetIndex = data.reduce((acc, obj, index) => {
return obj.hello === target ? index : acc;
}, -1);
console.log(targetIndex); // Выведет: 1. Вот и 'foo'!
Значение -1
указывает на то, что искомый элемент не был найден, как бы говоря о том, что следы в расследовании оборвались.
Создание собственных решений: пользовательские функции и библиотеки
Создание функций для поиска
Для более специализированного поиска можно написать функцию arrayObjectIndexOf
:
function arrayObjectIndexOf(array, searchFunction) {
for (let i = 0; i < array.length; i++) {
if (searchFunction(array[i])) return i;
}
return -1; // Элемент не найден.
}
Эта функция позволяет искать объекты по различным характеристикам или сложным критериям.
Использование мощи библиотек
Библиотека Underscore.js и её методы _.pluck
и _.findIndex
позволяют извлекать свойства и находить индексы:
const idx = _.findIndex(data, { hello: 'foo' });
console.log(idx); // Выведет: 1. 'foo' найдено, все благодаря Underscore.js!
Эти методы не только упрощают работу, но и обеспечивают совместимость со старыми версиями браузеров.
Визуализация
Посмотрим наглядно, как метод .indexOf()
работает при поиске в массиве объектов:
Городской пейзаж = [🏢, 🏬, 🌳, 🏠, 🚗]
Задача = Найти индекс машинки 🚗!
const findVehicleIndex = cityscape.map(obj => obj.type).indexOf('vehicle');
// Просто представьте, что мы как бы взглядом обходим каждый элемент, ища 'vehicle'
🔍 Результат:
Массив города: [🏢 'здание', 🏬 'магазин', 🌳 'дерево', 🏠 'дом', 🚗 'транспорт']
Индекс: 4 // 🚗 обнаружена на четвёртой позиции!
Учёт крайних случаев и проблем производительности
При использовании findIndex
или indexOf
важно учесть крайние случаи.
- Если элемент отсутствует, возвращается
-1
, что как бы сигнализирует о неудаче. - Производительность зависит от размера массива и сложности условия поиска.
С крупными массивами или сложными условиями иногда рационально использовать break
или применять досрочный выход:
const idx = (() => {
for (let [index, obj] of items.entries()) {
if (obj.name === 'Bob') return index;
}
return -1;
})();
console.log(idx); // Выведет: 1. Боб, ты пойман!
Полезные материалы
- Array.prototype.indexOf() – JavaScript | MDN — Описание метода .indexOf().
- Методы массивов — Обзор методов массивов в JavaScript.
- Найти объект по id в массиве объектов JavaScript – Stack Overflow — Дискуссии и решения вопроса о поиске объектов в массиве на сайте сообщества.
- Array.prototype.find() – JavaScript | MDN — Информация о методе .find().
- Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — Официальная спецификация ECMAScript 6 по объектам массива.
- Array.prototype.findIndex() – JavaScript | MDN — Детальное изучение метода .findIndex().