Все о массивах в JavaScript в 1 статье

От автора: все, что нужно знать о том, как работают в JavaScript массивы и мой любимый метод reduce(). Массивы – это аккуратный способ хранения непрерывных элементов в памяти в виде одной переменной. Элементы в массиве доступны по индексам. Индексы массива начинаются с 0.

Давайте создадим пустой массив разными способами.

Массивы в JS обозначаются квадратными скобками []. Взять длину массива или количество элементов в нем можно с помощью свойства length.

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

Например:

Рекомендуемый способ использования [] для создания массивов

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

Все примеры далее будут использовать [].

Давайте сохраним пару значений в массив и обратимся к ним по индексу

Заметка: в массиве можно хранить что угодно, но для лучшей производительности храните данные только одного типа в одном массиве. Например, массив текста, чисел, объектов и т.д. Не смешивайте типы (по крайней мере, старайтесь избегать этого).

Обратиться к элементам массива можно по индексу следующим образом.

Добавление элементов в массив

Добавление элементов в конец массива (метод push)

Добавим пару элементов в конец массива. Для этого используем метод push().

Заметка: метод push() мутирует массив. Для удаления элементов из массива используйте метод pop().

Добавление элементов в начало массива (unshift)

Добавим пару элементов в начало массива. Для этого используем метод unshift().

Заметка: unshift() мутирует массив.

Чтобы добавить несколько элементов в начало массива, просто передайте необходимые аргументы в метод unshift.

Добавление элементов в начало массива ES6 (оператор расширения)

Добавление элементов в конец массива ES6 (оператор расширения)

Заметка: способ с ES6 не мутирует массив и возвращает новый обновленный массив.

Удаление первого элементов из массива -> метод shift()

Метод shift() удаляет первый элемент из массива и возвращает его. Этот метод меняет длину массива. Если массив пуст, возвращается undefined.

Удаление части массива, разрезание -> метод slice()

Slice method MDN Reference – довольно полезный метод, позволяющий отрезать массив с любой точки.

Метод slice() возвращает копию части массива в виде нового объекта массива с выбранными begin и end (end не включительно). Исходный массив не меняется.

Разберем несколько примеров.

Удаление/добавление части массива -> метод splice()

Метод splice() меняет контент массива путем удаления существующих элементов и/или добавления новых. Используйте аккуратно, метод мутирует массив.

Полная документация MDN splice.

Параметры

Индекс start – откуда начинается изменение массива (изначально 0).

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

item1, item2, … (необязательные параметры) – элементы, которые необходимо удалить из массива, начиная со start. Если элементы не заданы, splice() удалит только элементы из массива.

Возвращаемое значение

Массив удаленных элементов. Если удален 1 элемент, возвращается массив из одного элемента. Если элементы не удалены, возвращается пустой массив.

Удаление последнего элемента из массива -> метод pop()

Метод pop() удаляет последний элемент из массива и возвращает его. Метод меняет длину массива.

Слияние двух массивов -> метод concat()

Метод concat() используется для слияния двух и более массивов. Метод не меняет существующие массивы и возвращает новый.

Слияние двух массивов ES6 (оператор расширения)

Объединение массивов -> метод join()

Метод join() объединяет все элементы массива (или массивоподобного объекта) в строку и возвращает ее. Очень полезный метод.

Вывод

Перебор массива в цикле

Существуют разные способы перебора массива в цикле. Разберем простой пример.

Перебор массива в цикле – цикл  forEach

Цикл forEach принимает в качестве параметра функцию (обычную или стрелочную) и дает доступ к отдельному элементу массива в виде параметра этой функции. Функция принимает 2 параметра: первый – массив элементов, второй – индекс.

Как получить доступ к индексу в forEach. Ниже я использую стрелочную функцию, но способ работает и для ES5 функций.

Поиск элементов в массиве – метод find

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

Возвращаемое значение

Если элемент прошел тест, значение в массиве, иначе undefined.

Перебор массива – цикл for in

Цикл for…in работает только с перечисляемыми свойствами. Так как массивы перечисляемые, поэтому он работает с ними.

