5 способов расширить массив в JavaScript без создания нового

Для кого эта статья:

• JavaScript-разработчики, которые хотят улучшить свою производительность кода
• Студенты и начинающие программисты, обучающиеся веб-разработке

• Профессионалы, работающие с большими объемами данных и оптимизацией приложений

  Каждый JavaScript-разработчик рано или поздно сталкивается с необходимостью добавлять элементы в существующие массивы. Но создание нового массива при каждой такой операции — верный путь к утечкам памяти и снижению производительности. 🚀 Особенно критично это становится при работе с большими объёмами данных или на устройствах с ограниченными ресурсами. Пять простых техник, о которых пойдет речь, помогут вам манипулировать массивами без создания новых объектов, сохраняя ссылки на оригинальные данные и значительно повышая эффективность кода.

Хотите стать мастером JavaScript и профессионально управлять структурами данных? На курсе Обучение веб-разработке от Skypro вы освоите не только базовые, но и продвинутые техники работы с массивами. Наши эксперты научат вас писать высокопроизводительный код, оптимизированный для реальных задач. Пока другие создают ненужные копии массивов, выпускники Skypro знают, как расширить существующий массив без лишних затрат памяти.

Почему изменение существующего массива иногда эффективнее

Манипулирование существующими массивами без создания новых экземпляров предоставляет значительные преимущества в управлении памятью и повышении производительности JavaScript-приложений. Когда вы создаёте новый массив, движок JavaScript выделяет дополнительное пространство в памяти, что требует ресурсов процессора и может привести к фрагментации памяти при частом использовании.

Алексей Петров, Senior Frontend Developer

Работая над панелью мониторинга в реальном времени для телекоммуникационной платформы, наша команда столкнулась с серьезными проблемами производительности. Каждую секунду система получала огромные объемы данных, которые нужно было обрабатывать и отображать без задержек.

Первоначально мы использовали иммутабельный подход, создавая новые массивы при каждом обновлении данных. Это привело к постоянным сборкам мусора, что вызывало заметные подвисания интерфейса — непозволительная роскошь для системы мониторинга реального времени.

Переход на мутабельные операции с массивами мгновенно улучшил ситуацию. Использование push.apply() вместо concat() снизило нагрузку на сборщик мусора и устранило микрозадержки. После оптимизации наш интерфейс стал работать плавно даже при потоке в 1000+ обновлений в минуту.

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

Ключевые преимущества модификации существующих массивов:

• Снижение нагрузки на сборщик мусора (Garbage Collector)
• Предотвращение фрагментации памяти при интенсивных операциях с данными
• Автоматическое обновление всех ссылок на массив без дополнительного кода
• Уменьшение задержек рендеринга в браузере для высоконагруженных интерфейсов
• Сокращение потребления энергии на мобильных устройствах

Однако важно помнить, что мутабельные операции имеют свои особенности и могут вызывать побочные эффекты в некоторых архитектурах. В функциональном программировании и при использовании определенных фреймворков (например, React с его концепцией иммутабельности) предпочтительнее создавать новые массивы. Поэтому важно выбирать подход в зависимости от контекста разработки.

Расширение массива методом push.apply() для пакетного добавления

Метод Array.prototype.push.apply() предоставляет эффективный способ добавления множества элементов в конец существующего массива без создания промежуточных объектов. Эта техника основана на использовании метода Function.prototype.apply(), который позволяет вызывать функцию с заданным контекстом и массивом аргументов.

Основной синтаксис этого метода:

Array.prototype.push.apply(targetArray, sourceArray);

Вот пример базового использования:

const mainArray = [1, 2, 3];
const additionalItems = [4, 5, 6];

Array.prototype.push.apply(mainArray, additionalItems);

console.log(mainArray); // [1, 2, 3, 4, 5, 6]

Что делает этот код особенным? 🔍 Метод push.apply() модифицирует исходный массив напрямую, добавляя все элементы из второго массива за одну операцию. Это значительно эффективнее, чем использование цикла для добавления элементов по одному, особенно для больших массивов.

Преимущества метода push.apply():

• Высокая производительность для больших массивов
• Прямая модификация исходного массива без создания копий
• Пакетное добавление всех элементов за один вызов метода
• Совместимость со старыми браузерами и средами JavaScript

