Lors de la copie d'un tableau en JavaScript vers un autre tableau:

var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d');  //Now, arr1 = ['a','b','c','d']

J'ai réalisé que cela arr2fait référence au même tableau que arr1, plutôt qu'à un nouveau tableau indépendant. Comment puis-je copier le tableau pour obtenir deux tableaux indépendants?

Utilisez ceci:

var newArray = oldArray.slice();

Fondamentalement, l' slice()opération clone le tableau et renvoie une référence à un nouveau tableau.

Notez également que:

Pour les références, les chaînes et les nombres (et non l'objet réel), slice()copie les références d'objet dans le nouveau tableau. Le tableau d'origine et le nouveau se réfèrent au même objet. Si un objet référencé change, les modifications sont visibles à la fois dans les nouveaux tableaux et dans les tableaux d'origine.

Les primitives telles que les chaînes et les nombres sont immuables, donc les modifications de la chaîne ou du nombre sont impossibles.

En Javascript, les techniques de copie profonde dépendent des éléments d'un tableau. Commençons par là.

Trois types d'éléments

Les éléments peuvent être: des valeurs littérales, des structures littérales ou des prototypes.

// Literal values (type1)
const booleanLiteral = true;
const numberLiteral = 1;
const stringLiteral = 'true';

// Literal structures (type2)
const arrayLiteral = [];
const objectLiteral = {};

// Prototypes (type3)
const booleanPrototype = new Bool(true);
const numberPrototype = new Number(1);
const stringPrototype = new String('true');
const arrayPrototype = new Array();
const objectPrototype = new Object(); // or `new function () {}`

À partir de ces éléments, nous pouvons créer trois types de tableaux.

// 1) Array of literal-values (boolean, number, string) 
const type1 = [true, 1, "true"];

// 2) Array of literal-structures (array, object)
const type2 = [[], {}];

// 3) Array of prototype-objects (function)
const type3 = [function () {}, function () {}];

Les techniques de copie profonde dépendent des trois types de tableaux

En fonction des types d'éléments dans le tableau, nous pouvons utiliser diverses techniques pour copier en profondeur.

• Tableau de valeurs littérales (type1)
  Le [...myArray], myArray.splice(0), myArray.slice()et les myArray.concat()techniques peuvent être utilisées pour de profondes tableaux de copie avec des valeurs littérales (booléen, nombre et cordes) seulement; où l'opérateur Spread [...myArray]a les meilleures performances ( https://measurethat.net/Benchmarks/Show/4281/0/spread-array-performance-vs-slice-splice-concat ).

• Tableau de valeurs littérales (type1) et structures littérales (type2)
  La JSON.parse(JSON.stringify(myArray))technique peut être utilisée pour copier en profondeur des valeurs littérales (booléen, nombre, chaîne) et des structures littérales (tableau, objet), mais pas des objets prototypes.

• Tous les tableaux (type1, type2, type3)
  La $.extend(myArray)technique jQuery peut être utilisée pour copier en profondeur tous les types de tableaux. Des bibliothèques comme Underscore et Lo-dash offrent des fonctions de copie en profondeur similaires à jQuery $.extend() , mais ont des performances inférieures. Plus surprenant, $.extend()ses performances sont supérieures à celles de la JSON.parse(JSON.stringify(myArray))technique http://jsperf.com/js-deep-copy/15 .
  Et pour les développeurs qui évitent les bibliothèques tierces (comme jQuery), vous pouvez utiliser la fonction personnalisée suivante; qui a des performances supérieures à $ .extend et copie en profondeur tous les tableaux.

function copy(aObject) {
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

Donc pour répondre à la question ...

Question

var arr1 = ['a','b','c'];
var arr2 = arr1;

J'ai réalisé que arr2 fait référence au même tableau que arr1, plutôt qu'à un nouveau tableau indépendant. Comment puis-je copier le tableau pour obtenir deux tableaux indépendants?

Réponse

Étant donné qu'il arr1s'agit d'un tableau de valeurs littérales (booléen, nombre ou chaîne), vous pouvez utiliser n'importe quelle technique de copie approfondie décrite ci-dessus, où l'opérateur d'étalement ...a les performances les plus élevées.

// Highest performance for deep copying literal values
arr2 = [...arr1];

// Any of these techniques will deep copy literal values as well,
//   but with lower performance.
arr2 = arr1.slice();
arr2 = arr1.splice(0);
arr2 = arr1.concat();
arr2 = JSON.parse(JSON.stringify(arr1));
arr2 = $.extend(true, [], arr1); // jQuery.js needed
arr2 = _.extend(arr1); // Underscore.js needed
arr2 = _.cloneDeep(arr1); // Lo-dash.js needed
arr2 = copy(arr1); // Custom-function needed - as provided above

Vous pouvez utiliser des spreads ...de tableaux pour copier des tableaux.

const itemsCopy = [...items];

De plus, si vous souhaitez créer un nouveau tableau avec celui existant en faisant partie:

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

Les spreads de tableaux sont désormais pris en charge dans tous les principaux navigateurs, mais si vous avez besoin d'un support plus ancien, utilisez tapuscript ou babel et compilez vers ES5.

Plus d'informations sur les spreads

Aucune jQuery nécessaire ... Exemple de travail

var arr2 = arr1.slice()

Cela copie le tableau de la position de départ 0jusqu'à la fin du tableau.

Il est important de noter que cela fonctionnera comme prévu pour les types primitifs (chaîne, nombre, etc.), et d'expliquer également le comportement attendu pour les types de référence ...

Si vous avez un tableau de types Reference, dites de type Object. Le tableau sera copié, mais les deux tableaux contiendront des références aux mêmes Object. Donc, dans ce cas, il semblerait que le tableau soit copié par référence même si le tableau est réellement copié.

Une alternative à sliceis concat, qui peut être utilisée de 2 manières. Le premier d'entre eux est peut-être plus lisible car le comportement souhaité est très clair:

var array2 = [].concat(array1);

La deuxième méthode est:

var array2 = array1.concat();

Cohen (dans les commentaires) a souligné que cette dernière méthode a de meilleures performances .

La façon dont cela fonctionne est que la concatméthode crée un nouveau tableau composé des éléments de l'objet sur lequel il est appelé, suivis des éléments de tous les tableaux qui lui sont passés en tant qu'arguments. Donc, quand aucun argument n'est passé, il copie simplement le tableau.

Lee Penkman, également dans les commentaires, les points que s'il y a une chance array1est undefined, vous pouvez retourner un tableau vide comme suit:

var array2 = [].concat(array1 || []);

Ou, pour la deuxième méthode:

var array2 = (array1 || []).concat();

Notez que vous pouvez aussi le faire avec slice: var array2 = (array1 || []).slice();.

Voici comment je l'ai fait après avoir essayé de nombreuses approches:

var newArray = JSON.parse(JSON.stringify(orgArray));

Cela créera une nouvelle copie complète non liée à la première (pas une copie superficielle).

De plus, cela ne clonera évidemment pas les événements et les fonctions, mais la bonne chose que vous pouvez le faire en une seule ligne, et il peut être utilisé pour tout type d'objet (tableaux, chaînes, nombres, objets ...)

Certaines des méthodes mentionnées fonctionnent bien lorsque vous travaillez avec des types de données simples tels que nombre ou chaîne, mais lorsque le tableau contient d'autres objets, ces méthodes échouent. Lorsque nous essayons de passer un objet d'un tableau à un autre, il est passé en tant que référence, pas l'objet.

Ajoutez le code suivant dans votre fichier JavaScript:

Object.prototype.clone = function() {
    var newObj = (this instanceof Array) ? [] : {};
    for (i in this) {
        if (i == 'clone') 
            continue;
        if (this[i] && typeof this[i] == "object") {
            newObj[i] = this[i].clone();
        } 
        else 
            newObj[i] = this[i]
    } return newObj;
};

Et utilisez simplement

var arr1 = ['val_1','val_2','val_3'];
var arr2 = arr1.clone()

Ça va marcher.

Depuis ES2015,

var arr2 = [...arr1];

Personnellement, je pense qu'Array.from est une solution plus lisible. Soit dit en passant, méfiez-vous de la prise en charge de son navigateur.

//clone
let x = [1,2,3];
let y = Array.from(x);

//deep clone
let clone = arr => Array.from(arr,item => Array.isArray(item) ? clone(item) : item);
let x = [1,[],[[]]];
let y = clone(x);

Important!

La plupart des réponses ici fonctionnent pour des cas particuliers .

Si vous ne vous souciez pas de l'utilisation d'objets et d'accessoires profonds / imbriqués ( ES6 ):

let clonedArray = [...array]

mais si vous voulez faire un clone profond, utilisez plutôt ceci:

let cloneArray = JSON.parse(JSON.stringify(array))

Pour les utilisateurs de lodash:

let clonedArray = _.clone(array) Documentation

et

let clonedArray = _.cloneDeep(array) Documentation

Si vous êtes dans un environnement ECMAScript 6 , en utilisant l' opérateur Spread, vous pouvez le faire de cette façon:

var arr1 = ['a','b','c'];
var arr2 = [...arr1]; //copy arr1
arr2.push('d');

console.log(arr1)
console.log(arr2)

<script src="http://www.wzvang.com/snippet/ignore_this_file.js"></script>

Ajout à la solution de array.slice (); sachez que si vous avez des tableaux multidimensionnels, les sous-tableaux seront copiés par des références. Ce que vous pouvez faire est de boucler et de découper () chaque sous-tableau individuellement

var arr = [[1,1,1],[2,2,2],[3,3,3]];
var arr2 = arr.slice();

arr2[0][1] = 55;
console.log(arr2[0][1]);
console.log(arr[0][1]);

function arrCpy(arrSrc, arrDis){
 for(elm in arrSrc){
  arrDis.push(arrSrc[elm].slice());
}
}

var arr3=[];
arrCpy(arr,arr3);

arr3[1][1] = 77;

console.log(arr3[1][1]);
console.log(arr[1][1]);

les mêmes choses vont au tableau d'objets, ils seront copiés par référence, vous devez les copier manuellement

Les valeurs primitives sont toujours transmises par sa valeur (copiée). Les valeurs composées sont cependant transmises par référence.

Alors, comment copions-nous cet arr?

let arr = [1,2,3,4,5];

Copier un tableau dans ES6

let arrCopy = [...arr]; 

Copier n tableau dans ES5

let arrCopy = arr.slice(); 
let arrCopy = [].concat(arr);

Pourquoi `laisser arrCopy = arr` ne passe pas par valeur?

Passer d'une variable à une autre sur des valeurs composées telles que Object / Array se comporte différemment. En utilisant l'opérateur asign sur les valeurs de copand, nous transmettons une référence à un objet. C'est pourquoi la valeur des deux tableaux change lors de la suppression / ajout d'éléments arr.

Exceptions:

arrCopy[1] = 'adding new value this way will unreference';

Lorsque vous affectez une nouvelle valeur à la variable, vous modifiez la référence elle-même et cela n'affecte pas l'objet / tableau d'origine.

Lire la suite

Comme nous le savons en Javascript, les tableaux et les objets sont par référence, mais comment pouvons-nous faire pour copier le tableau sans changer le tableau d'origine plus tard?

Voici quelques façons de procéder:

Imaginez que nous ayons ce tableau dans votre code:

var arr = [1, 2, 3, 4, 5];

1) Boucle à travers le tableau dans une fonction et retourne un nouveau tableau, comme ceci:

 function newArr(arr) {
      var i=0, res = [];
      while(i<arr.length){
       res.push(arr[i]);
        i++;
       }
   return res;
 }

2) En utilisant la méthode de tranche, la tranche est pour couper une partie du tableau, elle coupera une partie de votre tableau sans toucher l'original, dans la tranche, si ne spécifiez pas le début et la fin du tableau, elle coupera le tout tableau et essentiellement faire une copie complète du tableau, afin que nous puissions facilement dire:

