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

1. Заполнение массива примитивами

Допустим, вы хотите инициализировать массив длинной 3 элемента нулями. Метод array.fill (initalValue), доступный в экземпляре массива, является удобным способом инициализации массивов: когда вызывается этот метод, весь массив заполняется значениями initialValue и возвращается измененный массив.

Но вам нужно использовать array.fill(initialValue) в сочетании с Array(n) (конструктором массива):

JavaScript const length = 3; const filledArray = Array(length).fill(0); filledArray; // [0, 0, 0]

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Попробуйте демо.

Array(length) создаст масив длиной 3 элемента. Затем метод Array(length).fill(0) заполнит массив нулями, возвращая массив: [0, 0, 0].

Array(length).fill(initialValue) — удобный способ создания массивов желаемой длины, инициализированных примитивными значениями (числом, строкой, логическим значением).

2. Заполнение массива объектами

Что делать, если вам нужно заполнить массив объектами? Это требование имеет несколько нюансов в зависимости от того, хотите ли вы, чтобы массив был заполнен исходными экземплярами объекта или разными экземплярами.

2.1 Использование array.fill()

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

JavaScript const length = 3; const filledArray = Array(length).fill({ value: 0 }); filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

Попробуйте демо.

Array(length).fill({ value: 0 }) создаст массив длинной 3 и присвоит каждому элементу значение {value: 0} (примечание: тот же экземпляр объекта).

Этот подход создает массив с тем же экземпляром объекта. Если вы измените какой-либо элемент, это повлияет на каждый элемент в массиве:

JavaScript const length = 3; const filledArray = Array(length).fill({ value: 0 }); filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }] filledArray[1].value = 3; filledArray; // [{ value: 3 }, { value: 3 }, { value: 3 }]

Попробуйте демо.

Изменение второго элемента массива filledArray[1].value = 3 изменит все элементы в массиве.

2.2 Использование Array.from()

В случае, если вы хотите, чтобы массив заполнялся копиями исходного объекта, вы можете использовать служебную функцию Array.from().

Array.from(array, mapperFunction) принимает 2 аргумента: массив и функцию сопоставления.

Array.from() вызывает mapperFunction для каждого элемента массива, помещает результат в новый массив и, наконец, возвращает вновь созданный массив. Таким образом, метод Array.from() может легко создать и инициализировать массив с различными экземплярами объекта:

JavaScript const length = 3; const filledArray = Array.from(Array(length), () => { return { value: 0 }; }); filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

Попробуйте демо.

Array.from() вызывает функцию сопоставления для каждого пустого слота массива и создает новый массив со всеми значениями, возвращаемыми функцией сопоставления.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Вы получаете заполненный массив с разными экземплярами объекта, потому что каждый вызов функции сопоставления возвращает новый экземпляр объекта.

Если вы измените какой-либо элемент в массиве, это затронет только этот элемент, а остальные останутся нетронутыми:

JavaScript const length = 3; const filledArray = Array.from(Array(length), () => { return { value: 0 }; }); filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }] filledArray[1].value = 3; filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

Попробуйте демо.

filledArray[1].value = 3 изменит только второй элемент массива.

2.3 Использование array.map() с оператором распространения

Вам может быть интересно: зачем использовать Array.from() и его функцию сопоставления, если в массиве уже есть метод array.map()?

Хороший вопрос! При использовании Array(length) для создания экземпляров массива он создает массивы с пустыми слотами:

JavaScript const length = 3; const sparseArray = Array(length); sparseArray; // [empty × 3]

Проблема в том, что array.map() пропускает пустые слоты:

JavaScript const length = 3; const filledArray = Array(length).map(() => { return { value: 0 }; }); filledArray; // [empty × 3]

Попробуйте демо.

Таким образом, использование напрямую Array(length).map(mapperFunc) приведет к созданию разреженных массивов. К счастью, вы можете использовать оператор распространения для преобразования массива с пустыми слотами в массив с элементами, инициализированными с помощью undefined. Затем примените метод array.map() к этому массиву:

JavaScript const length = 3; const filledArray = […Array(length)].map(() => { return { value: 0 }; }); filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

Попробуйте демо.

Выражение […Array(length)] создает массив с элементами, инициализированными как undefined. В таком массиве array.map() может создавать новые экземпляры объекта. Я предпочитаю подход заполнения массива объектами Array.from(), потому что в нем меньше магии.

3. Заключение

JavaScript предоставляет множество хороших способов заполнить массив начальными значениями. Если вы хотите создать массив, инициализированный примитивными значениями, то лучший подход — Array(length).fill(initialValue).

Чтобы создать массив, инициализированный экземплярами объекта, и вам все равно, что каждый элемент будет содержать один и тот же экземпляр объекта, тогда правильный путь использовать Array(length).fill(initialObject).

В противном случае, чтобы заполнить массив различными экземплярами объекта, вы можете использовать Array.from(Array.length, mapper) или […Array(length)].map(mapper), где mapper — функция, которая возвращает новый экземпляр объекта при каждом вызове.

Автор: Dmitri Pavlutin

Источник: webformyself.com