Как разработчики, мы должны получать доступ к элементам в массиве и взаимодействовать с ними на регулярной основе. Методы Map () и Filter () - хороший выбор, когда нам нужно преобразовать элементы массивов на основе некоторой логики или найти элементы, соответствующие определенному условию. , плюс оба метода возвращают новый массив. Метод Reduce () сокращает список элементов массива до одного значения.

А как насчет другой, очень распространенной задачи в мире программирования, когда нам нужно найти отдельный элемент в массиве и вернуть этот единственный элемент?

Есть два разных метода, которые мы можем использовать в JavaScript для поиска данных или отдельных элементов в массивах - для простых и понятных условий мы можем использовать метод IndexOf (), а для поиска элементов с помощью более сложных вычислений мы используем Find (). Давайте теперь углубимся и узнаем больше о методе Find ()!

В качестве хорошей отправной точки обратимся к официальной документации и определению метода Find () на веб-сайте MDN Web Docs:

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

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

Обратите внимание, что этот метод возвращает элемент first (значение, а не индекс), который соответствует критерию. Это означает, что если в массиве есть несколько повторяющихся данных / одинаковых значений, будет возвращен только первый.

В приведенном ниже примере я создал fruits array и заполнил его различными типами фруктов. Скажем, я хочу найти в этом массиве элемент длиной 6 букв. Давайте сначала посмотрим, как эту проблему можно решить вручную, а затем решим ту же проблему еще раз, применив метод Find (). Попробуйте!

function findMethodDemo(arrayOfFruits) {
for (var i = 0; i < arrayOfFruits.length; i++) {
if (arrayOfFruits[i].length === 6) {
return arrayOfFruits[i];
}}}
const fruits  =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];
const result = findMethodDemo(fruits);
console.log(result);
// => Apples

Как это работает? Мы перебираем массив fruits , если длина текущего элемента в этом массиве равна условию, которое мы определили до arrayOfFruits[i].length === 6, тогда мы возвращаем этот элемент, иначе будет возвращено undefined. Обратите внимание на тот факт, что, несмотря на то, что есть два значения «Яблоки» и «Виноград», которые имеют одинаковую длину 6, возвращается только первое значение, поскольку return keyword останавливает выполнение функции, как только будет найден первый совпадающий элемент, так что машина JavaScript никогда не достигнет второго слова «Виноград».

Та же логика применима и будет использоваться, когда мы вызываем метод Find () для fruits array, проверьте это ниже!

const fruits  =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];
const result = fruits.find(element => element.length === 6);
console.log(result);
// => Apples

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

⭐️💥 Синтаксис метода Find () 💥⭐️

Мы уже узнали, как работает этот метод Find (), поэтому давайте рассмотрим синтаксис, проверим наши знания и попрактикуемся! Вот что нам сообщает официальная документация:

// Arrow function
find((element) => { ... } )
find((element, index) => { ... } )
find((element, index, array) => { ... } )
// Callback function
find(callbackFn)
find(callbackFn, thisArg)
// Inline callback function
find(function callbackFn(element) { ... })
find(function callbackFn(element, index) { ... })
find(function callbackFn(element, index, array){ ... })
find(function callbackFn(element, index, array) { ... }, thisArg)

Мы можем использовать выражение стрелочных функций, функцию обратного вызова или встроенную функцию обратного вызова, чтобы определить и использовать Find () метод. Мы уже написали выражение функции стрелки, теперь давайте переписываем тот же код, чтобы продемонстрировать функцию обратного вызова и встроенную функцию обратного вызова. Независимо от того, какой синтаксис вы выберете, результат будет одинаковым; вот пара примеров.

Встроенная функция обратного вызова.

const fruits  =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];
const result = fruits.find(function (element) {return element.length === 6});
console.log(result);
// => Apples

Функция обратного вызова.