var arr2 = arr.slice(); // make a copy of the original array

3) Également la méthode de contact, c'est pour fusionner deux tableaux, mais nous pouvons simplement spécifier l'un des tableaux, puis cela fait essentiellement une copie des valeurs dans le nouveau tableau contacté:

var arr2 = arr.concat();

4) Également la méthode stringify et parse, ce n'est pas recommandé, mais peut être un moyen facile de copier un tableau et des objets:

var arr2 = JSON.parse(JSON.stringify(arr));

5) Méthode Array.from, ce n'est pas largement pris en charge, avant utilisation, vérifiez le support dans différents navigateurs:

const arr2 = Array.from(arr);

6) Manière ECMA6, également pas entièrement prise en charge, mais les babelJs peuvent vous aider si vous souhaitez transpiler:

const arr2 = [...arr];

let a = [1,2,3];

Vous pouvez maintenant effectuer l'une des opérations suivantes pour créer une copie d'un tableau.

let b = Array.from(a); 

OU

let b = [...a];

OU

let b = new Array(...a); 

OU

let b = a.slice(); 

OU

let b = a.map(e => e);

Maintenant, si je change un,

a.push(5); 

Alors, a est [1,2,3,5] mais b est toujours [1,2,3] car il a une référence différente.

Mais je pense que dans toutes les méthodes ci-dessus, Array.from est meilleur et fait principalement pour copier un tableau.