Существует важное ограничение: в некоторых JavaScript-движках существует лимит на количество аргументов, которые можно передать в функцию (обычно около 65536). При работе с очень большими массивами это может вызвать ошибку "Maximum call stack size exceeded". В таких случаях следует разбивать большие массивы на части или использовать альтернативные методы.

// Безопасная версия для больших массивов
function pushAll(target, source) {
const chunk = 10000; // Безопасный размер порции
for (let i = 0; i < source.length; i += chunk) {
const portion = source.slice(i, i + chunk);
Array.prototype.push.apply(target, portion);
}
return target;
}

const hugeArray = Array(100000).fill(1);
const base = [0];
pushAll(base, hugeArray); // Безопасно добавляет 100,000 элементов

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

Spread-оператор и его применение для изменения исходного массива

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

Одна из наиболее популярных техник — использование spread-оператора вместе с push:

const originalArray = [1, 2, 3];
const newElements = [4, 5, 6];

originalArray.push(...newElements);

console.log(originalArray); // [1, 2, 3, 4, 5, 6]

Эта техника имеет преимущества над push.apply() в плане читаемости кода и соответствия современным стандартам JavaScript. Spread-оператор разворачивает элементы массива newElements в отдельные аргументы для метода push, что позволяет добавить их все за одну операцию.

Spread-оператор можно творчески использовать и для других манипуляций с массивами:

const array = [3, 4, 5];
array.unshift(...[1, 2]);
console.log(array); // [1, 2, 3, 4, 5]

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

Максим Орлов, Lead Frontend Developer

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

Первоначально для каждой операции мы создавали новый массив с помощью concat(), что приводило к проблемам: интерфейс терял фокус на элементах после обновления, а анимации сбивались из-за пересоздания DOM-элементов.

Переход на использование spread-оператора с методами push() и splice() кардинально изменил ситуацию. Поскольку физически это был всё тот же массив, React мог корректно обрабатывать ключи элементов, анимации стали плавными, а фокус больше не терялся. Особенно элегантно выглядели вставки: taskList.splice(index, 0, ...subtasks) вместо громоздких конструкций с concat() и slice().

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

Важные моменты при использовании spread-оператора для расширения массивов:

• Как и push.apply(), spread-оператор подвержен ограничениям стека вызовов
• Необходимо использовать его вместе с мутабельными методами массива (push, unshift, splice)
• Поддерживается во всех современных браузерах, но может потребовать транспиляции для старых сред
• Позволяет смешивать отдельные элементы и массивы в одном вызове: array.push(singleItem, ...arrayOfItems, anotherItem)

Spread-оператор часто является более предпочтительным выбором для расширения массивов благодаря своей выразительности и соответствию современным паттернам JavaScript-разработки. 🔄

Метод splice() для точной вставки элементов в нужную позицию

Метод Array.prototype.splice() — один из самых универсальных инструментов для модификации массивов в JavaScript. Он позволяет не только удалять элементы из массива, но и вставлять новые в любую позицию, что делает его идеальным для точного контроля над структурой данных без создания новых объектов.

Базовый синтаксис метода:

array.splice(startIndex, deleteCount, item1, item2, ...)

где:

• startIndex — индекс, с которого начинается изменение массива
• deleteCount — количество элементов для удаления (0 для чистой вставки)
• item1, item2, ... — элементы для вставки в указанную позицию

Для добавления элементов без удаления, установите deleteCount в 0:

const technologies = ["HTML", "CSS", "JavaScript"];

// Вставляем "TypeScript" перед "JavaScript" (на позицию 2)
technologies.splice(2, 0, "TypeScript");

console.log(technologies); // ["HTML", "CSS", "TypeScript", "JavaScript"]

Метод splice() особенно полезен для вставки нескольких элементов одновременно:

const weekdays = ["Monday", "Tuesday", "Friday"];

// Вставляем пропущенные дни недели
weekdays.splice(2, 0, "Wednesday", "Thursday");

console.log(weekdays); // ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

Для вставки элементов из другого массива можно комбинировать splice() со spread-оператором:

