JavaScript Метод массива find()

JavaScript Метод массива find()

В этой небольшой статье мы разберем темы, которые кажутся особенно сложными при самостоятельном изучении JS.Одной из таких тем – это метод поиска массива JavaScript. Сегодня мы разберем этот метод на части и попытаемся понять метод массива find()!

Оглавление

  • Сводка
  • Пример поиска массива JS
  • Изменение кода для учета регистра
  • Заключение

Сводка

Метод поиска массиа поиска массива JavaScript find() состоит из двух часте: find() и findIndex(). Мы рассмотрим findIndex() в отдельной статье . Цель метода find() вернуть значение первого найденного в массиве элемента, которое удовлетворяет критериям поиска.

Это означает, что на самом деле вы ищете строки или числа (значения) вместо индексов. Давайте рассмотрим на примере ниже.

Пример поиска массива JS

Предположим, у нас есть массив объектов разных книг.

const books = [

{

title: "War and Peace",

author: "Leo Tolstoy"

},

{

title: "Harry Potter and the Order of the Phoenix",

author: "J. K. Rowling"

},

{

title: "Northern Lights The Subtle Knife",

author: "Philip Pullman"

}

]

> Язык кода: JavaScript (javascript)

Теперь предположим, что мы хотим найти конкретную книгу, выполнив поиск по его титулу (title). И я имею в виду фактическое имя (тип строка typeOf string). Вот тут нам и пригодиться метод find()!

const findBook = function(array, title) {

return array.find(function(item) {

return item.title === title;

});

};

const foundBook = findBook(books, "War and Peace")

console.log(foundBook)

Вывод этого кода будет:

{ title: 'War and Peace', author: 'Leo Tolstoy' }

Язык кода: Баш (bash)

Итак, давайте разбираться! Мы пройдемся по коду строка за строкой.

const findBook = function(array, title) { // <-Вот тут

};

> Язык кода: JavaScript (javascript)

Очевидно, это объявление нашей функции с двумя аргументами: сам массив и еще анонимный аргумент с именем title.

Затем мы создаем функцию find() массива JavaScript

const findBook = function(array, title) {

return array.find(function(item) { // <-Вот тут

});

};

Теперь мы фактически добавляем метод array.find() в наш код. Метод find() состоит из функции обратного вызова (callback), которая принимает аргумент, вы можете назвать его как хотите. Мы называем это элементом, это просто имя-заполнитель, но элемент — это, по сути, значение, которое возвращается из итерации через наш массив, поэтому мы сравниваем это значение с нашим title и возвращаем его, как только он находит нашу строку поиска. Эта функция обратного вызова в основном аналогична циклу for, который вы использовали бы для перебора массива.

Наконец, мы проверяем, совпадает ли books.title с нашей поисковой строкой title.


const findBook = function(array, title) {

return array.find(function(item) {

return item.title === title; // <-Вот тут

});

};

> Язык кода: JavaScript (javascript)

Это вернет нам значение первого совпадающего элемента в массиве, если совпадений не найдено, будет возвращено значение undefined.

Давайте посмотрим на весь код еще раз:

const books = [

{

title: "War and Peace",

author: "Leo Tolstoy"

},

{

title: "Harry Potter and the Order of the Phoenix",

author: "J. K. Rowling"

},

{

title: "Northern Lights The Subtle Knife",

author: "Philip Pullman"

}

]

const findBook = function(array, title) {

return array.find(function(item) {

return item.title === title;

});

};

const foundBook = findBook(books, "War and Peace")

console.log(foundBook)

> Язык кода: JavaScript (javascript)

В конце кода мы просто создаем переменную с именем foundBook, которая вызывает функцию с двумя аргументами: массивом и строкой, которую мы хотим найти в нашем объекте массива.

Еще раз, результат этого кода:

{ title: 'War and Peace', author: 'Leo Tolstoy' }

Изменение кода для учета регистра

Вы, вероятно, уже видите, где это может стать проблемой, строковое значение, которое мы вводим для нашего поиска, чувствительно к регистру, поэтому, если мы будем искать «war and Peace» вместо «War and Peace», мы получим следующий результат:

undefined

> Язык кода: JavaScript (javascript)

К счастью, есть простой способ исправить это: метод toLowerCase() (или toUpperCase(), какой вам больше по вкусу!). Нам просто нужно изменить вторую возвращаемую часть кода следующим образом:

const findBook = function(array, title) {

return array.find(function(item) {

return item.title.toLowerCase() === title.toLowerCase();

}); // <-Вот тут (toLowerCase())

};

> Язык кода: JavaScript (javascript)

Ну вот — теперь наш код пуленепробиваем.

Заключение

Я надеюсь, что после прочтения этой статьи вам будет проще понять, как работает метод поиска массива JavaScript. Оставляйте любые предложения по коду в комментариях ниже и продолжайте учиться!

Если вы также заинтересованы в том, чтобы узнать, как написать это на Python – Патрик (Python Engineer) написал об этом потрясающую статью здесь.

0 0 голоса
Rate article
Подписаться
Уведомить о
guest

0 Comments
Межтекстовые Отзывы
Посмотреть все комментарии
error: Контент защищен от копирования!
Этот сайт использует куки для улучшения вашего просмотра. Ваши личные данные находятся в безопасности