5 способов объединить массивы в JavaScript (просто)

Если вы программируете на JavaScript, скорее всего, вы сталкивались с необходимостью объединения двух или более массивов.

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

В этой статье мы поговорим о пяти простых способах использования JavaScript для объединения нескольких массивов в один.

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

Давайте погрузимся!

Что такое слияние массивов?

Итак, вы думаете об объединении массивов в JavaScript? Большой! У вас есть несколько вариантов, как это сделать, о которых мы расскажем позже. Но сначала давайте углубимся в то, что именно означает слияние массивов.

Слияние массивов — это процесс объединения отдельных массивов в один массив.

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

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

В итоге у вас будет единый массив, содержащий всю необходимую информацию об этой конкретной команде.

Объединение массивов с использованием оператора Spread

Оператор спреда — один из самых простых способов объединить два массива в JavaScript.

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

Для этого вам просто нужно использовать этот синтаксис:

const newArray = [...arrayOne, ...arrayTwo];

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

Кроме того, вы можете использовать столько массивов, сколько захотите — просто добавьте столько операторов спреда, сколько вам нужно!

Объединение массивов методом concat()

Когда дело доходит до слияния массивов в JavaScript, одним из самых популярных и универсальных методов является использование метода concat().

Все, что вам нужно сделать, это передать два параметра массива, и они будут объединены в один массив.

Вы также можете передать более двух массивов, и все они будут объединены.

Вот как выглядит синтаксис:

var array1 = [1,2,3];
var array2 = [4,5,6];
var mergedArray = array1.concat(array2);
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

Имейте в виду, что вы также можете комбинировать вложенные массивы с помощью метода concat(). Это особенно полезно, если вы имеете дело с двумерными массивами или более сложными объектами с несколькими свойствами.

Вот пример того, как объединить вложенный массив:

var array1 = [[4], [6], [11]];
var array2 = [[3], [7], [18]];
var mergedArray = array1.concat(array2);
console.log(mergedArray); // Output: [[4], [6], [11], [3], [7], [18]]

Объединение массивов методом forEach()

Помимо популярных методов, описанных выше, вы также можете использовать метод forEach() для объединения массивов.

Что такое метод forEach()? Проще говоря, это особый тип цикла, который проходит по массиву и вызывает функцию обратного вызова для каждого элемента массива.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [];
arr1.forEach(item => {
  mergedArr.push(item);
});
arr2.forEach(item => {
  mergedArr.push(item);
});
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

Мы создаем два массива arr1 и arr2, а затем создаем пустой массив mergedArr для хранения объединенных элементов.

Затем мы используем два отдельных цикла forEach(), чтобы поместить элементы из arr1 и arr2 в mergedArr.

Наконец, мы записываем в консоль массив mergedArr, который содержит все элементы из обоих массивов.

Объединение массивов методом reduce()

Пятый и последний способ объединения массивов в JavaScript — использование метода reduce().

Он довольно мощный, но в то же время немного сложный, поэтому, если вы хотите узнать о нем больше, ознакомьтесь с этим руководством.

Метод reduce() принимает два параметра: обратный вызов и начальное значение.

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

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

Например, допустим, у нас есть два массива, которые мы хотим объединить:

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

Чтобы объединить эти два массива с помощью метода reduce(), мы можем сделать следующее:

let mergedArray = [...arr1,...arr2].reduce(function(a,b) {return a.concat(b);}, []);
//output: [1, 2, 3, 4, 5]

Как вы можете видеть здесь, наше начальное значение равно [], что означает, что наш аккумулятор будет пустым в начале цикла, а затем добавлять элементы по мере прохождения каждого из них.

Заключение

Итак, у вас есть пять простых способов объединения массивов в JavaScript. Теперь у вас есть инструменты для быстрого и простого объединения двух или более массивов в один, чтобы вы могли более эффективно управлять своими данными и организовывать их.

В конечном счете, объединение массивов может стать отличным способом сэкономить ваше время и предотвратить ошибки.

Если вы когда-либо сомневались в слиянии массивов, вернитесь к этому руководству, чтобы получить простое пошаговое руководство по слиянию массивов в JavaScript.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.