Поиск индекса объекта по условию в массиве JavaScript

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

Чтобы найти индекс первого элемента массива, соответствующего конкретному условию, можно воспользоваться методом findIndex():

const index = [{ a: 1 }, { a: 2 }].findIndex(obj => obj.a === 2);
// Индекс элемента { a: 2 } – это 1

Этот метод подходит для работы с небольшими массивами.

Оптимизация скорости работы с большими массивами

Когда речь идёт о больших массивах, классический цикл for может оказаться быстрее метода findIndex(), так как вызов функций может снизить производительность:

let index = -1;
for (let i = 0; i < largeArray.length; i++) {
  if (largeArray[i].a === 2) {
    index = i;
    break; // "Мы нашли нужный элемент, можно прекращать поиск!"
  }
}

Использование анонимных функций

Анонимные функции в JavaScript могут быть полезны для динамической генерации условий в методе findIndex():

const isSeniorDev = person => person.title === 'Senior Developer';
const index = employees.findIndex(isSeniorDev);

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

Не следует оптимизировать без необходимости

Стремление к оптимизации не всегда целесообразно. Она может загромождать код и усложнять его понимание. Используйте метод findIndex() в тех случаях, когда он действительно подходит, а к более сложным методам оптимизации прибегайте только при необходимости.

Использование метода some() для дополнительной функциональности

Если требуется найти индекс элемента и применить к нему определённые операции, может быть полезен метод Array#some:

let index = -1;
const exists = array.some((value, idx) => {
  if (value === "🏰") {
    index = idx; 
    return true; // "Ура, мы нашли замок!"
  }
  return false;
});

Метод some() останавливает перебор массива при первом удачном сравнении.

Использование метода map для уменьшения числа итераций по массиву

Если выгоды от максимальной производительности важнее всего, метод map() позволит пройти по массиву всего один раз:

const map = new Map(array.map((val, index) => [val.id, index]));
const index = map.get(someId); // "Здравствуйте, слышу, что вы ищете этот Id?"

Использование метода _.findIndex() библиотеки lodash для более сложного поиска

В библиотеке lodash представлен метод _.findIndex(), который будет полезен при поиске элементов, отвечающих сложным критериям или имеющих вложенные свойства:

const index = _.findIndex(array, {'user.details.age': 30}); // "Может быть, вы ищете тридцатилетнего пользователя?"

Поддержка пользователей Internet Explorer

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

if (!Array.prototype.findIndex) {
  // Место для кода полифилла для findIndex()
}

Сочетание методов indexOf() и map() для повышения эффективности

Методы indexOf() и map() можно успешно сочетать для быстрого определения индекса объекта по значению его свойства:

const values = array.map(obj => obj.a);
const index = values.indexOf(2);

Использование побитовых операторов для краткой формы записи индекса, словно вы настоящий профи

Те, кто предпочитает неординарные приёмы программирования, могут воспользоваться побитовыми операторами для работы с индексами:

const index = ~~array.findIndex(value => value === "🏰"); // "Кто заботится о десятичных дробях?!"

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

Представьте, что массив — это архипелаг 🏝️, и вы ищете на нем замок 🏰:

[🏝, 🏝, 🏝, 🏰, 🏝, 🏝] // 3 острова, замок и еще 2 острова

С помощью метода .findIndex() вы легко обнаружите замок, находящийся на третьем месте:

const index = array.findIndex(element => element === "🏰");

И вот он, замок обнаружен на четвертом месте среди островов! 🗺️ 🎉

Учет особых случаев при поиске

Имейте в виду, что при поиске индекса может вернуться 0, который в JavaScript интерпретируется как "ложное" значение. Будьте аккуратны:

if (index !== -1) { /* это корректный индекс, даже если он равен 0, это не ошибка */ }

Использование метода межтабличной индексации для оптимизации поиска

При работе с несколькими массивами можно использовать метод межтабличной индексации для ускорения поиска:

const array1 = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }];
const array2 = [1, 2, 1];
const array1IndexLookup = new Map(array1.map((value, index) => [value.id, index]));

array2.forEach(value => {
  console.log(array1[array1IndexLookup.get(value)].name); // Печатаю название фрукта
});

Будьте в курсе актуальных стандартов ES2015/ES6

В заключение стоит отметить, что Array.findIndex() — это часть стандарта ES2015/ES6. Используйте этот стандарт, чтобы сделать свой код актуальнее:

// В ES6 это выглядит так:
const index = array.findIndex(element => element === "Feature");

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

1. Array.prototype.findIndex() – JavaScript | MDN — подробная документация на MDN по использованию метода findIndex().
2. javascript – Convert array of objects into array of properties – Stack Overflow — интересное обсуждение на Stack Overflow на тему findIndex().
3. Методы массивов — незаменимое руководство на сайте JavaScript.ru по использованию findIndex() и др. методов массивов.
4. ECMAScript® 2024 Language Specification — официальная спецификация ECMAScript для Array.prototype.findIndex.
5. Medium — отличная статья на Codeburst через Medium, описывающая использование методов Array.find и Array.findIndex.
6. Стрелочные функции – JavaScript | MDN — пояснение работы стрелочных функций на MDN, которые часто используются вместе с findIndex().