Clone Arrays en JavaScript

En uno de mis artículos anteriores cubrí cómo puedes copiar objetos en JavaScript . Copiar un objeto es una tarea bastante complicada, dado que también debería poder copiar todos los demás tipos de datos que podrían estar en el objeto. Pero, ¿y si solo estás copiando una matriz? Al igual que en el último artículo, hay varias formas de realizar esta tarea, algunas de las cuales las analizaré en este artículo.
Pero primero, una nota sobre la velocidad. Si bien esto puede no ser importante para todas las aplicaciones, es algo a tener en cuenta si copiar arreglos grandes es una operación común en su código, o si la velocidad realmente importa. Para algunos de los métodos a continuación, señalo su velocidad en relación con los otros métodos, que se desprende de los resultados de este punto de referencia .

Copiando Arreglos Simples

Para esta primera parte, supongamos que la matriz que desea copiar solo contiene tipos de datos primitivos (e inmutables). Es decir, la matriz solo contiene números, valores booleanos, cadenas, etc. De esta manera podemos enfocarnos más en la transferencia de datos de una matriz a otra, a diferencia de cómo manejamos la copia del contenido real de la matriz, que Cubrir en la sección "Copias profundas" a continuación.
Hay una sorprendente cantidad de formas de copiar una matriz, algunas de las cuales incluyen:
  • push
  • Untado
  • slice
  • Array.from
  • _.clone
El operador de propagación y el slicemétodo son las formas más rápidas de copiar una matriz poco profunda, pero tenga en cuenta que esto depende del tiempo de ejecución subyacente, por lo que podría no ser universalmente cierto.

empujar

Esta es probablemente la solución más obvia, que recorre la matriz original y utiliza el push()método de la nueva matriz para agregar elementos de una matriz a otra:
let oldArr = [3, 1, 5, 2, 9];  
let newArr = [];  
for (let i=0; i < oldArr.length; i++) {  
    newArr.push(oldArr[i]);
}
Simplemente hacemos un bucle sobre la matriz a copiar y empujamos cada elemento a la nueva matriz.

Untado

Este método utiliza el operador de propagación , que se definió en ES6 y está disponible en la mayoría de los navegadores actualizados.
Funciona de la siguiente manera:
let oldArr = [3, 1, 5, 2, 9];  
let newArr = [...oldArr];  
Si voy a utilizar una solución nativa y no una biblioteca de terceros, esta es la solución que prefiero, gracias a su sintaxis limpia y simple.
Una nota importante es que esta copia solo funciona en el nivel superior (como muchos de estos métodos), por lo que no debe usarse si necesita copias en profundidad de cualquier cosa.

Rebanada

El slice()método se utiliza normalmente para devolver una parte de una matriz, especificada por los parámetros beginningendSin embargo, si no se pasan parámetros, se devuelve una copia de la matriz completa:
let oldArr = [3, 1, 5, 2, 9];  
let newArr = oldArr.slice();  
En muchos tiempos de ejecución de JavaScript, esta es la forma más rápida de copiar una matriz.

Array.from

El Array.frommétodo está destinado a crear una copia superficial de cualquier iterable que le pase, y también toma una función de mapeo opcional como segundo parámetro. Por lo tanto, se puede usar para crear una matriz de cadenas, conjuntos, mapas y, por supuesto, otras matrices:
let oldArr = [3, 1, 5, 2, 9];  
let newArr = Array.from(oldArr);  

Clon de Lodash

Los métodos clone () y cloneDeep () de Lodash pueden resultarle familiares si lee este artículo sobre cómo copiar objetos. Los métodos hacen exactamente lo que cabría esperar: cualquier objeto (o matriz, primitivo, etc.) que se le pase será copiado y devuelto.
_.cloneDeep (descrito más adelante) es diferente en que no detiene la clonación en el nivel superior, sino que copiará recursivamente todos los objetos que encuentre en cualquier nivel.
Dado esto, podemos usarlo también para copiar arreglos:
let oldArr = [3, 1, 5, 2, 9];  
let newArr = _.clone(oldArr);  
_.clone se desempeña muy bien en comparación con los otros métodos, por lo que si ya está utilizando esta biblioteca en su aplicación, entonces esta es una solución simple.

Copias profundas

Una cosa importante a destacar es que todos los métodos descritos anteriormente solo realizan copias superficiales de sus arreglos. Entonces, si tiene una matriz de objetos, por ejemplo, la matriz real se copiará, pero los objetos subyacentes se pasarán por referencia a la nueva matriz.
Para demostrar este problema, veamos un ejemplo:
let oldArr = [{foo: 'bar'}, {baz: 'qux'}];  
let newArr = [...oldArr];  
console.log(newArr === oldArr);  
console.log(newArr[0] === oldArr[0]);  
false  
true  
Aquí puede ver que, si bien la matriz real es nueva, los objetos dentro de ella no lo eran. Para algunas aplicaciones, esto puede ser un gran problema. Si esto se aplica a usted, aquí hay algunos otros métodos para probar.

Lodash Clone Deep

El _.cloneDeepmétodo de Lodash hace exactamente lo mismo que _.clone(), excepto que clona recursivamente todo en la matriz (u objeto) que se pasa. Al usar el mismo ejemplo anterior, podemos ver que el uso _.cloneDeep()nos proporcionará tanto una nueva matriz como elementos de matriz copiados:
const _ = require('lodash');

let oldArr = [{foo: 'bar'}, {baz: 'qux'}];  
let newArr = _.cloneDeep(oldArr);  
console.log(newArr === oldArr);  
console.log(newArr[0] === oldArr[0]);  
false  
false  

Métodos JSON

JavaScript proporciona algunos métodos JSON prácticos que manejan la conversión de la mayoría de los tipos de datos JS en una cadena, y luego una cadena JSON válida en un objeto JS. Los métodos respectivos se utilizan de la siguiente manera:
let oldArr = [{foo: 'bar'}, {baz: 'qux'}];  
let arrStr = JSON.stringify(oldArr);  
console.log(arrStr);

let newArr = JSON.parse(arrStr);  
console.log(newArr);

console.log(newArr === oldArr);  
console.log(newArr[0] === oldArr[0]);  
'[{"foo":"bar"},{"baz":"qux"}]'  
[ { foo: 'bar' }, { baz: 'qux' } ]
false  
false  
Este método funciona muy bien y no requiere bibliotecas de terceros. Sin embargo, hay dos cuestiones principales:
  • Los datos deben ser serializables y deserializables a través de JSON
  • Usar los métodos JSON de esta manera es mucho más lento que otras soluciones
Entonces, si tiene datos que no pueden ser serializados a JSON o si la velocidad es importante para su aplicación, entonces esta podría no ser una buena solución para usted.

Conclusión

En este artículo cubrí una serie de formas en que puede copiar arreglos en JavaScript, tanto usando código nativo como una biblioteca de terceros útil en Lodash. También examinamos el problema de las matrices de clonación profunda y las soluciones que existen para resolverlo.
¿Hay algún método diferente que funcione mejor para ti? Háganos saber lo que piensa en los comentarios.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.