Aquí tienes 2 formas de combinar tus arrays y devolver un array NUEVO. A mí me gusta usar el operador spread, pero si necesitas dar soporte a navegadores antiguos, tira de concat.
// 2 formas de fusionar arrays
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Método 1: Concat
const combined1 = [].concat(fruits, legumes);
// Método 2: Spread
const combined2 = [...fruits, ...legumes];
// Resultado
// [ 'pomme', 'poire', 'carotte', 'salade' ]Sintaxis alternativa de concat
También puedes escribir concat de esta otra manera:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
Como ves, esta forma de escribirlo no toca ni modifica el array existente.
¿Cuál elijo?
Pongamos las dos versiones una al lado de la otra para compararlas.
// Versión A:
const combinedA = [].concat(fruits, legumes);
// Versión B:
const combinedB = fruits.concat(legumes);
Y ahora, ¿cuál elegir? Yo prefiero la versión A porque su intención es mucho más clara. Con solo mirarla sé que estoy creando un array nuevo y que no estoy tocando el existente. En cambio, cuando miro la versión B, parece que estoy añadiendo las legumes al array de fruits, y no me resulta evidente que el array fruits pueda quedar reemplazado por las legumes.
Diferencia entre spread y concat
Prefiero usar spread porque me parece más conciso y más cómodo de escribir. PERO concat sigue teniendo sus ventajas.
Spread va de maravilla cuando sabes de antemano que trabajas con arrays. ¿Y cuándo la fuente es otra cosa, por ejemplo una cadena de texto que quieres añadir al array? Veámoslo con un ejemplo.
Ejemplo
Digamos que este es el resultado que buscamos:
[1, 2, 3, 'random'];
A. Con spread
Si seguimos el patrón anterior y usamos el operador spread, esto es lo que pasa:
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
Al desplegar la cadena, la palabra se parte en letras sueltas. O sea, no obtenemos el resultado que queríamos.
B. Con concat
PERO si seguimos el patrón de concat, esto es lo que pasa:
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
¡Perfecto! Obtenemos justo el resultado que buscábamos.
Sé que algunos estaréis pensando «bah». Escribo un condicional para comprobar que lo que paso es un array y actúo en consecuencia. Claro que funciona. O escribes menos código y usas concat.
Veredicto
La regla rápida es esta: si sabes que trabajas con arrays, usa spread. Pero si cabe la posibilidad de recibir algo que no sea un array, usa concat para fusionarlo.
En cualquier caso, quería dejarlo claro para que puedas usar el método más adecuado al problema que tengas delante.
Merge Array with Push (fusionar dos arrays con push)
Alguno se estará preguntando si no puede usar también push para fusionar un array. Pues sí, puedes. Pero push toca y modifica el array existente: NO crea uno nuevo. Así que depende de lo que quieras hacer. Tenlo presente.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// cuando usas push, devuelve la LONGITUD del array combinado
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
Además, cuando intentas meter un array dentro de otro con push, tendrás que desplegarlo, si no, acabarás con un array anidado. Salvo, claro, que sea justo lo que buscabas.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Soporte de los navegadores
Spread llegó con ES6, así que lo admiten todos los navegadores modernos. Si no, usa concat en su lugar o pasa el código por un compilador como Babel.
