Массивы JavaScript: упорядоченные данные по индексу

Массив JavaScript хранит упорядоченную коллекцию значений с целочисленными индексами. Используйте массивы, когда важен порядок: списки, очереди и любые данные, где позиция имеет значение. Доступ по индексу выполняется мгновенно (O(1)) независимо от размера массива, а length автоматически отслеживает его размер.

Пример массива JavaScript для создания и доступа к данным

Вывод:

красный
3
[
  "красный",
  "зеленый",
  "синий",
  "желтый"
]

Как работает этот пример

1. ["красный", "зеленый", "синий"] создаёт массив из трёх элементов через литеральный синтаксис с квадратными скобками — стандартный способ объявить массив JavaScript с начальными значениями.
2. colors[0] читает первый элемент. В массивах используется индексация с нуля: индекс 0 — первый элемент, 1 — второй и так далее.
3. colors.length возвращает количество элементов. Значение обновляется автоматически при добавлении или удалении элементов.
4. colors.push("желтый") добавляет элемент в конец. Исходный массив изменяется на месте.

Что такое массив JavaScript?

Массивы JavaScript — это объекты, оптимизированные для числовых индексов: свойство length автоматически обновляется при добавлении или удалении элементов, а встроенные методы map, filter, reduce и forEach проходят по элементам в порядке индексов. Чтобы надёжно определить массив, используйте Array.isArray(value), потому что typeof [] возвращает "object".

Частые ошибки при работе с массивами JavaScript

Использовать new Array(n) для создания массива из одного элемента.

Неправильно:

const items = new Array(3); // 3 пустых слота, а не [3]

Правильно:

const items = [3]; // массив, содержащий число 3

Один числовой аргумент задаёт length и создаёт пустые слоты, а не элемент.

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

Неправильно:

const a = Array(3).map((_, i) => i); // [empty × 3]

Правильно:

const a = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

map пропускает пустые слоты. Array.from создаёт определённые элементы, поэтому колбэк выполняется для каждого индекса.

Мутирующие и немутирующие методы массива

В ES2023 добавлены toReversed(), toSorted(), toSpliced() и with() — немутирующие аналоги методов, которые изменяют массив на месте. Если нужны и исходный порядок, и отсортированный результат, выбирайте toSorted(), а не sort().

Соображения по производительности

push и pop работают с концом массива за O(1). shift и unshift переиндексируют каждый элемент, поэтому их сложность O(n). В горячих циклах избегайте операций с началом больших массивов.

Больше примеров

Массив массивов — доступ к вложенным данным:

const matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix[1][0]); // 3

Каждый элемент сам является массивом. Массив массивов в JavaScript — простой способ смоделировать сетку, а двойная индексация [row][col] позволяет получить внутренние значения.

Стек с push и pop:

const stack = [10, 20, 30];
stack.push(40);
console.log(stack.at(-1)); // 40
stack.pop();
console.log(stack);        // [ 10, 20, 30 ]

push добавляет в конец, pop удаляет с конца — оба метода работают за O(1). at(-1) читает последний элемент без знания длины массива.

Когда использовать массивы JavaScript

• Упорядоченные коллекции, где важен доступ по позиции (списки, очереди, стеки).
• Любая последовательность, которая должна расти или уменьшаться: push/pop для стека, push/shift для очереди.
• Группированные данные, представленные как массив массивов (строки, столбцы, матрица).
• Не используйте массивы для поиска по ключу-значению — вместо этого применяйте Map или обычный объект.
• Не используйте массивы, когда каждый элемент должен быть уникальным — используйте Set.

FAQ

Как создать массив JavaScript с начальными значениями?

Используйте синтаксис с квадратными скобками: const colors = ["красный", "зеленый", "синий"]. Это предпочтительный литеральный синтаксис. Array.of(1, 2, 3) тоже работает, но редко нужен вне полиморфного кода, где new Array(n) может быть неоднозначным.

Какие методы массива JavaScript изменяют исходный массив?

push, pop, shift, unshift, splice, sort, reverse и fill изменяют массив на месте. Современные альтернативы вроде toSorted, toReversed и toSpliced (ES2023) возвращают новые массивы без изменения исходного.

Как проверить, является ли значение массивом в JavaScript?

Вызовите Array.isArray(value). Этот способ работает между iframe и realm-контекстами, в отличие от instanceof Array, который ломается, если массив создан в другом контексте выполнения.