Инициализация длины массива в JavaScript: new Array() vs []

Быстрый ответ

В JavaScript можно создать массив с заранее определённой длиной и заданным значением по умолчанию следующим образом:

let myArray = Array(10).fill(0); // Создан массив из десяти элементов, каждый из которых равен нулю.

Метод .fill() помогает установить одно и то же значение для всех элементов массива.

Стратегии создания массивов

Рассмотрим различные методы создания массивов с установленной длиной и значениями по умолчанию, используя средства JavaScript.

Array.from — настраиваемое создание

Метод Array.from позволяет формировать массивы согласно заданным параметрам:

let indexArray = Array.from({length: 5}, (_, i) => i); // Создание массива с элементами от 0 до 4

Функция преобразования предоставляет возможность работы с индексами и позволяет формировать массивы с использованием этих индексов, а также преобразовывать структуры, похожие на массив, и итерируемые объекты в полноценные массивы.

Подробнее об этом расскажет наш спикер на видео

Использование спред-оператора для создания массива

Спред-оператор ... вместе с Array(n) позволяет генерировать массивы:

let undefinedArray = [...Array(5)]; // Создан массив из пяти непроинициализированных элементов

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

Прямая установка размера

Обычная установка свойства length – вполне допустимый способ задания размера массива:

let arr = [];
arr.length = 5; // Теперь массив arr содержит пять непроинициализированных элементов.

Это простой и наглядный способ определения размера массива.

Эффективные методы инициализации массива

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

Осторожно при использовании fill()

Применение .fill() с вложенными структурами может принести неприятные сюрпризы:

let matrix = Array(3).fill([]); // Все вложенные массивы ссылаются на один и тот же массив.

Для создания независимых массивов оптимальнее использовать .map() и ...Array():

let twoDArray = [...Array(3)].map(x => []); // Создание трех независимых пустых массивов

Это поможет избежать общих ссылок и гарантировать уникальность каждого подмассива.

forEach и неинициализированные значения

Метод .forEach не обрабатывает неинициализированные значения, но в сочетании с .fill() он может оказаться полезным:

Array(3).fill().forEach((_, i) => console.log(i)); // Выводит 0, 1, 2

Учёт крайних случаев

Будьте осторожны с неочевидным поведением new Array():

let array = new Array('5'); // Создается массив с одним элементом '5', а не пятью.

В TypeScript используйте .fill(0) для предотвращения появления undefined при типизации.

Широкие возможности инициализации массивов

Для более изящного создания массивов вы можете использовать функции-генераторы и шаблонные строки:

let grid = Array.from({length: 3}, (_, row) => Array.from({length: 3}, (_, col) => `${row}:${col}`));

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

Визуализация

Разберем создание массива длиной в 5 элементов:

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

let movieScenes = new Array(5); // Массив для пяти сцен, который ещё предстоит заполнить.

Элементы массива пока пусты, но уже готовы принять данные.

Мастер-класс: Тонкости синтаксиса

В работе с массивами рекомендуется использовать let вместо var для соблюдения правил блочной области видимости. Это поможет избежать недоразумений со скоупом. Для оценки производительности инициализации массива вы можете использовать сайт jsperf.com.

Полезные материалы

1. Array – JavaScript | MDN — Полное руководство по работе с массивами в JavaScript.
2. Arrays — Практическая информация о массивах и интерактивные примеры работы с ними.
3. JavaScript Arrays — Введение в основные и продвинутые работы с массивами.
4. Array: length – JavaScript | MDN — Документация по свойству length.
5. ECMAScript 2017 — Языковые спецификации для синтаксиса и инициализации массивов.
6. Understanding JavaScript Arrays — Тщательный анализ функционирования массивов в JavaScript.