Методы поиска по массивам JavaScript

Development, Java | Amber | Комментировать запись

В JavaScript вам часто придётся работать с данными из массивов. Обычной задачей будет поиск по массиву значений, отвечающих определённым критериям. Это может быть логическое значение для подтверждения, индекс для позиции значения в массиве или отдельный массив со всеми результатами поиска.

До появления ECMAScript 6, чтобы перебрать всех элементы в массиве и выполнить операции над каждым из них, вы, вероятно, воспользовались бы циклом  for. Но теперь есть несколько встроенных служебных методов, которые решают распространённые задачи по поиску значений в массиве.

Из этой статьи вы узнаете о методах Array.includes(), Array.indexOf, Array.find(), и Array.filter.

Требования

Чтобы следовать этим инструкциям, вам нужно знать, как устроена Работа с массивами в JavaScript.

Метод includes()

Метод includes() возвращает значение true или false на запрос о существовании нужного элемента в массиве.

Базовый синтаксис выглядит так:

arr.includes(valueToFind[, fromIndex]);

Первый параметр, valueToFind, – значение, которое должно совпасть в массиве. Второй параметр, fromIndex, дополнительный, он задает индекс, с которого следует начинать сравнение. По умолчанию это 0, так что поиск произойдёт по всему массиву.

Вот пример массива с фактами об аллигаторах:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

Затем используем метод includes(), чтобы проверить, существует ли в массиве строка “thick scales”:

alligatorFacts.includes("thick scales");

Этот код вернет true, потому что в массиве есть такая строка.

Если бы мы добавили параметр fromIndex, чтобы сравнение происходило после  “thick scales”, код вернул бы false:

alligatorFacts.includes("thick scales", 1);

Обратите внимание на несколько важных моментов.

Метод .includes() использует строгое сравнение.

alligatorFacts.includes(80);

Этот код вернет true, потому что числовое значение 80 находится в массиве.

alligatorFacts.includes(’80’);

Этот код вернет false, потому что строчное значение ’80’ отсутствует в массиве.

Метод .includes() полезен в тех случаях, когда нужно узнать только, существует ли значение в массиве.

Метод indexOf()

Метод indexOf() возвращает первый индекс значения в массиве.  Если совпадений нет, метод возвращает -1.

Базовый синтаксис выглядит так:

arr.indexOf(searchElement[, fromIndex])

Вернёмся к примеру массива фактов про аллигаторов:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

Воспользуемся методом indexOf, чтобы получить первый индекс строки “rounded snout”:

alligatorFacts.indexOf("rounded snout");

Получаем индекс строки “rounded snout” – 4.

alligatorFacts.indexOf("soft and fluffy");

В этом примере получаем -1, т.к. этой строки нет в массиве.

alligatorFacts.indexOf(80)

В этом примере получаем 1.

alligatorFacts.indexOf(80, 2);

В этом примере код вернёт -1, т.к. данное значение не существует после индекса 2.

Примечание: Если вы не ищете первый результат, используйте метод lastIndexOf(). Он похож на indexOf, но будет искать первое с конца совпадение для индекса массива.

Метод indexOf полезен, если вы ищете только один индекс из выдачи поиска.

Метод find()

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

Базовый синтаксис выглядит так:

arr.find(callback(element[, index[, array]])[, thisArg])

Давайте снова взглянем на наш пример:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout"];

Затем используем find(), чтобы получить первое значение длиной менее 13 символов:

alligatorFacts.find(el => el.length < 13);

В этом примере используется только параметр callback.

80 – числовое значение. “rounded snout” не подходит, там 13 символов. В строке “thick scales” 12 символов, а в “4 foot tail” – 11, оба подходят по условиям функции. Но метод find() вернет только первое значение, “thick scales”.

А вот пример, в котором используется дополнительный параметр index:

alligatorFacts.find((el, idx) => typeof el === "string" && idx === 2);

Строки “thick scales”, “4 foot tail” и “rounded snout” подходят по первому условию (typeof el === ‘string’). Будь это единственным условием, код вернул бы первую строку  – “thick scales”. Но второе условие, индекс (idx === 2), заставит код вернуть значение “4 foot tall”.

Примечание: Если вы ищете индекс, а не значение, используйте findIndex(). Этот метод тоже принимает функцию, но возвращает индекс совпадающего элемента, а не сам элемент.

Метод find() полезен в тех случаях, когда вам нужно одно значение результатов поиска.

Метод filter()

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

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
  // return element for newArray, if true
}[, thisArg]);

Снова вернёмся к примеру с массивом фактов про аллигаторов:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

Затем используем метод filter(), чтобы вернуть все значения, равные 80:

alligatorFacts.filter(el => el === 80);

Два значения в массиве соответствуют этому условию. Поэтому код вернёт новый массив: [80, 80].

Метод filter() полезен в тех случаях, когда вам нужно несколько значений результатов поиска.

Заключение

Из этой статьи вы узнали о методах Array.includes(), Array.indexOf, Array.find() и Array.filter. Они предлагают ряд решений для ваших задач.

• Вам нужно знать только, существует ли элемент?
  • Используйте includes().
• Вам нужно найти сам элемент?
  • Используйте find() для одного элемента или filter()для нескольких.
• Вы ищете индекс элемента?
  • Используйте indexOf() для поиска примитива или findIndex() для поиска с помощью функции.

Продолжайте изучать JavaScript с помощью методов итераций, методов доступа и модификаторов.