JavaScript Array find()
Find the value of the first element with a value over 18:
function checkAge(age) return age > 18;
>
function myFunction() document.getElementById(«demo»).innerHTML = ages.find(checkAge);
>
Description
The find() method returns the value of the first element that passes a test.
The find() method executes a function for each array element.
The find() method returns undefined if no elements are found.
The find() method does not execute the function for empty elements.
The find() method does not change the original array.
Syntax
Parameters
function() | Required. A function to run for each array element. |
currentValue | Required. The value of the current element. |
index | Optional. The index of the current element. |
arr | Optional. The array of the current element. |
thisValue | Optional. Default undefined . A value passed to the function as its this value. |
Return Value
Type | Description |
A value | The value of the first element that pass the test. Otherwise it returns undefined . |
Example 2
Find the value of the first element that with a value above a specific number:
function checkAge(age) return age > document.getElementById(«ageToCheck»).value;
>
function myFunction() document.getElementById(«demo»).innerHTML = ages.find(checkAge);
>
How to list all methods of an object in JavaScript
We can use the Object.getOwnPropertyNames() function to get all the property names linked to an object.
Then we can filter the resulting array, to only include that property name if it’s a function.
We determine if it’s a function by using typeof on it.
For example here is how we might create a utility function to do what we need:
getMethods = (obj) => Object.getOwnPropertyNames(obj).filter(item => typeof obj[item] === 'function')
This lists only the methods defined on that specific object, not any method defined in its prototype chain.
To do that we must take a slightly different route. We must first iterate the prototype chain and we list all the properties in an array. Then we check if each single property is a function.
An easy way to make sure we don’t duplicate methods as we navigate the prototype chain (like constructor which is always present), we use a Set data structure that makes sure values are unique:
const getMethods = (obj) => let properties = new Set() let currentObj = obj do Object.getOwnPropertyNames(currentObj).map(item => properties.add(item)) > while ((currentObj = Object.getPrototypeOf(currentObj))) return [. properties.keys()].filter(item => typeof obj[item] === 'function') >
getMethods("") getMethods(new String('test')) getMethods(<>) getMethods(Date.prototype)
.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