const mainList = [1, 2, 7, 8, 9];
const missingNumbers = [3, 4, 5, 6];

// Вставляем пропущенные числа на правильную позицию
mainList.splice(2, 0, ...missingNumbers);

console.log(mainList); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

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

const fruits = ["Apple", "Orange", "Banana", "Mango"];

// Заменяем "Banana" на "Kiwi" и "Pineapple"
const removed = fruits.splice(2, 1, "Kiwi", "Pineapple");

console.log(fruits); // ["Apple", "Orange", "Kiwi", "Pineapple", "Mango"]
console.log(removed); // ["Banana"]

Вот несколько практических сценариев использования splice() для расширения массивов:

• Вставка элементов по определенному критерию (например, сортировка "на лету")
• Реализация операций вставки/удаления в структурах данных на основе массивов
• Объединение нескольких массивов с определенным порядком
• Динамическое обновление списков в UI-компонентах без пересоздания всего массива

При работе с большими наборами данных важно помнить, что splice() может быть вычислительно затратным, поскольку требует сдвига элементов массива. Для вставки в конец массива эффективнее использовать push(), а для вставки в начало — unshift(). 🧩

Оптимизация добавления с помощью циклов и функциональных методов

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

Использование классического цикла for для добавления элементов:

const targetArray = [1, 2, 3];
const sourceArray = [4, 5, 6];

// Добавляем элементы из sourceArray в targetArray
for (let i = 0; i < sourceArray.length; i++) {
targetArray.push(sourceArray[i]);
}

console.log(targetArray); // [1, 2, 3, 4, 5, 6]

Преимущество циклов проявляется при необходимости фильтрации или трансформации данных в процессе добавления:

const numbers = [1, 2, 3];
const mixedData = [4, "five", 6, null, 8, undefined];

// Добавляем только числовые элементы
for (let i = 0; i < mixedData.length; i++) {
if (typeof mixedData[i] === 'number' && mixedData[i] !== null) {
numbers.push(mixedData[i]);
}
}

console.log(numbers); // [1, 2, 3, 4, 6, 8]

Современный JavaScript предлагает более элегантные функциональные подходы с использованием методов forEach и reduce:

// Использование forEach
const base = ['a', 'b', 'c'];
const additions = ['d', 'e', 'f'];

additions.forEach(item => base.push(item));
console.log(base); // ['a', 'b', 'c', 'd', 'e', 'f']

// Использование reduce для построения более сложной логики
const initialArray = [1, 2, 3];
const operations = [
{ type: 'multiply', value: 2 },
{ type: 'add', value: 5 },
{ type: 'square' }
];

operations.reduce((array, operation) => {
const lastValue = array[array.length – 1];

switch (operation.type) {
case 'multiply':
array.push(lastValue * operation.value);
break;
case 'add':
array.push(lastValue + operation.value);
break;
case 'square':
array.push(lastValue * lastValue);
break;
}

return array;
}, initialArray);

console.log(initialArray); // [1, 2, 3, 6, 11, 121]

Использование циклов и функциональных методов особенно ценно в следующих сценариях:

• Асинхронное добавление элементов (например, при загрузке данных по частям)
• Сложная логика фильтрации или преобразования перед добавлением
• Условное добавление элементов на основе их свойств или внешних факторов
• Объединение нескольких источников данных с настраиваемой логикой слияния
• Поэлементная валидация перед добавлением в основной массив

Функциональный подход часто приводит к более чистому и декларативному коду, хотя иногда может уступать классическим циклам в производительности, особенно на больших наборах данных. При выборе метода важно учитывать требования к читаемости, производительности и гибкости в конкретной ситуации. 🔄

JavaScript-разработчики часто недооценивают важность выбора правильного метода расширения массивов. Мы рассмотрели пять эффективных способов модифицировать существующие массивы без создания новых объектов: push.apply(), spread-оператор, splice(), циклы и функциональные методы. Каждый из них имеет свои преимущества в определенных сценариях. Помните: оптимизация работы с массивами — не просто вопрос элегантности кода, но и критический фактор производительности ваших приложений. Грамотное применение этих техник поможет вам создавать более эффективные, отзывчивые и масштабируемые решения, особенно при работе с большими объемами данных.