логотип PurpleSchool
логотип PurpleSchool

Как работает метод find() - JavaScript

Автор

Виталий Котов

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

let numbers = [1, 3, 4, 9, 8];

// функция проверки четного числа
function isEven(element) {
  return element % 2 == 0;
}

// получаем первое четное число
let evenNumber = numbers.find(isEven);
console.log(evenNumber);

// Вывод в консоль: 4

Синтаксис find()

Синтаксис метода find() следующий:

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

Где arr - это массив.

Параметры find()

Метод find() принимает:

  • callback
    • функцию, которая будет вызываться для каждого элемента массива. Принимает:
      • element
        • текущий элемент в массиве.
  • thisArg (необязательно) - значение, используемое в качестве this, при вызове функции callback.

Возвращаемое значение find()

  • Возвращает значение первого элемента массива, удовлетворяющего заданной функции.
  • Возвращает undefined, если ни один из элементов не удовлетворяет функции.

Примеры

Пример 1: Использование метода find()

function isEven(element) {
  return element % 2 == 0;
}

let randomArray = [1, 45, 8, 98, 7];

let firstEven = randomArray.find(isEven);
console.log(firstEven); // 8

// используем стрелочную функцию
let firstOdd = randomArray.find((element) => element % 2 == 1);
console.log(firstOdd); // 1

Вывод в консоль:

8
1

Пример 2: find() с элементами объекта

const team = [
  { name: "Bill", age: 10 },
  { name: "Linus", age: 15 },
  { name: "Alan", age: 20 },
  { name: "Steve", age: 34 },
];

function isAdult(member) {
  return member.age >= 18;
}

console.log(team.find(isAdult)); // { name: 'Alan', age: 20 }

// используем стрелочную функцию и деструктуризацию
let adultMember = team.find(({ age }) => age >= 18);

console.log(adultMember); // { name: 'Alan', age: 20 }

Вывод в консоль:

{ name: 'Alan', age: 20 }
{ name: 'Alan', age: 20 }
Стрелочка влевоКак работает метод findIndex() - JavaScriptКак работает метод filter() - JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов12 бесплатных уроков
иконка звёздочки рейтинга4.8
Backend
Frontend
Mobile
изображение курса

TypeScript с нуля

Антон Ларичев
иконка часов21 бесплатный урок
иконка звёздочки рейтинга4.7
Backend
Frontend
Mobile
изображение курса

Next.js - с нуля

Антон Ларичев
иконка часов23 бесплатных урока
иконка звёздочки рейтинга4.7
Frontend