Je préférerais personnellement cette façon:

JSON.parse(JSON.stringify( originalObject ));

Dans mon cas particulier, je devais m'assurer que la baie restait intacte, cela a donc fonctionné pour moi:

// Empty array
arr1.length = 0;
// Add items from source array to target array
for (var i = 0; i < arr2.length; i++) {
    arr1.push(arr2[i]);
}

Faites une copie du tableau / objet multidimensionnel:

function deepCopy(obj) {
   if (Object.prototype.toString.call(obj) === '[object Array]') {
      var out = [], i = 0, len = obj.length;
      for ( ; i < len; i++ ) {
         out[i] = arguments.callee(obj[i]);
      }
      return out;
   }
   if (typeof obj === 'object') {
      var out = {}, i;
      for ( i in obj ) {
         out[i] = arguments.callee(obj[i]);
      }
      return out;
   }
   return obj;
}

Merci à James Padolsey pour cette fonction.

Source: ici

Dan, pas besoin d'utiliser des astuces sophistiquées. Il vous suffit de faire une copie de arr1 en procédant ainsi.

var arr2 = new Array(arr1);

Maintenant arr1et arr2sont deux variables de tableau différentes stockées dans des piles distinctes. Vérifiez cela sur jsfiddle .

Lorsque nous voulons copier un tableau à l'aide de l'opérateur d'affectation ( =), il ne crée pas de copie, il copie simplement le pointeur / la référence sur le tableau. Par exemple:

