Эффективный поиск по массивам при помощи методов includes и indexOf

Поиск элемента в массиве — знакомство с методом indexOf

Чтобы определить расположение элемента в массиве, можно воспользоваться методом indexOf(). Он возвращает индекс первого вхождения элемента, либо -1, если он не найден.

Ниже приведен синтаксис метода indexOf():

Метод indexOf() принимает два аргумента. searchElement -это элемент, который нужно найти в массиве. fromIndex – это индекс массива, с которого нужно начать поиск.

Аргумент fromIndex в качестве значения может принимать как положительное, так и отрицательное целое число. Если значение аргумента fromIndex будет отрицательным, метод indexOf() начнет поиск по всему массиву плюс значение fromIndex. Если опустить аргумент fromIndex, то метод начнет поиск с элемента .

Учтите, что метод JavaScript array indexOf() при сравнении searchElement с элементами в массиве, использует алгоритм строгого равенства, схожий с оператором “тройное равно” (===).

Функции для работы с массивами (методы объекта Array)

Объект Array содержит следующие методы (функции) для работы с массивами:

• slice
• splice
• join
• split
• reverse
• sort

slice — копирование участка массива

Метод slice предназначен для копирования участка массива. При этом он не изменяет исходный массив, а возвращает в качестве результата новый массив, состоящий из выбранных элементов.

Метод slice имеет 2 параметра:

• 1 параметр (обязательный) — предназначен для указания индекса элемента, с которого необходимо начать копировать элементы;
• 2 параметр (необязательный) — предназначен для указания индекса элемента, до которого необходимо копировать (при этом он не включается в новый массив). Если его не указать, то будут скопированы элементы до конца указанного массива.

splice — изменение содержимого массива

Метод splice предназначен для изменения содержимого массива. Он может использваться как для добавления элементов в массив, так и для их удаления.

Синтаксис метода splice:

Примеры использования метода splice.

Применения метода splice для удаления части элементов из массива.

Применение метода splice для удаления элемента из массива и добавления в него новых.

Применение метода splice только для добавления новых элементов в массив.

join — преобразование массива в строку

Метод join предназначен для соединения всех элементов массива в строку.

Синтаксис метода join:

Пример.

Если в качестве separator использовать не строку, то он будет преобразован к строке.

Видео

— Искать значение элемента

Когда мы «ищем значение элемента», то по сути мы просто проверяем, существует ли в нашем массиве такое значение. Нам эту проверку нужно сделать всего один раз, до первого нахождения значения в элементе массива.

То есть когда алгоритм бежит по массиву и находит первое встречное нужное нам значение, то алгоритм просто возвращает нам ИСТИНУ (true). Мы как-бы убедились, что такое значение УЖЕ СУЩЕСТВУЕТ и можно делать другую часть задач.

Для такого варианта лучше всего подходит метод includes() для экземпляров класса Array.

Пример из жизни

Вы строите одноэтажные дома. У вас есть база данных людей, которые заказывали у вас услугу строительства дома. К вам пришёл человек с жалобой на оказанную услугу спустя 15 лет. Вы знаете его ФИО. Вы пробегаете по массиву и сопоставляете ФИО. Вам нужно проверить в массиве человека.

Если этот человек действительно заказывал услугу у вас, то вам вернётся TRUE (истина). После этого вы можете предложить ему экспертизу.

Если этот человек НЕ заказывал услугу у вас, то вам вернётся FALSE (ложь). После этого вы можете предложить ему поискать документы, в которых указана другая строительная компания, а не ваша.

Методы, которые можно заменить

В конце этой статьи будет рассказано о методах, которые образованы из вышеописанных методов и могут быть легко заменены чем-нибудь другим. Необязательно отказываться от этих методов, просто помните, что есть альтернатива.

push

При работе с массивами этот метод используется довольно часто. Фактически он добавляет один элемент в конец массива. Метод push() также иногда используется для создания нового массива на основе уже существующего.

Если вам нужно создать новый массив на основе уже существующего (как в itemsIncremented), то можно воспользоваться известными методами map(), filter(), reduce(). Например, с помощью map() создание нового массива выглядело бы так:

const itemsIncremented = todoItems.map(x => x + 1)

А если нужно будет добавить новый элемент в конец массива, кроме push() можно использовать spread-оператор:

splice

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

Всё бы хорошо, но как в таком случае удалить несколько элементов? Используя slice(), конечно:

shift

Этот метод удаляет первый элемент массива и возвращает его. Подобного  можно добиться с помощью spread или rest операторов:

unshift

С помощью этого метода можно добавлять элементы в начало массива. Как и в предыдущем случае, unshift() можно заменить spread-оператором:

Значения параметров

Параметр	Описание
function	Функция обратного вызова, которая будет выполнена один раз для каждого элемента в массиве, пока не вернет логическое значение true, или достигнет конца массива, возвращая при этом undefined. Функция принимает следующие параметры: currentValue — значение текущего элемента index — индекс массива текущего элемента. arr — массив, к которому принадлежит текущий элемент (по которому происходит проход). Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError. Обязательный параметр.
thisValue	Объект, на который может ссылаться ключевое слово this внутри функции обратного вызова. Если параметр thisValue не используется, то в качестве значения this будет использоваться undefined (в конечном счете this будет зависеть от обычных правил контекста выполнения функции). Необязательный параметр.

Поиск в массиве

Если вам нужно найти какое-либо значение в массиве, тогда вы можете использовать следующие методы:

indexOf / lastIndexOf и includes

Эти 3 метода очень схожи, поэтому рассматриваются вместе. Допустим нам нужно определить индекс элемента в нашем массиве со значением Cherry для дальнейшей работы с ним, скажем для замены на Pineapple

Сначала мы получили индекс элемента, затем присвоили ему новое значение. Если данный элемент не будет найден в массиве, то метод indexOf() вернет -1

lastIndexOf() — делает тоже самое, только начинает свой поиск с конца массива.

includes() — ищет значение сначала и возвращает true, если элемент присутствует в данном массиве

Также у этих методов есть второй аргумент — from — он нужен в том случае, если вы хотите начать поиск с определенного элемента.

find() / findIndex()

Эти методы возвращают первый найденный элемент / индекс элемента в массиве и прекращают работу. Возвращается -1 в случае, если элемента нет в массиве.

filter()

Возвращает массив из всех элементов, которые удовлетворяют заданному условию. Возьмем, для более наглядного примера, массив из чисел от 1 до 6 и предположим нам нужно в новом массиве получить только числа меньшие или равные 4:

some() / every()

Проверяют удовлетворяют ли элементы массива заданным условиям.

some() — проверяeт до первого элемента удовлетворяющего условиям и возвращает true или false.

every() — в этом методе каждый элемент должен соответствовать заданному условию.

Описание

Метод find вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт true. Если такой элемент найден, метод find немедленно вернёт значение этого элемента. В противном случае, метод find вернёт undefined. До Firefox 34 функция callback не вызывалась для «дырок» в массивах (bug 1058394).

Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.

Если в метод find был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае в качестве значения this будет использоваться значение undefined.

Метод find не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом find, устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода find, не будут посещены функцией callback. Если существующие, непосещение элементы массива изменяются функцией callback, их значения, переданные в функцию, будут значениями на тот момент времени когда метод find посетит их; удалённые элементы все ещё будут посещены. 

Методы find(), findIndex() и indexOf()

Методы массивов find(), findIndex() и indexOf() легко перепутать друг с другом. Ниже даны пояснения, помогающие понять их особенности.

Метод find() возвращает первый элемент массива, соответствующий заданному критерию. Этот метод, найдя первый подходящий элемент, не продолжает поиск по массиву.

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

Метод findIndex() очень похож на find(), но он, вместо того, чтобы возвращать первый подходящий элемент массива, возвращает индекс такого элемента. Для того чтобы лучше понять этот метод — взгляните на следующий пример, в котором используется массив строковых значений.

Метод indexOf() очень похож на метод findIndex(), но он принимает в качестве аргумента не функцию, а обычное значение. Использовать его можно в том случае, если при поиске нужного элемента массива не нужна сложная логика.

Большинство методов поддерживают «thisArg»

Почти все методы массива, которые вызывают функции – такие как find, filter, map, за исключением метода sort, принимают необязательный параметр thisArg.

Этот параметр не объяснялся выше, так как очень редко используется, но для наиболее полного понимания темы мы обязаны его рассмотреть.

Вот полный синтаксис этих методов:

arr.find(func, thisArg); arr.filter(func, thisArg); arr.map(func, thisArg); // … // thisArg — это необязательный последний аргумент

Значение параметра thisArg становится this для func.

Например, вот тут мы используем метод объекта army как фильтр, и thisArg передаёт ему контекст:

let army = { minAge: 18, maxAge: 27, canJoin(user) { return user.age >= this.minAge && user.age < this.maxAge; } }; let users = [ {age: 16}, {age: 20}, {age: 23}, {age: 30} ]; // найти пользователей, для которых army.canJoin возвращает true let soldiers = users.filter(army.canJoin, army); alert(soldiers.length); // 2 alert(soldiers[0].age); // 20 alert(soldiers[1].age); // 23

Если бы мы в примере выше использовали просто users.filter(army.canJoin), то вызов army.canJoin был бы в режиме отдельной функции, с this=undefined. Это тут же привело бы к ошибке.

Вызов users.filter(army.canJoin, army) можно заменить на users.filter(user => army.canJoin(user)), который делает то же самое. Последняя запись используется даже чаще, так как функция-стрелка более наглядна.

Методы slice() и splice()

Эти методы используются для модификации массива или для возврата некоей части массива.

Метод splice() меняет содержимое массива, удаляя существующие элементы или заменяя их на другие элементы. Он умеет и добавлять в массив новые элементы. Этот метод модифицирует массив.

Следующий пример, если описать его обычным языком, выглядит так: нужно, в позиции массива 1, удалить элементов и добавить элемент, содержащий b.

Метод slice() возвращает неглубокую копию массива, содержащую его элементы, начиная с заданной начальной позиции и заканчивая позицией, предшествующей заданной конечной позиции. Если при его вызове задана только начальная позиция, то он вернёт весь массив, начиная с этой позиции. Этот метод не модифицирует массив. Он лишь возвращает описанную при его вызове часть этого массива.

Поиск элемента

Поиск с начала массива

Метод totype.indexOf возвращает позицию (индекс) элемента в массиве. Если в данном массиве такого элемента нет, вернет -1. Если в массиве несколько элементов с таким значением, вернет индекс первого найденного.

Можно указать начальную точку для поиска, как в предыдущем методе.

Поиск с конца массива

Метод totype.lastIndexOf делает то же самое, но поиск начинает с конца массива. Таким образом, если в массиве несколько одинаковых элементов, будет возвращен последний из них.

totype.find и totype.findIndex

Метод totype.find возвращает первый соответствующий элемент или undefined.

Метод totype.findIndex возвращает индекс первого соответствующего элемента или -1.

Сортировка элементов массива

Сортировка массива выполняется с помощью метода sort(). По умолчанию он сортирует массив в порядке следования символов в кодировке Unicode.

В обратном порядке:

Теги