Справочник JavaScript

Array.find(): ищем первый подходящий элемент

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

Синтаксис

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Илья' }
];
const user = users.find((item) => item.id === 2);

Если ничего не найдено

const title = user?.name ?? 'Пользователь не найден';

Проверяй undefined до обращения к свойствам. Optional chaining и оператор ?? помогают задать запасное значение.

Find или filter

Find возвращает один элемент и прекращает поиск после совпадения. Filter всегда возвращает массив со всеми совпадениями.

Ошибки

Ожидать массив в результате find.
Не обработать undefined.
Использовать find для проверки существования, когда достаточно some.

Попробуй

Найди товар по id и выведи его название либо сообщение об отсутствии.

Как безопасно работать с результатом find

find возвращает первый элемент, для которого callback дал true. Если совпадения нет, результатом будет undefined — это нужно учитывать до чтения свойства. Для проверки самого факта существования иногда понятнее использовать some, а для позиции элемента — findIndex.

При поиске объекта сравнивай нужное поле, например id. Сам объект возвращается по ссылке: если изменить его свойство, изменится элемент исходного массива. Когда это нежелательно, создай копию через spread. Для частых поисков по уникальному ключу большой массив лучше один раз преобразовать в Map.

Разберём рабочий пример

const lessons = [
  { id: 1, title: "HTML" },
  { id: 2, title: "CSS" }
];

const lesson = lessons.find(item => item.id === 2);
console.log(lesson?.title ?? "Урок не найден");

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

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

Обработан результат undefined.
Условие поиска возвращает boolean.
Учтено, что объект возвращается по ссылке.
Для индекса выбран findIndex, а не find.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.