const oldArr = [1,2,3];

const newArr = oldArr;  // now oldArr points to the same place in memory 

console.log(oldArr === newArr);  // Points to the same place in memory thus is true

const copy = [1,2,3];

console.log(copy === newArr);  // Doesn't point to the same place in memory and thus is false

Souvent, lorsque nous transformons des données, nous voulons conserver intacte notre infrastructure de données initiale (par exemple, un tableau). Nous le faisons en faisant une copie exacte de notre tableau afin que celui-ci puisse être transformé tandis que celui initial reste intact.

Façons de copier un tableau:

const oldArr = [1,2,3];

// Uses the spread operator to spread out old values into the new array literal
const newArr1 = [...oldArr];

// Slice with no arguments returns the newly copied Array
const newArr2 = oldArr.slice();

// Map applies the callback to every element in the array and returns a new array
const newArr3 = oldArr.map((el) => el);

// Concat is used to merge arrays and returns a new array. Concat with no args copies an array
const newArr4 = oldArr.concat();

// Object.assign can be used to transfer all the properties into a new array literal
const newArr5 = Object.assign([], oldArr);

// Creating via the Array constructor using the new keyword
const newArr6 = new Array(...oldArr);

// For loop
function clone(base) {
	const newArray = [];
    for(let i= 0; i < base.length; i++) {
	    newArray[i] = base[i];
	}
	return newArray;
}

const newArr7 = clone(oldArr);

console.log(newArr1, newArr2, newArr3, newArr4, newArr5, newArr6, newArr7);

Soyez prudent lorsque des tableaux ou des objets sont imbriqués!:

Lorsque les tableaux sont imbriqués, les valeurs sont copiées par référence. Voici un exemple de la façon dont cela pourrait entraîner des problèmes:

let arr1 = [1,2,[1,2,3]]

let arr2 = [...arr1];

arr2[2][0] = 5;  // we change arr2

console.log(arr1);  // arr1 is also changed because the array inside arr1 was copied by reference

N'utilisez donc pas ces méthodes lorsqu'il y a des objets ou des tableaux dans votre tableau que vous souhaitez copier. c'est-à-dire n'utilisez ces méthodes que sur des tableaux de primitives.

Si vous voulez cloner en profondeur un tableau javascript utilisé JSON.parseconjointement avec JSON.stringify, comme ceci:

let arr1 = [1,2,[1,2,3]]

let arr2 = JSON.parse(JSON.stringify(arr1)) ;

arr2[2][0] = 5;

console.log(arr1);  // now I'm not modified because I'm a deep clone

Performance de copie:

Alors, lequel choisissons-nous pour des performances optimales. Il s'avère que la méthode la plus verbeuse, la forboucle a les performances les plus élevées. Utilisez lefor boucle pour une copie très gourmande en CPU (grandes / nombreuses baies).

Après cela, la .slice()méthode a également des performances décentes et est également moins détaillée et plus facile à implémenter pour le programmeur. Je suggère d'utiliser .slice()pour votre copie quotidienne des tableaux qui ne sont pas très gourmands en ressources processeur. Évitez également d'utiliser le JSON.parse(JSON.stringify(arr))(beaucoup de surcharge) si aucun clone profond n'est requis et que les performances sont un problème.

Test de performance de la source

Si votre tableau contient des éléments du type de données primitif tels que int, char ou string, etc., vous pouvez utiliser l'une de ces méthodes qui renvoie une copie du tableau d'origine, telle que .slice () ou .map () ou l'opérateur d'étalement ( grâce à ES6).

new_array = old_array.slice()

ou

new_array = old_array.map((elem) => elem)

ou

const new_array = new Array(...old_array);

MAIS si votre tableau contient des éléments complexes tels que des objets (ou des tableaux) ou des objets plus imbriqués , alors, vous devrez vous assurer que vous faites une copie de tous les éléments du niveau supérieur au dernier niveau sinon référence de l'intérieur les objets seront utilisés et cela signifie que la modification des valeurs dans les éléments d'objet dans new_array affectera toujours old_array. Vous pouvez appeler cette méthode de copie à chaque niveau comme faisant une COPIE PROFONDE de old_array.

Pour la copie en profondeur, vous pouvez utiliser les méthodes susmentionnées pour les types de données primitifs à chaque niveau en fonction du type de données ou vous pouvez utiliser cette méthode coûteuse (mentionnée ci-dessous) pour effectuer une copie en profondeur sans faire beaucoup de travail.

var new_array = JSON.parse(JSON.stringify(old_array));

Il existe de nombreuses autres méthodes que vous pouvez utiliser en fonction de vos besoins. Je n'ai mentionné que certains d'entre eux pour donner une idée générale de ce qui se passe lorsque nous essayons de copier un tableau dans l'autre par valeur .

Si vous souhaitez créer une nouvelle copie d'un objet ou d'un tableau, vous devez copier explicitement les propriétés de l'objet ou des éléments du tableau, par exemple:

