Cómo copiar una matriz en JavaScript

Dado que las matrices son objetos similares a una colección en JavaScript, no puede simplemente usar el operador igual (= ) para copiar los valores. Solo copiará la referencia al objeto original y no los elementos de la matriz.

En Vanilla JavaScript, hay varias formas de clonar el contenido de una matriz. Puedes usar el Array.slice() el método Array.from() o el operador de propagación (... ) para duplicar una matriz. No necesita usar un bucle para iterar sobre todos los elementos de una matriz e insertarlos en otra matriz.

Array.slice() Método

La forma más sencilla y rápida de copiar el contenido de un arreglo existente en un nuevo arreglo es usar el método slice() sin ningún parámetro:

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// clone `fruits` using `slice()`
const moreFruits = fruits.slice();

console.log(moreFruits);

// ['🍑', '🍓', '🍉', '🍇', '🍒']

En el código anterior, el slice() método crea un superficial copia de la matriz original, y no un clon profundo. La matriz original permanece sin cambios. Si la matriz original contiene objetos, solo sus referencias se copiarán en la nueva matriz.

Array.from() Método

Otra forma de clonar una matriz en JavaScript es mediante el método Array.from(). Crea un nuevo Array copiado superficialmente objeto de un objeto similar a una matriz o iterable.

Aquí hay un ejemplo:

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// clone `fruits` using `Array.from()`
const moreFruits = Array.from(fruits);

El Array.from() El método se introdujo en ES6, por lo que solo funciona en navegadores modernos. Pero puede usar un polyfill para hacer que el navegador sea compatible con IE6.

Operador de propagación

El operador de propagación (... ) es otra opción disponible en JavaScript moderno (ES6 y superior) que se puede usar para clonar una matriz "difundiendo" sus elementos:

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// clone `fruits` using spread operator
const moreFruits = [...fruits];

Igual que Array.slice() , el operador de extensión crea una copia superficial de la matriz original. Solo baja un nivel cuando se clona una matriz. Si está haciendo frente a una matriz multidimensional o una matriz que contiene objetos, debe buscar otras alternativas.

Array.concat() Método

Aunque el Array.concat() El método se usa originalmente para fusionar dos matrices en una, también puede usarlo para clonar una matriz:

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// merge `fruits` with emtpy array to 
// create a new array
const moreFruits = [].concat(fruits);

Eche un vistazo a esta guía para obtener más información sobre las matrices de JavaScript y cómo usarlas para almacenar varios valores en una sola variable.