Метод this find javascript

Array.prototype.find()

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

• If you need the index of the found element in the array, use findIndex() .
• If you need to find the index of a value, use indexOf() . (It’s similar to findIndex() , but checks each element for equality with the value instead of using a testing function.)
• If you need to find if a value exists in an array, use includes() . Again, it checks each element for equality with the value instead of using a testing function.
• If you need to find if any element satisfies the provided testing function, use some() .

Try it

Syntax

find(callbackFn) find(callbackFn, thisArg) 

Parameters

A function to execute for each element in the array. It should return a truthy value to indicate a matching element has been found, and a falsy value otherwise. The function is called with the following arguments:

The current element being processed in the array.

The index of the current element being processed in the array.

The array find() was called upon.

A value to use as this when executing callbackFn . See iterative methods.

Return value

The first element in the array that satisfies the provided testing function. Otherwise, undefined is returned.

Description

The find() method is an iterative method. It calls a provided callbackFn function once for each element in an array in ascending-index order, until callbackFn returns a truthy value. find() then returns that element and stops iterating through the array. If callbackFn never returns a truthy value, find() returns undefined .

callbackFn is invoked for every index of the array, not just those with assigned values. Empty slots in sparse arrays behave the same as undefined .

find() does not mutate the array on which it is called, but the function provided as callbackFn can. Note, however, that the length of the array is saved before the first invocation of callbackFn . Therefore:

• callbackFn will not visit any elements added beyond the array’s initial length when the call to find() began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by callbackFn , its value passed to the callbackFn will be the value at the time that element gets visited. Deleted elements are visited as if they were undefined .

Warning: Concurrent modifications of the kind described above frequently lead to hard-to-understand code and are generally to be avoided (except in special cases).

The find() method is generic. It only expects the this value to have a length property and integer-keyed properties.

Examples

Find an object in an array by one of its properties

const inventory = [  name: "apples", quantity: 2 >,  name: "bananas", quantity: 0 >,  name: "cherries", quantity: 5 >, ]; function isCherries(fruit)  return fruit.name === "cherries"; > console.log(inventory.find(isCherries)); // 

Using arrow function and destructuring

const inventory = [  name: "apples", quantity: 2 >,  name: "bananas", quantity: 0 >,  name: "cherries", quantity: 5 >, ]; const result = inventory.find(( name >) => name === "cherries"); console.log(result); // 

Find a prime number in an array

The following example finds an element in the array that is a prime number (or returns undefined if there is no prime number):

function isPrime(element, index, array)  let start = 2; while (start  Math.sqrt(element))  if (element % start++  1)  return false; > > return element > 1; > console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found console.log([4, 5, 8, 12].find(isPrime)); // 5 

Using find() on sparse arrays

Empty slots in sparse arrays are visited, and are treated the same as undefined .

// Declare array with no elements at indexes 2, 3, and 4 const array = [0, 1, , , , 5, 6]; // Shows all indexes, not just those with assigned values array.find((value, index) =>  console.log("Visited index", index, "with value", value); >); // Visited index 0 with value 0 // Visited index 1 with value 1 // Visited index 2 with value undefined // Visited index 3 with value undefined // Visited index 4 with value undefined // Visited index 5 with value 5 // Visited index 6 with value 6 // Shows all indexes, including deleted array.find((value, index) =>  // Delete element 5 on first iteration if (index === 0)  console.log("Deleting array[5] with value", array[5]); delete array[5]; > // Element 5 is still visited even though deleted console.log("Visited index", index, "with value", value); >); // Deleting array[5] with value 5 // Visited index 0 with value 0 // Visited index 1 with value 1 // Visited index 2 with value undefined // Visited index 3 with value undefined // Visited index 4 with value undefined // Visited index 5 with value undefined // Visited index 6 with value 6 

Calling find() on non-array objects

The find() method reads the length property of this and then accesses each property whose key is a nonnegative integer less than length .

const arrayLike =  length: 3, "-1": 0.1, // ignored by find() since -1 < 00: 2, 1: 7.3, 2: 4, >; console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x))); // 7.3 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Polyfill of Array.prototype.find in core-js
• Indexed collections
• Array
• Array.prototype.findIndex()
• Array.prototype.findLast()
• Array.prototype.findLastIndex()
• Array.prototype.includes()
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()
• TypedArray.prototype.find()

Found a content problem with this page?

This page was last modified on Jun 27, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

.find ( )

Поиск по массиву будет искать по тем критериям, которые вы придумали.

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

Опишем функцию, которая позволит определить, есть ли в списке дел моё любимое занятие. Поставим в константу просмотр сериальчиков и будем проверять: если занятие из ToDo-списка совпадает с моим хобби, то вернём его. В списке дел на завтра нет просмотра сериалов, а значит, вернётся undefined .

 function isMyFavoriteHobby(element, index, array)  const myFavoriteHobby = 'смотреть сериальчики' return element === myFavoriteHobby> const currentToDoList = [ 'смотреть сериальчики', 'читать книгу', 'пить кофе', 'гладить кота', 'гулять',]const tomorrowToDoList = [ 'читать книгу', 'пить кофе', 'гладить кота', 'гулять',] console.log(currentToDoList.find(isMyFavoriteHobby))// 'смотреть сериальчики' console.log(tomorrowToDoList.find(isMyFavoriteHobby))// undefined, не найдено function isMyFavoriteHobby(element, index, array)  const myFavoriteHobby = 'смотреть сериальчики' return element === myFavoriteHobby > const currentToDoList = [ 'смотреть сериальчики', 'читать книгу', 'пить кофе', 'гладить кота', 'гулять', ] const tomorrowToDoList = [ 'читать книгу', 'пить кофе', 'гладить кота', 'гулять', ] console.log(currentToDoList.find(isMyFavoriteHobby)) // 'смотреть сериальчики' console.log(tomorrowToDoList.find(isMyFavoriteHobby)) // undefined, не найдено    Скопировать Скопировано Не удалось скопировать   

