JavaScript: Объединение массивов без создания вложенных массивов

Введение

В JavaScript нет встроенного метода pushValues(), который бы напрямую решал вашу задачу, но есть несколько эффективных способов объединить несколько массивов в новый массив без вложенности. Вот наиболее эффективные подходы:

Содержание

• Использование метода concat()
• Использование оператора spread (…)
• Использование Array.from()
• Использование push.apply()
• Использование Array.prototype.concat.apply()
• Вопросы производительности
• Совместимость с браузерами

Использование метода concat()

Наиболее прямой подход - использовать встроенный метод concat(), который создает новый массив путем объединения нескольких массивов:

const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

const newArray = dataArray1.concat(dataArray2, dataArray3);
// Результат: [1, 2, 3, 'a', 'b', 'c', true, false]

Метод concat принимает несколько аргументов и объединяет их в указанном порядке. Метод concat не рекурсивно обрабатывает вложенные массивы-аргументы, что именно то, что вам нужно.

Для вашего случая с существующим массивом:

const newArray = [];
dataArray1.concat(dataArray2, dataArray3).forEach(item => newArray.push(item));
// Или более эффективно:
newArray.push(...dataArray1, ...dataArray2, ...dataArray3);

Использование оператора spread (…)

Современный оператор spread из ES6 предоставляет лаконичный способ распаковки элементов массива:

const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

const newArray = [...dataArray1, ...dataArray2, ...dataArray3];
// Результат: [1, 2, 3, 'a', 'b', 'c', true, false]

Этот подход идеально подходит для вашего второго примера:

const newArray = new Array(...dataArray1, ...dataArray2, ...dataArray3);

Оператор spread особенно эффективен для объединения нескольких массивов в один без вложенности.

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

Вы можете использовать Array.from() с функцией отображения для объединения массивов:

const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

const newArray = Array.from([dataArray1, dataArray2, dataArray3], arr => arr);
// Результат: [1, 2, 3, 'a', 'b', 'c', true, false]

Этот подход эффективно используется для объединения нескольких массивов в один путем их распаковки внутри Array.from.

Использование push.apply()

Для изменения массива на месте можно использовать push.apply():

const newArray = [];
const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

newArray.push.apply(newArray, dataArray1);
newArray.push.apply(newArray, dataArray2);
newArray.push.apply(newArray, dataArray3);
// Результат: [1, 2, 3, 'a', 'b', 'c', true, false]

Этот подход полезен, когда вы не хотите создавать новый массив и является изменяемым способом объединения.

Использование Array.prototype.concat.apply()

Когда у вас есть массив массивов, можно использовать concat.apply():

const arrays = [
  [1, 2, 3],
  ['a', 'b', 'c'],
  [true, false]
];

const newArray = Array.prototype.concat.apply([], arrays);
// Результат: [1, 2, 3, 'a', 'b', 'c', true, false]

Этот подход особенно полезен при работе с динамическими массивами массивов.

Вопросы производительности

Разные подходы имеют разные характеристики производительности:

• concat(): временная сложность O(N), создает новый массив
• Оператор spread: временная сложность O(N), создает новый массив
• push.apply(): временная сложность O(N), изменяет существующий массив
• Array.from(): временная сложность O(N), создает новый массив

Согласно исследованиям, для больших массивов (100,000+ элементов) использование apply() или оператора spread может иногда приводить к сбоям из-за ограничений стека.

Совместимость с браузерами

• concat(): Доступен во всех браузерах
• Оператор spread (…): Требует поддержки ES6 (большинство современных браузеров)
• Array.from(): Требует поддержки ES6
• push.apply(): Доступен во всех браузерах

Если вам нужна поддержка старых браузеров, concat() является наиболее надежным выбором. Для современных JavaScript-окружений оператор spread предоставляет наиболее читаемый синтаксис.

Источники

1. Array.prototype.concat() - JavaScript | MDN
2. Merge Arrays in JavaScript: With and Without Duplicates | Envato Tuts+
3. What is the most efficient way to concatenate N arrays? - Stack Overflow
4. Using es6 spread to concat multiple arrays - Stack Overflow
5. 2 Ways to Merge Arrays in JavaScript | SamanthaMing.com
6. Combine Multiple Arrays Using Spread | SamanthaMing.com
7. What is the most efficient way to concatenate N arrays in JavaScript? | GeeksforGeeks

Заключение

Чтобы скопировать элементы из нескольких JavaScript-массивов в новый массив без вложенности, у вас есть несколько отличных вариантов:

1. Используйте метод concat() - Наиболее совместимый и читаемый: const newArray = arr1.concat(arr2, arr3);
2. Используйте оператор spread - Современный и лаконичный: const newArray = [...arr1, ...arr2, ...arr3];
3. Используйте push.apply() - Для изменения на месте: newArray.push.apply(newArray, arr);

Оператор spread предоставляет синтаксис, наиболее близкий к желаемой вами функциональности pushValues(), в то время как concat() предлагает лучшую совместимость с браузерами. Для большинства современных разработок на JavaScript предпочтительным методом является оператор spread благодаря своей читаемости и лаконичности.