En Vanilla JavaScript, hay múltiples formas de combinar todos los elementos de dos matrices y devuelve una nueva matriz. Puedes usar el Array.concat() método o el operador de propagación (... ) para fusionar varias matrices.
El Array.concat() toma una o más matrices como entrada y fusiona todas las matrices subsiguientes en la primera:
const fruits = ['Apple', 'Orange', 'Banana'];
const moreFruits = ['Kiwi', 'Lemon'];
// merge all fruits
const allFruits = fruits.concat(moreFruits);
console.log(allFruits);
// ['Apple', 'Orange', 'Banana', 'Kiwi', 'Lemon']
Este método funciona en todos los navegadores modernos e IE6 y superiores. También puede fusionar más de dos matrices usando el Array.concat() método:
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
let combined = [].concat(arr1, arr2, arr3);
console.log(combined); // [ 1, 2, 3, 4, 5, 6 ]
Observe el [].concat() sintaxis que usamos en el ejemplo anterior para fusionar matrices. Es similar al primer ejemplo excepto que las matrices de entrada se fusionan con una matriz vacía.
Si solo te interesan los navegadores modernos, mejor usa el operador de propagación de ES6 para fusionar las matrices:
const fruits = ['Apple', 'Orange', 'Banana'];
const moreFruits = ['Kiwi', 'Lemon'];
// merge all fruits
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits);
// ['Apple', 'Orange', 'Banana', 'Kiwi', 'Lemon']
¿Qué sucede si las matrices contienen duplicados? ¿elementos? No existe una forma "integrada" de eliminar duplicados en ECMAScript 5. Sin embargo, puede usar el objeto Set de ES6 junto con el operador de extensión para filtrar todos los duplicados:
const fruits = ['Apple', 'Lemon', 'Banana'];
const moreFruits = ['Kiwi', 'Lemon'];
// merge all fruits
const allFruits = [...new Set([...fruits, ...moreFruits])];
console.log(allFruits);
// ['Apple', 'Lemon', 'Banana', 'Kiwi']
Este enfoque solo funciona en navegadores modernos y Node.js. Eche un vistazo a este artículo para obtener más información sobre cómo eliminar duplicados de una matriz en JavaScript.
Para obtener más información sobre las matrices de JavaScript, consulte esta guía que explica en detalle cómo funcionan las matrices de JavaScript y cómo usarlas para almacenar múltiples piezas de información en una sola variable.