Интерактивный пример

Скопировать ссылку «Интерактивный пример» Скопировано

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В метод find ( ) необходимо передать аргументом функцию. Функция должна возвращать булевое значение true или false . find ( ) вернёт первый элемент, на котором переданная функция-колбэк вернула true .

Чтобы получить необходимый элемент, нужно определить условие поиска. В этом нам поможет функция-предикат. Предикат — это функция, которая возвращает булевое значение.

От результата выполнения функции зависит, вернёт ли find ( ) подходящий элемент:

Опишем функцию-предикат is Odd , которая проверяет, является ли число нечётным: проверим остаток от деления на 2, и если остаток равен 1, то число нечётное:

 const isOdd = (element) =>  return element % 2 === 1;> const isOdd = (element) =>  return element % 2 === 1; >    Скопировать Скопировано Не удалось скопировать   

Протестируем функцию на двух наборах данных. Первый набор состоит только из чётных значений. Второй массив включает в себя нечётные значения: 17, 19, 21.

Когда мы запустим метод find ( ) у первого массива, то нам вернётся undefined , так как ни одно значение не подходит под условие. В случае со вторым набором вернётся число 17 и только оно, потому что это число первое удовлетворило значению.

 const onlyEvenElements = [2, 4, 8, 16, 32]const withOddElements = [2, 4, 8, 16, 17, 19, 21] console.log(onlyEvenElements.find(isOdd))// undefined, не найдено console.log(withOddElements.find(isOdd))// 17 const onlyEvenElements = [2, 4, 8, 16, 32] const withOddElements = [2, 4, 8, 16, 17, 19, 21] console.log(onlyEvenElements.find(isOdd)) // undefined, не найдено console.log(withOddElements.find(isOdd)) // 17    Скопировать Скопировано Не удалось скопировать   

Функция, которую мы передаём в метод find , принимает три параметра:

• element — элемент массива в текущей итерации;
• index — индекс текущего элемента;
• arr — сам массив, который перебираем.

В коде is Odd мы не стали объявлять параметры index и arr , потому что не используем их.

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Ниже показан пример того, как решить задачу без find ( ) . Если мы уберём число 2 из массива, то функция будет возвращать undefined .

 const numbersWithTwo = [1, 2, 3, 4, 5, 6]const numbersWithoutTwo = [1, 3, 4, 5, 6] const findTwo = (array) =>  for (let i = 0; i < array.length; i++)  if (array[i] === 2)  return array[i] > > return undefined>; console.log(findTwo(numbersWithTwo))// 2 console.log(findTwo(numbersWithoutTwo))// undefined const numbersWithTwo = [1, 2, 3, 4, 5, 6] const numbersWithoutTwo = [1, 3, 4, 5, 6] const findTwo = (array) =>  for (let i = 0; i  array.length; i++)  if (array[i] === 2)  return array[i] > > return undefined >; console.log(findTwo(numbersWithTwo)) // 2 console.log(findTwo(numbersWithoutTwo)) // undefined    Скопировать Скопировано Не удалось скопировать   

☝️ Обратите внимание: после того, как нужный элемент был найден, из функции find Two возвращается значение. Это ведёт к прерыванию цикла for . Мы сделали так, чтобы полностью симулировать работу метода find ( ) — он заканчивает работу сразу, как только нашёл нужный элемент. Это называется оптимизация. Не стоит тратить ресурс на то, что уже сделано и не пригодится в дальнейшем.

find ( ) позволит писать меньше кода и сделать его более понятным:

 const numbers = [1, 2, 3, 4, 5, 6] const result = numbers.find(function isElementEquals2(element)  return element === 2>); console.log(result)// 2 const numbers = [1, 2, 3, 4, 5, 6] const result = numbers.find(function isElementEquals2(element)  return element === 2 >); console.log(result) // 2    Скопировать Скопировано Не удалось скопировать   

Методы .filter ( ) и find ( ) похожи. Главное отличие find ( ) от filter ( ) в том, что find ( ) возвращает первый подходящий элемент, а filter ( ) вернёт массив со всеми подходящими элементами.

Вариант реализации через .filter ( ) :

 const isTwoOrFour = (element) =>  return (element === 2) || (element === 4)> const numbers = [1, 2, 3, 4, 5, 2, 6] const resultWithFilter = numbers.filter(isTwoOrFour(element))const resultWithFind = numbers.find(isTwoOrFour(element)) console.log(resultWithFilter);// [2, 4, 2] console.log(resultWithFind);// 2 const isTwoOrFour = (element) =>  return (element === 2) || (element === 4) > const numbers = [1, 2, 3, 4, 5, 2, 6] const resultWithFilter = numbers.filter(isTwoOrFour(element)) const resultWithFind = numbers.find(isTwoOrFour(element)) console.log(resultWithFilter); // [2, 4, 2] console.log(resultWithFind); // 2    Скопировать Скопировано Не удалось скопировать   

Источник