Поиск индекса объекта по условию в массиве 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. Боб, ты пойман!

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

1. Array.prototype.indexOf() – JavaScript | MDN — Описание метода .indexOf().
2. Методы массивов — Обзор методов массивов в JavaScript.
3. Найти объект по id в массиве объектов JavaScript – Stack Overflow — Дискуссии и решения вопроса о поиске объектов в массиве на сайте сообщества.
4. Array.prototype.find() – JavaScript | MDN — Информация о методе .find().
5. Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — Официальная спецификация ECMAScript 6 по объектам массива.
6. Array.prototype.findIndex() – JavaScript | MDN — Детальное изучение метода .findIndex().