includes() для массивов в JavaScript

includes() проверяет, есть ли в массиве нужный элемент.

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

console.log(fruits.includes('orange'));

Результат:

true

В массиве есть строка ‘orange’, поэтому метод вернул true.

Что делает includes()

includes() идет по массиву и ищет значение, которое передали в скобках.

Если значение найдено, метод возвращает true. Если не найдено - false.

let numbers = [10, 20, 30];

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

Синтаксис

Основная запись выглядит так:

array.includes(searchElement)

searchElement - элемент, который нужно найти.

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

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

Результат:

true

true и false

Так как includes() возвращает логическое значение, его удобно использовать в условиях.

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

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

Если элемента в массиве нет, условие не выполнится.

let permissions = ['read'];

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

Поиск с позиции

Вторым аргументом можно указать индекс, с которого нужно начать поиск.

array.includes(searchElement, fromIndex)
let letters = ['a', 'b', 'a', 'c'];

console.log(letters.includes('a', 1)); // true
console.log(letters.includes('a', 3)); // false

В первом случае поиск начинается с индекса 1 и находит ‘a’ дальше в массиве. Во втором случае поиск начинается с индекса 3, а после него ‘a’ уже нет.

Точное совпадение

includes() ищет точное значение.

let values = [10, '10'];

console.log(values.includes(10)); // true
console.log(values.includes('10')); // true

Число 10 и строка ‘10’ - разные значения. Если в массиве есть только строка, поиск числа не сработает.

let values = ['10'];

console.log(values.includes(10)); // false

Для строк также важен регистр.

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

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

Объекты в массиве

С объектами includes() проверяет не одинаковое содержимое, а один и тот же объект в памяти.

let user = { name: 'Анна' };
let users = [user];

console.log(users.includes(user)); // true
console.log(users.includes({ name: 'Анна' })); // false

Второй объект выглядит так же, но это новый объект. Поэтому includes() его не считает тем же самым элементом.

Если нужно найти объект по свойству, обычно используют some() или find().

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

let hasAnna = users.some((user) => user.name === 'Анна');

console.log(hasAnna); // true

Где использовать

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

let blockedWords = ['spam', 'scam'];
let word = 'spam';

if (blockedWords.includes(word)) {
  console.log('Слово заблокировано');
}

Итого

includes() проверяет наличие элемента в массиве.

  • array.includes(value) возвращает true или false.
  • Метод ищет точное значение.
  • Вторым аргументом можно указать индекс начала поиска.
  • Для строк важен регистр.
  • Для поиска объекта по свойству лучше использовать some() или find().