В этой небольшой статье мы разберем темы, которые кажутся особенно сложными при самостоятельном изучении 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) написал об этом потрясающую статью здесь.