const fruits  =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];
function callBack(fruits) {
return fruits.length === 6;}
const result = fruits.find(callBack);
console.log(result);
// => Apples

⭐️💥 А как насчет объектов? 💥⭐️

Теперь давайте преобразуем наш исходный массив в массив объектов и посмотрим, как мы можем применить метод Find () к более сложным структурам данных. Кроме того, давайте добавим повторяющиеся данные / одинаковые значения в этот модифицированный массив, чтобы продемонстрировать, что возвращается только первое совпадающее значение:

const fruits  =
[
{fruit: "Fig", count: 10},
{fruit: "Apples", count: 5},
{fruit: "Apples", count: 50},
{fruit: "Blueberries", count: 123},
{fruit: "Grapes", count: 7},
{fruit: "Apricot", count: 45},
{fruit: "Kiwi", count: 73},
{fruit: "Strawberry", count: 11}
];

Попробуйте этот код и посмотрите, каков результат:

const fruits  =
[
{fruit: "Fig", count: 10},
{fruit: "Apples", count: 5},
{fruit: "Apples", count: 50},
{fruit: "Blueberries", count: 123},
{fruit: "Grapes", count: 7},
{fruit: "Apricot", count: 45},
{fruit: "Kiwi", count: 73},
{fruit: "Strawberry", count: 11}
];
const result = fruits.find(findfruit => findfruit.fruit === "Apples");
console.log(result);
// => { fruit: 'Apples', count: 5 }

⭐️💥 Как использовать Index. 💥⭐️

Другой необязательный параметр этого метода - индекс, параметр / параметр индекса позволяет вам найти и получить значение элемента на основе его индекса. Например, мы хотим, чтобы метод Find () находил элемент в index 0 и возвращал его значение. В приведенном ниже примере возвращается «Фиг», поскольку, как вы знаете, массивы основаны на индексе 0.

const fruits  =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];
const result = fruits.find((element, index) => {return index === 0});
console.log(result);
//  => Fig

Или мы хотим найти другой элемент длиной 6 символов, начиная с index 1 и до первого совпадения, мы можем сделать это, написав такой код. Приведенный ниже фрагмент кода возвращает «Виноград», поскольку JavaScript начинает итерацию по этому массиву с index 1, т.е. «Яблоки», до первого совпадения «Виноград» , и тогда будет возвращено то первое совпадение.

const fruits  =
[
"Fig",
"Apples",
"Blueberries",
"Grapes",
"Apricot",
"Kiwi",
"Strawberry"
];
const result = fruits.find((element, index) => {if (element.length === 6 && index > 1) return true});
console.log(result);
// => Grapes

Параметр индекса для объектов.

Та же логика применима к массиву объектов; вот код для возврата объекта в index 2:

const fruits  =
[
{fruit: "Fig", count: 10},
{fruit: "Apples", count: 5},
{fruit: "Apples", count: 50},
{fruit: "Blueberries", count: 123},
{fruit: "Grapes", count: 7},
{fruit: "Apricot", count: 45},
{fruit: "Kiwi", count: 73},
{fruit: "Strawberry", count: 11}
];
const result = fruits.find((element, index) => {return index === 2});
console.log(result);
// => { fruit: 'Apples', count: 50 }

⭐️💥 Какие выводы? 💥⭐️

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

  • Метод Find () вызывается для массива.
  • Метод Find () принимает функцию в качестве аргумента. Это позволяет нам определить условие, которому должен соответствовать элемент, что позволяет выполнять более сложный поиск.
  • Метод Find () возвращает первый элемент в массиве, удовлетворяющий условию.
  • Метод Find () возвращает значение элемента, удовлетворяющего условию.
  • Метод Find () возвращает значение undefined, если ничего не найдено / если нет подходящего элемента.

Если вы найдете эту информацию полезной, подписывайтесь на меня! Надеюсь, вам понравилось это краткое руководство по методу Find () в JavaScript, будьте сильны и следите за обновлениями.