Back to articles

Метод Array.prototype.find() в JavaScript

javascriptarrayfind

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

Краткое содержание

В этой статье мы подробно разберём метод Array.prototype.find() — встроенный инструмент поиска элементов в массивах JavaScript. Вы узнаете о синтаксисе, параметрах, практическом применении для объектов и строк, а также о способах учёта регистра при сравнении.

Оглавление

  1. Введение
  2. Синтаксис
  3. Параметры

  4. Пример использования

  5. Частые ошибки и рекомендации
  6. Заключение
  7. Дополнительные ресурсы

Введение

Метод find() предназначен для поиска первого элемента массива, удовлетворяющего заданному условию. В отличие от findIndex(), он возвращает значение элемента, а не его индекс. Если ни один элемент не соответствует критериям, результатом будет undefined.

Синтаксис

array.find(callback(element, index, array), thisArg);

  • callback — функция-предикат, вызываемая для каждого элемента:

    • element — текущий элемент массива.
    • index (необязательно) — индекс текущего элемента.
    • array (необязательно) — сам массив.

  • thisArg (необязательно) — значение, используемое в качестве this при выполнении callback.

Параметры

Параметр Описание
callback Функция, определяющая условие поиска.
thisArg Контекст (this) для callback-функции (по умолчанию undefined).

Возвращает: первый элемент, для которого callback вернёт true, или undefined.

Пример использования

Поиск объекта по свойству

Допустим, у нас есть массив книг:

const books = [
  { title: "War and Peace", author: "Leo Tolstoy" },
  { title: "Harry Potter and the Order of the Phoenix", author: "J. K. Rowling" },
  { title: "Northern Lights: The Subtle Knife", author: "Philip Pullman" }
];

function findBookByTitle(arr, title) {
  return arr.find(item => item.title === title);
}

const found = findBookByTitle(books, "War and Peace");
console.log(found);
// { title: 'War and Peace', author: 'Leo Tolstoy' }
  1. Функция findBookByTitle принимает массив объектов и строку title.
  2. Внутри используется arr.find(), в callback-сравнении проверяется совпадение item.title === title.
  3. Возвращается первый подходящий объект или undefined.

Учёт регистра

По умолчанию сравнение строк в JavaScript чувствительно к регистру. Чтобы сделать поиск нечувствительным, приводим обе строки к одному регистру:

function findBookIgnoreCase(arr, title) {
  return arr.find(
    item => item.title.toLowerCase() === title.toLowerCase()
  );
}

console.log(findBookIgnoreCase(books, "war and peace"));
// { title: 'War and Peace', author: 'Leo Tolstoy' }

Частые ошибки и рекомендации

  • Не проверять undefined. Всегда проверяйте результат метода:

    const result = findBookByTitle(books, "Unknown");
if (!result) {
  console.log("Книга не найдена");
}
  • Многоразовый перебор. Если нужно найти несколько элементов, вместо нескольких вызовов find() лучше использовать filter().
  • Не использовать в асинхронном коде без соответствующей обработки. find() не работает с async/await внутри callback напрямую.

Заключение

Метод Array.prototype.find() — мощный и лаконичный инструмент для поиска элемента в массиве по любому критерию. Он помогает заменять громоздкие циклы на чистый и читаемый код.

Дополнительные ресурсы