Цикл перебирает все перечисляемые свойства самого объекта и объектов, наследуемых от прототипа конструктора (свойства, расположенные ближе к объекту в цепочке прототипа, переписывают свойства прототипа).

Более подробно на MDN for in.

Заметьте, что в коде сверху каждый раз в цикле создается переменная index.

Перебор массива в цикле – функция map

Функция map() позволяет трансформировать массив в новый объект и вернуть новый массив на основе переданной функции.

Это очень мощный метод в руках JS разработчика.

Заметка: map всегда возвращает одно и то же количество выводных данных, но он может изменить тип этих данных. Например, если массив содержит 5 элементов, map вернет 5 трансформированных элементов.

Функция, передаваемая в map, принимает 3 параметра.

Map() – пример 1 – простой

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

Map() – пример 2 – простая трансформация

Возьмем входной объектный литерал и трансформируем его в пару ключ/значение.

Например, возьмем массив ниже.

И трансформируем его в пару ключ/значение, как показано ниже.

Код верхней трансформации с выводом.

Map() – пример 3 – возвращаемый поднабор данных

Разберем пример ниже

Нам нужно вывести name от tasks. Реализация:

И вывод.

Перебор массива в цикле – функция filter

Filter возвращает поднабор массива. Метод полезен, когда нужно найти записи в коллекции записей. Колбек функция для filter должна возвращать true или false. Значение true включает запись в новый массив, а false исключает запись из нового массива.

Возвращается новый массив. Разберем пример массива.

Давайте с помощью filter найдем все tasks с rating 5. Код и результат.

И вывод.

В функции filter у нас всего 1 значение, поэтому ее можно укоротить до следующего вида:

Заметка: функция filter не трансформирует вывод в новый массив.

Перебор массива в цикле – функция reduce

Функция reduce проходит в цикле по массиву и может вернуть уменьшенный набор. Это очень мощная функция. Мне кажется, мощнее других методов работы с массивами (хотя у каждого метода своя роль).

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

Reduce – простой пример 1

Заметка: при первом вызове колбека accumulator и currentValue могут быть одним из двух значений. Если в вызов reduce() передали initialValue, то accumulator будет равен initialValue, а currentValue будет равно первому значению в массиве. Если initialValue нет, то accumulator будет равен первому значению массива, а currentValue второму.

Мощь reduce() заключается в том, что с его помощью можно реализовать свои map(), find() и filter().

Использование reduce для разбиения данных на категории

Например, у вас есть структура данных ниже, которую вам нужно разбить на категории male и female.

Нам нужно, чтобы вывод был следующим:

Посмотрим код и поймем, как разбить данные на такие категории.

Важный момент в коде выше – функцию reduce можно инициализировать со стартовым аккумулятором любого типа. В примере сверху это объектный литерал.

Надеюсь, это точно демонстрирует мощь reduce.

Реализация кастомной функции map() с помощью reduce

Сверху показана реализация кастомной функции map. В функцию сверху мы передаем пустой массив [] как первое значение для аккумулятора. Функция reduce возвращает новый массив со значениями из расширенного аккумулятора и добавляет результат выполнения колбек функции с текущим элементом.

Давайте посмотрим на использование и вывод.

Реализация кастомной функции filter() с помощью reduce

Реализуем метод filter() с помощью reduce().

Посмотрим, как использовать код выше и его вывод. Я мог бы переписать оригинальный Array.prototype.filter, но делаю так, чтобы не манипулировать встроенными методами.

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

Реализация функции foreach с помощью reduce

Разберем реализацию своей функции foreach.

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

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

Дыры в массивах

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

Сейчас иметь дыры в массиве плохо с точки зрения производительности. Разберем пример.

Не используйте delete на массиве, если не знаете точно, что делаете. Метод delete не меняет длину массива. Избежать дыр в массиве можно с помощью методов splice(), pop() или shift().

Изменение длины массива и дыр

Вы можете быстро изменить длину массива.

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

Автор: Rajesh Pillai

Источник: //codeburst.io/

Редакция: Команда webformyself.

Комментарии Вконтакте: