logo

TechCodeview

Com clonar una matriu en JavaScript?

En JavaScript, clonar una matriu significa crear una nova matriu amb els mateixos elements que la matriu original. Clonar una matriu en JavaScript és útil quan es vol crear una matriu nova que tingui els mateixos elements que una matriu existent, sense modificar la matriu original.

Quan clonar la matriu?

Si voleu realitzar algunes operacions en una matriu, com ara ordenar, filtrar o mapejar, però no voleu modificar la matriu original, podeu crear un clon de la matriu original i, en el seu lloc, realitzar les operacions sobre el clon.



  • Quan passeu una matriu a una funció com a argument, podeu assegurar-vos que la funció no modifica la matriu original. En aquest cas, podeu passar un clon de la matriu.
  • Si voleu conservar la matriu original per a referència futura, podeu crear un clon de la matriu original i utilitzar-lo per a un processament o manipulació posterior.
  • Si teniu una matriu que conté objectes o matrius com a elements, i voleu evitar modificar els objectes o matrius originals, podeu crear un clon de la matriu per treballar, de manera que els canvis als objectes o matrius del clon no afecten els objectes o matrius originals.

Així, clonació d'una matriu en JavaScript és una tècnica útil per treballar amb matrius de manera que es preservi la integritat de la matriu original i els seus elements.

Aquests són alguns casos d'ús habituals per clonar una matriu:

Taula de contingut



Utilitzant el mètode Array.slice().

Fem servir el mètode del tall per crear una còpia superficial d'una matriu. Aquest mètode crea una matriu nova amb un subconjunt d'elements de la matriu original.

Exemple: Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);>
Sortida 
[ 1, 2, 3 ]>

Utilitzant l'operador de propagació

Utilitzant el operador de propagació … és una manera concisa i fàcil de clonar una matriu en JavaScript. L'operador de propagació us permet expandir una matriu en elements individuals, que després es poden utilitzar per crear una matriu nova.



Exemple: Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.

tipus de bucle for
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);>
Sortida 
[ 1, 2, 3 ]>

Utilitzant el mètode Array.from().

Utilitzant el Array.from() El mètode és una altra manera de clonar una matriu en JavaScript. Aquest mètode crea una nova matriu a partir d'una matriu existent, utilitzant una funció de mapeig opcional per transformar els valors de la nova matriu.

Exemple: Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);>
Sortida 
[ 1, 2, 3 ]>

Utilitzant el mètode Array.concat().

Utilitzant el Array.concat() El mètode és una altra manera de clonar una matriu en JavaScript. Aquest mètode crea una matriu nova concatenant dues o més matrius juntes.

Exemple: Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);>
Sortida 
[ 1, 2, 3 ]>

Utilitzant un bucle for

Aquest mètode implica iterar cada element de la matriu original i copiar cada element a una matriu nova.

Exemple: Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) {  clonedArray.push(originalArray[i]); } console.log(clonedArray);>
Sortida 
[ 1, 2, 3 ]>

Utilitzant el mètode Array.map().

Utilitzant el Array.map() El mètode és una altra manera de clonar una matriu en JavaScript. Aquest mètode crea una matriu nova assignant cada element de la matriu original a un valor nou.

Exemple: Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>x); console.log(clonedArray);>>>  
  Sortida  
[ 1, 2, 3 ]>
  
Utilitzant el mètode Array.from() amb una funció de mapa
Utilitzant el      Array.from()    mètode amb una funció de mapa és una altra manera de clonar una matriu en JavaScript. Aquest mètode crea una matriu nova assignant cada element de la matriu original a un valor nou mitjançant una funció proporcionada.
eliminar el primer caràcter excel

 
    Exemple:    Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>x); console.log(clonedArray);>>>  
  Sortida  Utilitzant el mètode Array.of().
Aquest mètode crea una matriu nova amb els mateixos elements que la matriu original.
 
    Exemple:    Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>
   
  Sortida  Utilitzant els mètodes JSON.parse() i JSON.stringify().
Utilitzant el      JSON.parse()     i      JSON.stringify()              mètodes és una altra manera de clonar una matriu en JavaScript. Aquest mètode consisteix a convertir la matriu original en una cadena JSON i després analitzar la cadena JSON per crear una nova matriu.
 
    Exemple:    Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.
unix vs windows

Javascript 
const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>
   
  Sortida  
[ 1, 2, 3 ]>
 
Utilitzant el mètode Object.assign().
Utilitzant el              Object.assign()    mètode  és una altra manera de clonar una matriu en JavaScript. Aquest mètode crea una matriu nova copiant les propietats de la matriu original a un objecte nou.
 
    Exemple:    Aquest exemple mostra la implementació de l'enfocament explicat anteriorment.
Javascript 
const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>
   
  Sortida  
[ 1, 2, 3 ]>
 
Utilitzant el mètode Array.reduce().
El  Mètode Array.reduce().  executa una funció reductora a cada element de la matriu, donant com a resultat un únic valor de sortida. El podem utilitzar per construir una matriu nova amb els mateixos elements que la matriu original.
 
    Sintaxi:    
 
array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, valor inicial);>
    Exemple    : En aquest exemple, utilitzarem el mètode Array.reduce() per crear un clon d'una matriu.
JavaScript 
// Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val);  retorn acc; }, []); // Mostra les matrius originals i clonadas console.log('Matriu original:', originalArray); // Sortida: [1, 2, 3, 4] console.log('Matriu clonada:', Matriu clonada); // Sortida: [1, 2, 3, 4]>
   
  Sortida  
Original Array: [ 1, 2, 3, 4 ] Cloned Array: [ 1, 2, 3, 4 ]>
 
    Nota:    Per tant, en clonar una matriu, és important tenir en compte la complexitat de les dades i els requisits de rendiment de l'aplicació.