LearnJS

Поиск в массиве JavaScript

Поиск в массиве нужен, когда нужно понять, есть ли в списке нужное значение, получить его индекс или найти элемент по условию.

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

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

Что значит поиск в массиве

Массив хранит несколько значений. JavaScript умеет искать в нем точное значение или элемент, который подходит под условие.

let fruits = ['apple', 'orange', 'banana'];

console.log(fruits.includes('orange')); // true
console.log(fruits.includes('grape')); // false

Первое значение найдено, второе - нет.

Проверка через includes()

includes() проверяет, есть ли элемент в массиве. Результатом будет true или false.

let numbers = [10, 20, 30];

console.log(numbers.includes(20)); // true
console.log(numbers.includes(50)); // false

Этот метод удобно использовать в условиях.

let permissions = ['read', 'write'];

if (permissions.includes('write')) {
  console.log('Можно редактировать');
}

includes() ищет точное значение. Для строк регистр тоже важен.

let languages = ['HTML', 'CSS', 'JavaScript'];

console.log(languages.includes('JavaScript')); // true
console.log(languages.includes('javascript')); // false

Индекс через indexOf()

indexOf() возвращает индекс найденного элемента.

let fruits = ['apple', 'orange', 'banana'];

console.log(fruits.indexOf('orange')); // 1

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

let fruits = ['apple', 'orange', 'banana'];

console.log(fruits.indexOf('grape')); // -1

indexOf() используют, когда нужен не только факт наличия элемента, но и его позиция в массиве.

Поиск с конца через lastIndexOf()

Если значение встречается несколько раз, indexOf() вернет индекс первого совпадения.

let tags = ['js', 'css', 'js', 'html'];

console.log(tags.indexOf('js')); // 0

Чтобы найти последнее совпадение, используют lastIndexOf().

let tags = ['js', 'css', 'js', 'html'];

console.log(tags.lastIndexOf('js')); // 2

indexOf() в условии

С indexOf() в условиях нужно сравнивать результат с -1.

let skills = ['HTML', 'CSS', 'JavaScript'];

if (skills.indexOf('HTML') !== -1) {
  console.log('Навык найден');
}

Если просто поставить результат indexOf() в if, можно получить неверное поведение.

let skills = ['HTML', 'CSS', 'JavaScript'];

if (skills.indexOf('HTML')) {
  console.log('Навык найден');
}

HTML находится на индексе 0, а 0 в условии воспринимается как false. Поэтому для обычной проверки наличия чаще удобнее использовать includes().

Поиск по условию через find()

find() ищет первый элемент, который подходит под условие.

let numbers = [5, 12, 8, 130, 44];

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

console.log(result); // 12

Метод идет по массиву слева направо и возвращает первое подходящее значение.

Если ничего не найдено, результатом будет undefined.

let numbers = [5, 8, 9];

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

console.log(result); // undefined

Индекс по условию через findIndex()

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

let numbers = [5, 12, 8, 130, 44];

let index = numbers.findIndex((number) => number > 10);

console.log(index); // 1

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

let numbers = [5, 8, 9];

let index = numbers.findIndex((number) => number > 10);

console.log(index); // -1

Проверка через some()

some() проверяет, есть ли в массиве хотя бы один элемент, который подходит под условие.

let numbers = [5, 8, 12];

let hasBigNumber = numbers.some((number) => number > 10);

console.log(hasBigNumber); // true

Если нужен только ответ true или false, а сам элемент не нужен, some() читается понятнее, чем find().

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

В массивах часто хранят объекты. Например, список пользователей.

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

Чтобы найти пользователя по id, удобно использовать find().

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

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

includes() и indexOf() хорошо подходят для простых значений: строк, чисел, булевых значений. Для объектов чаще нужен поиск по свойству через find(), findIndex() или some().

Что выбрать

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

Если нужен индекс простого значения, подойдет indexOf().

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

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

Если нужен только ответ «есть подходящий элемент или нет», используйте some().

Итого

Для поиска в массиве важно сначала понять, что именно нужно получить: ответ, индекс или сам элемент.

  • includes() возвращает true или false.
  • indexOf() возвращает индекс элемента или -1.
  • lastIndexOf() ищет последнее совпадение.
  • find() возвращает первый элемент, который подходит под условие.
  • findIndex() возвращает индекс элемента по условию.
  • some() проверяет, есть ли хотя бы один подходящий элемент.