Массивы JavaScript

Введение в массивы JavaScript

Массив JavaScript — это упорядоченная коллекция значений с целочисленными индексами. В отличие от объектов, которые хранят именованные свойства без гарантированного порядка, array сохраняет элементы в определённой последовательности и позволяет обратиться к любому из них по позиции (его индексу). Индексы начинаются с 0, поэтому первый элемент находится по индексу 0, второй — по индексу 1, и так далее.

Массивы — одна из наиболее часто используемых структур данных в языке, поскольку они могут содержать значения любых типов: числа, строки, boolean-значения, объекты и даже другие массивы — и автоматически увеличиваются или уменьшаются по мере добавления и удаления элементов. На этой странице рассмотрены создание массивов, изменение их содержимого, перебор элементов, преобразование и поиск, а также практики, позволяющие поддерживать читаемость кода с активным использованием массивов.

Создание и инициализация массивов

Наиболее распространённый способ создания массива — синтаксис литерала array: список значений, разделённых запятыми, в квадратных скобках:

let fruits = ["Apple", "Banana", "Cherry"];

Можно также использовать конструктор new Array(), однако он редко применяется и имеет неочевидное поведение: если передать одно число, оно задаёт длину массива, а не добавляет это число как элемент.

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

Доступ к элементам и свойство length

Чтобы прочитать или заменить элемент, используйте его индекс; для получения общего количества элементов — свойство length. Присвоение значения по индексу за пределами текущего конца расширяет массив.

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

Четыре метода работают с двумя концами массива. Обратите внимание, какое значение возвращает каждый из них — это частая причина ошибок.

• push() — добавляет один или несколько элементов в конец и возвращает новую длину.

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

• unshift() — добавляет один или несколько элементов в начало и возвращает новую длину.

• shift() — удаляет первый элемент и возвращает этот элемент.

Вставка и удаление в середине с помощью splice()

push/pop/shift/unshift работают только с концами массива. Чтобы добавить, удалить или заменить элементы в любом месте, используйте splice(start, deleteCount, ...itemsToInsert). Метод изменяет массив на месте и возвращает array удалённых элементов.

Копирование части массива с помощью slice()

slice(start, end) возвращает поверхностную копию части массива, не изменяя оригинал. Элемент по индексу end не включается.

Перебор элементов

Существует несколько способов пройти по массиву. Используйте цикл for...of или forEach(), когда нужно просто получить каждое значение; прибегайте к циклам с индексом лишь тогда, когда индекс действительно необходим. (Полный набор форм циклов см. в главе о циклах.)

• for...of — самый лаконичный способ последовательно читать каждое значение.

• forEach() — вызывает функцию обратного вызова для каждого элемента, передавая значение, индекс и сам массив.

Преобразование массивов

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

• map() — создаёт новый массив, преобразуя каждый элемент.

• filter() — создаёт новый массив только из элементов, прошедших проверку.

• reduce() — сводит весь массив к единственному значению, накапливая результат. Принимает функцию обратного вызова (accumulator, current) и начальное значение.

Поскольку map и filter каждый возвращают массив, их можно объединять в цепочки:

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

• includes() — возвращает true/false в зависимости от того, присутствует ли значение. indexOf() возвращает индекс значения или -1, если оно не найдено.

• find() и findIndex() — возвращают первый элемент (или его индекс), удовлетворяющий функции проверки.

Сортировка массивов

sort() упорядочивает элементы на месте и возвращает тот же массив.

Преобразование массивов в строки

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

Расширенные операции с массивами

Многомерные массивы

Поскольку массив может содержать другие массивы, с их помощью можно моделировать сетки и матрицы. Для обращения к внутреннему значению используйте два индекса — matrix[row][column].

Оператор расширения

Оператор расширения (...) разворачивает итерируемый объект — массив или строку — в отдельные элементы там, где ожидается несколько значений. Это современный способ комбинировать и копировать массивы. (О связанной форме сбора элементов см. rest-параметры и синтаксис spread.)

• Объединение массивов:

• Копирование массива (поверхностная копия, оригинал остаётся неизменным):

• Передача элементов массива как аргументов функции:

Деструктуризация массивов

Деструктуризация распаковывает значения массива в отдельные переменные в одном выражении. (Та же идея применима к объектам — см. деструктурирующее присваивание.)

• Перестановка переменных без временной переменной:

• Значения по умолчанию заполняют пропущенные позиции:

Лучшие практики работы с массивами

• Объявляйте с const, когда ссылка на массив не меняется. const лишь запрещает переприсвоение переменной — вы по-прежнему можете вызывать push, pop и редактировать элементы, поскольку содержимое массива не заморожено.

• Отдавайте предпочтение map, filter и reduce перед ручными циклами при преобразовании данных — они описывают намерение и возвращают новые массивы вместо изменения общего состояния.
• Используйте оператор расширения для копирования перед изменением, если хотите избежать изменения исходного массива.
• Всегда передавайте функцию сравнения в sort() при работе с числами.

Заключение

Массивы — основа работы с данными в JavaScript: упорядоченные, индексированные и динамически масштабируемые. Как только вы усвоите, какие методы изменяют массив (push, pop, splice, sort), а какие возвращают новые значения (map, filter, slice, reduce), вы сможете уверенно работать с коллекциями. Дополните это оператором расширения и деструктуризацией — и получите лаконичный, читаемый код. Затем изучите полный справочник методов array и сравните массивы с объектами JavaScript.

Практика