Методы массивов Javascript: что это такое и как с ними работать

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

Массив — это тип структуры данных в JavaScript для хранения коллекции элементов разных видов (например, строки, цифры, логические значения (true или false) и объекты). Массивы хранят несколько значений в одной переменной — например, [Саша, Стас, Света, Лёша]. Такое хранение позволяет уплотнить код, сделать его более читабельным и удобным.

В массивах JavaScript можно добавлять или удалять элементы

Массивы имеют нулевой индекс. Это значит, что первый массив индексируется как ноль, второй — как один, третий — как два, и т. д. В примере выше имя «Саша» будет нулевым, а «Лёша» — третьим.

Так как массивы имеют нулевой индекс, первое имя по счёту нулевое

Работать с массивами учат на курсе «Фронтенд-разработчик». Студенты с нуля за 10 месяцев научатся использовать CSS+SCSS, HTML, JavaScript и другие языки программирования. За время обучения студенты получат 11 работ для портфолио и помощь с поиском работы.

Рассмотрим пять методов обработки.

1. Создание массива. Есть два способа создавать массивы в JavaScript:

● Литерал [a, b, c] — список элементов в квадратных скобках, как в примере с именами ([Саша, Стас, Света, Лёша]).
● Конструктор массива — инициализируется с помощью new Array() с круглыми скобками.

Допустим, нужно сделать список имён (Саша, Стас, Света, Лёша). Для этого пропишем их с помощью конструктора. Вот что получится:

Так выглядит создание массива с помощью конструктора с круглыми скобками

2. Добавление и удаление элементов. В примере выше было четыре имени, которые состояли из индексов от нуля до трёх. Если добавлять новое имя, нужно прописать значение для следующего индекса. Добавим имя «Лера» и присвоим ему индекс [4].

В массив добавлено имя «Лера»

Если добавить имя без индекса, на месте пропущенного индекса появится неопределённый элемент. При попытке доступа к пустому элементу вернётся неопределённое значение undefined. Для примера попробуем пропустить индекс и посмотрим, что будет.

Удалить элемент из массива можно с помощью метода splice(). Он позволяет изменять содержимое массива, удалять элементы или добавлять новые. Чтобы удалить пустующий элемент из примера выше, пропишем команду names.splice(4);.

Помните, что перечисление элементов (в нашем случае — имён) начинается с нуля. Поэтому удаляем не пятый элемент, а четвёртый

3. Изменение содержимого массива. Можно перезаписать любое значение в массиве, добавив его в список, как делали это выше. Либо применить метод splice(), с помощью которого был удалён ненужный элемент в массиве. Допустим, имя «Лера» нужно заменить на имя «Катя».

Метод splice() помогает быстро менять элементы без написания длинного кода

4. Создание нового массива на основе существующего. Можно создавать абсолютные клоны массива либо частичные дубли с помощью метода slice(). Допустим, из списка имён нужна выборка женских имён.

При использовании метода slice() дубль будет содержать только женские имена. Точно так же можно клонировать массив полностью

5. Объединение массивов. Соединить несколько массивов помогает метод concat(). В примере выше был создан массив женских имён. Допустим, массив мужских имён тоже создан. Попробуем объединить эти два массива в один.

Теперь все имена снова в одном списке

Рассмотрим работу методов поиска и фильтрации на примере массива цифр и имён из примера выше.

Когда нужно убедиться, что элемент есть в массиве, помогут четыре метода.

1. indexOf() — помогает определить индекс первого найденного элемента. Его синтаксис выглядит так:

array.indexOf(searchElement, [fromIndex])

searchElemen — элемент, индекс которого нужно найти, fromIndex — номер индекса, с которого должен начаться поиск. fromIndex применяется, когда область поиска известна. Если его не указывать, поиск начнётся с нуля.

Приведём пример c именами. Допустим, нужно найти имя «Света», которое находится между первым и четвёртым именами. Значит, в строке indexOf указываем имя и номер индекса «1».

indexOf помог найти индекс, где находится нужное имя

2. lastIndexOf() делает то же самое, что indexOf(), только с конца массива. Это значит, что поиск остановится на последнем имени в массиве, даже если до него есть ещё упоминание этого имени. Синтаксис lastIndexOf() выглядит так:

array.lastIndexOf(searchElement, [fromIndex])

Теперь рассмотрим пример, как метод будет искать имя. Допустим, в списке имя «Света» встречается три раза: [Саша, Света, Стас, Света, Лёша, Света, Катя].

Ответ получился «5» — несмотря на то, что имя «Света» упоминается три раза

В этом примере не был указан ограничивающий индекс. Особенность в том, что поиск элемента будет идти ровно до того аргумента, который указан. То есть если в методе indexOf() от указанного индекса начнётся поиск вперёд, то в методе lastIndexOf() начнётся поиск назад. Приведём два примера: укажем нулевое и третье имена.

3. includes() — помогает проверить присутствие элемента в массиве. Метод возвращает true, если элемент найден, и false, если нет. Рассмотрим два примера: в одном укажем имя «Катя», а в другом — «Антон», которого нет списке.

В первом примере имя «Катя» найдено и возвращён ответ true. Во втором примере имя Антон не было найдено и возвращён ответ false

4. find() — применяется для поиска первого элемента в массиве. Если элемент будет найден, то метод его вернёт, если не будет — вернётся неопределённое значение undefined. Обычно find() применяют, когда пытаются найти неизвестный элемент среди известных. Допустим, известно, что среди индексов есть элементы с именами «Катя», «Света», «Стас», «Саша». Задача — найти ещё элементы, о которых ничего неизвестно.

С помощью find() удалось найти элемент «Лёша»

Рассмотрим три способа поиска суммы массива на примере с элементами [1, 2, 3, 4, 5].

1. for — цикл, который выполняет итерацию n раз. Для суммирования чисел создадим массив myNums, внутри него пропишем значения [1, 2, 3, 4, 5]. Затем объявим переменную с именем sum и инициализируем её нулевым значением — эта переменная будет хранить результат вычислений в цикле for.

С помощью цикла for все значения суммировались, получился ответ 15

2. forEach() — перебирает массив и вызывает функцию для каждого элемента. Как в примере выше, создадим массив myNums и объявим переменную с именем sum. Затем на каждой итерации переназначим значение переменной суммы, добавляя её на каждой итерации.

С помощью цикла forEach() все значения суммировались

3. reduce() — метод уменьшения, при котором все элементы сводятся к одному значению. reduce() принимает определяемую пользователем функцию обратного вызова в качестве первого обязательного аргумента. Обратный вызов принимает аргументы:

● accumulator — накапливает возвращаемое значение;
● value — обрабатываемое значение;
● index — индекс обрабатываемого элемента (необязательно);
● array — исходный массив (не обязательно).

Начальное значение указывать не обязательно. Если его нет, обратный вызов возьмёт первый элемент массива и будет использовать его в качестве начального значения. Если указано начальное значение, следующие элементы массива будут работать с ним и накапливать новые результаты.

Функция обратного вызова принимает переменную, в которой хранятся последнее возвращённое значение предыдущего вызова функции (accumulator); и currentValue — текущий элемент массива.

Пример работы метода reduce()

Обратный вызов будет вызываться четыре раза, причём аргументы и возвращаемые значения в каждом вызове будут следующими. Например, вызовы элементов [15, 16, 17, 18, 19] будут такими:
1) 15 + 16 = 31 — первый аргумент;
2) 31 + 17 = 48 — второй аргумент;
3) 48 + 18 = 66 — третий аргумент;
4) 66 + 19 = 85 — четвёртый аргумент.

Метод reverse(): суммировал все элементы по очереди и получил ответ 85

Параметр массива никогда не меняется в процессе — это всегда [15, 16, 17, 18, 19]. Значение, возвращаемое функцией reverse(), будет значением последнего вызова обратного вызова. В нашем случае значение последнего вызова — 85.

Рассмотрим методы сортировки и изменения порядка элементов в массиве.

Метод сортирует элементы массива, то есть изменяет исходный массив. sort() сортирует элементы по возрастанию (sort(a, b) => a – b)) и убыванию (sort((a, b) => b – a)), поэтому его чаще используют для сортировки строк.

Рассмотрим два способа сортировки с элементами [1, 3, 2, 5, 4]:

Можно сортировать элементы не только из цифр. Для этого нужно добавить unicode, который присваивает числовое представление каждому элементу. Выглядит он так: U + 1F(число). Чем меньше число, тем раньше в сортировке будет стоять элемент. Для примера присвоим unicode именам [Саша, Стас, Света, Лёша, Катя]. Допустим, нужно, чтобы в списке сначала шли женские имена, а потом мужские:

1) U+1F121 — Света;
2) U+1F122 — Катя;
3) U+1F123 — Саша;
4) U+1F124 — Лёша;
5) U+1F125 — Стас.

unicode можно присваивать любым элементам — даже эмодзи

Меняет порядок элементов в массиве в противоположную сторону: первый элемент массива становится последним, а последний — первым.

Метод reverse(): поменял порядок элементов справа налево

Для закрепления материала разберём две дополнительные задачи с массивами.

Расставить элементы от меньшего к большему и посчитать их сумму: [22, 13, 45, 1, 5].

Решение. Задача решается в два действия: нужно расположить цифры в правильном порядке с помощью метода sort() и суммировать элементы с помощью метода forEach(). Решение будет таким:

В списке элементов сначала расположить зверей, затем птиц ["Кот", "Ласточка", "Собака", "Воробей", "Ласка"].

Решение. Задача решается в одно действие: нужно упорядочить элементы с помощью метода sort и присвоить элементам unicode:

1) кот — U+1F121;
2) собака — U+1F122;
3) ласка — U+1F123;
4) ласточка — U+1F124;
5) воробей — U+1F125.

Метод unicode упорядочил элементы — от зверей к птицам