Combinar matrices en JavaScript con concat() y push() [Ejemplos]

Este tutorial le mostrará las formas correctas de fusionar dos o más matrices en JavaScript con concat método y proporcionar una advertencia sobre cómo no para fusionar matrices.

Fusionar/unir arreglos en JavaScript con el método concat()*

El concat() El método existe con un propósito:fusionar matrices.

concat() Sintaxis del método

array.concat(ARRAYS)

Tenga en cuenta que:

• matriz es la primera matriz de las matrices que se unirán
• MATRICES debe ser una lista separada por comas de las matrices que se agregarán a la primera matriz
  • Estarán unidos por orden de aparición
• concat() devuelve un nuevo matriz:la matriz que lo llama y las matrices que se le pasan no se modifican

Ejemplo:combinar matrices con concat() Método

A continuación se muestran ejemplos de matrices que se fusionan con concat() método. Tenga en cuenta que en cada ejemplo, el resultado de concat() se asigna a una nueva variable, ya que no modifica las matrices originales.

Fusionando dos arreglos:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray);

Esto dará como resultado una nueva matriz, myMergedArray , con el siguiente valor:

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

Fusionando múltiples arreglos:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray, ['tree', 'flower', 'grass']);

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse",
    "tree",
    "flower",
    "grass"
]

Arriba, se fusionan varias matrices; tenga en cuenta que la tercera matriz no se declaró previamente como una variable; los valores de tipo de matriz se pueden pasar directamente a concat() .

EL CAMINO INCORRECTO:cómo push() El método NO debe usarse para fusionar/concatenar matrices

Antes de mostrarte la forma correcta de usar push() método para fusionar matrices, vale la pena mostrar un error común que se comete al intentar hacerlo para que pueda evitarlo.

El empujar() El método está destinado a agregar valores a una matriz. Como se puede utilizar para añadir múltiples valores a una matriz, podría pensar que se puede usar para fusionar dos matrices pasándole una matriz.

Esto no el caso:si pasa una matriz a push método, se agregará como elemento secundario de la matriz con la que intenta fusionarse, ¡no se agregará!

Aquí hay una demostración rápida:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(mySecondArray);

Así es como se ve myFirstArray después de lo anterior:

[
    "apple",
    "banana",
    "pear",
    [
        "dog",
        "cat",
        "bird",
        "horse"
    ]
]

¡Las matrices no se han fusionado! La segunda matriz se agregó como un elemento de la primera, en lugar de combinar los elementos de ambas matrices.

LA FORMA CORRECTA:cómo empujar() El método DEBE usarse para fusionar matrices

Es es es posible usar sintaxis extendida para insertar el contenido de una matriz en otra, fusionándolos de manera efectiva agregando el contenido de la segunda matriz a la primera:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(...mySecondArray);

Esto dará como resultado el comportamiento de fusión previsto, actualizando myFirstArray para parecerse a lo siguiente:

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

Observe el … en el empujar() ¿método? Es la sintaxis extendida:expande el contenido de la matriz y los pasa como argumentos a push() individualmente en lugar de pasar toda la matriz como una sola.

Recomendaría evitar este método a menos que su situación específica lo requiera; su código debe ser claro con el propósito de que cualquiera que lo lea sepa lo que estás tratando de hacer. Usando concat() no es ambiguo:está concatenando dos matrices.

Se puede hacer mucho más con matrices en JavaScript, todo cubierto en nuestros artículos aquí.