Поиск элемента в массиве JavaScript

• Когда нужен поиск элемента
• Метод find()
• Поиск объекта в массиве
• Если элемент не найден
• Метод findIndex()
• Метод some()
• find() или filter()
• Итого

Поиск элемента нужен, когда в массиве нужно найти одно подходящее значение. Например, пользователя с нужным id или первое число больше заданного.

let numbers = [4, 9, 16, 25];

let result = numbers.find((number) => number > 10);

console.log(result); // 16

В этом примере метод нашел первое число больше 10.

Когда нужен поиск элемента

Сначала стоит понять, что именно нужно получить.

Если нужно проверить наличие простого значения, обычно достаточно includes().

let roles = ['admin', 'editor', 'user'];

console.log(roles.includes('admin')); // true

Если нужно найти элемент по условию, удобнее использовать find().

let numbers = [3, 7, 12, 20];

let bigNumber = numbers.find((number) => number > 10);

console.log(bigNumber); // 12

Метод find()

find() перебирает массив и возвращает первый элемент, для которого callback-функция вернула true.

let prices = [500, 1200, 800, 3000];

let expensivePrice = prices.find((price) => {
  return price > 1000;
});

console.log(expensivePrice); // 1200

Метод не возвращает все подходящие элементы. Он останавливается на первом найденном результате.

Поиск объекта в массиве

Чаще всего find() используют с массивами объектов. Например, когда нужно найти пользователя по id.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 3, name: 'Мария' },
];

let user = users.find((user) => user.id === 2);

console.log(user); // { id: 2, name: 'Олег' }

Такой поиск удобнее, чем вручную писать цикл и проверять каждый объект.

Если элемент не найден

Если подходящего элемента нет, find() вернет undefined.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
];

let user = users.find((user) => user.id === 10);

console.log(user); // undefined

Поэтому перед обращением к свойствам найденного объекта стоит убедиться, что он действительно найден.

if (user) {
  console.log(user.name);
}

Метод findIndex()

findIndex() работает почти как find(), но возвращает не сам элемент, а его индекс.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 3, name: 'Мария' },
];

let index = users.findIndex((user) => user.id === 2);

console.log(index); // 1

Если элемент не найден, метод вернет -1.

let index = users.findIndex((user) => user.id === 10);

console.log(index); // -1

findIndex() нужен, когда важна позиция элемента в массиве. Например, если потом нужно заменить элемент по индексу.

Метод some()

Иногда сам элемент не нужен. Нужно только понять, есть ли хотя бы один подходящий элемент.

let users = [
  { name: 'Анна', active: true },
  { name: 'Олег', active: false },
];

let hasActiveUser = users.some((user) => user.active);

console.log(hasActiveUser); // true

В такой ситуации some() читается точнее, чем find(), потому что результатом сразу будет true или false.

find() или filter()

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

let user = users.find((user) => user.active);

filter() используют, когда нужны все подходящие элементы.

let activeUsers = users.filter((user) => user.active);

Проще правило такое: нужен объект - берите find(), нужен массив результатов - берите filter().

Итого

1. Для поиска одного элемента по условию используют find().

2. find() возвращает первый подходящий элемент или undefined.

3. Если нужен индекс найденного элемента, подходит findIndex().

4. Если нужен только ответ true или false, используйте some().

5. Если нужны все подходящие элементы, нужен filter(), а не find().