var arr1 = ['a','b','c'];
var arr2 = [];

for (var i=0; i < arr1.length; i++) {
   arr2[i] = arr1[i];
}

Vous pouvez rechercher plus d'informations sur Google sur les valeurs primitives immuables et les références d'objets mutables.

L'utilisation de la copie complète de jQuery peut être effectuée comme suit:

var arr2 = $.extend(true, [], arr1);

Vous pouvez également utiliser l'opérateur d'étalement ES6 pour copier le tableau

var arr=[2,3,4,5];
var copyArr=[...arr];

Voici quelques autres façons de copier:

const array = [1,2,3,4];

const arrayCopy1 = Object.values(array);
const arrayCopy2 = Object.assign([], array);
const arrayCopy3 = array.map(i => i);
const arrayCopy4 = Array.of(...array );

Vous pouvez utiliser ES6 avec propagation Opeartor, son plus simple.

arr2 = [...arr1];

Il y a des limitations .. vérifier les documents Spread syntax @ mozilla

Exemples rapides:

1. Si les éléments du tableau sont des types primitifs (chaîne, nombre, etc.)

var arr1 = ['a','b','c'];
// arr1 and arr2 are independent and primitive elements are stored in 
// different places in the memory
var arr2 = arr1.slice(); 
arr2.push('d');
console.log(arr1); // [ 'a', 'b', 'c' ]
console.log(arr2); // [ 'a', 'b', 'c', 'd' ]

2. Si les éléments du tableau sont des littéraux d'objet, un autre tableau ({}, [])

var arr1 = [{ x: 'a', y: 'b'}, [1, 2], [3, 4]];
// arr1 and arr2 are independent and reference's/addresses are stored in different
// places in the memory. But those reference's/addresses points to some common place
// in the memory.
var arr2 = arr1.slice(); 
arr2.pop();      // OK - don't affect arr1 bcos only the address in the arr2 is
                 // deleted not the data pointed by that address
arr2[0].x = 'z'; // not OK - affect arr1 bcos changes made in the common area 
                 // pointed by the addresses in both arr1 and arr2
arr2[1][0] = 9;	 // not OK - same above reason

console.log(arr1); // [ { x: 'z', y: 'b' }, [ 9, 2 ], [ 3, 4 ] ]
console.log(arr2); // [ { x: 'z', y: 'b' }, [ 9, 2 ] ]

3. Solution pour 2 : Deep Copy par élément par élément

var arr1 = [{ x: 'a', y: 'b'}, [1, 2], [3, 4]];
arr2 = JSON.parse(JSON.stringify(arr1));
arr2.pop();	  // OK - don't affect arr1
arr2[0].x = 'z';  // OK - don't affect arr1
arr2[1][0] = 9;	  // OK - don't affect arr1

console.log(arr1); // [ { x: 'a', y: 'b' }, [ 1, 2 ], [ 3, 4 ] ]
console.log(arr2); // [ { x: 'z', y: 'b' }, [ 9, 2 ] ]

Voici une variante:

var arr1=['a', 'b', 'c'];
var arr2=eval(arr1.toSource());
arr2.push('d');
console.log('arr1: '+arr1+'\narr2: '+arr2);
/*
 *  arr1: a,b,c
 *  arr2: a,b,c,d
 */

Il y a le nouveau Array.from, mais malheureusement, au moment de la rédaction de ce document, il n'est pris en charge que sur les versions récentes de Firefox (32 et supérieures). Il peut être simplement utilisé comme suit:

var arr1 = [1, 2, 3];
console.log(Array.from(arr1)); // Logs: [1, 2, 3]

Référence: ici

Ou Array.prototype.mappeut être utilisé avec une fonction d'identité:

function identity(param)
{
    return param;
}

var arr1 = [1, 2, 3],
    clone = arr1.map(identity);

Référence: ici

Pour les tableaux contenant des objets ES6

cloneArray(arr) {
    return arr.map(x => ({ ...x }));
}