Pourquoi la modification d'un tableau en JavaScript affecte-t-elle les copies du tableau ?

Question

J'ai écrit le JavaScript suivant :

var myArray = ['a', 'b', 'c'];
var copyOfMyArray = myArray;
copyOfMyArray.splice(0, 1);
alert(myArray); // alerts ['b','c']
alert(copyOfMyArray); // alerts ['b','c']

var myNumber = 5;
var copyOfMyNumber = myNumber;
copyOfMyNumber = copyOfMyNumber - 1;
alert(myNumber); // alerts 5
alert(copyOfMyNumber); // alerts 4        

Ce code déclare une variable myArray et lui attribue la valeur d'un tableau. Il déclare ensuite une deuxième variable copyOfMyArray et lui attribue la valeur myArray . Il effectue une opération sur copyOfMyArray puis alerte les deux myArray y copyOfMyArray . D'une manière ou d'une autre, lorsque j'effectue une opération sur copyOfMyArray il apparaît que la même opération est effectuée sur myArray .

Le code fait ensuite la même chose avec une valeur numérique : Il déclare une variable myNumber et lui attribue une valeur numérique. Il déclare ensuite une deuxième variable copyOfMyNumber et lui attribue la valeur myNumber . Il effectue une opération sur copyOfMyNumber puis alerte les deux myNumber y copyOfMyNumber . Ici, j'obtiens le comportement attendu : différentes valeurs pour myNumber y copyOfMyNumber .

Quelle est la différence entre un tableau et un nombre en JavaScript ? Il semble que la modification d'un tableau change la valeur d'une copie du tableau, alors que la modification d'un nombre ne change pas la valeur d'une copie du nombre.

Je suppose que pour une raison quelconque, le tableau est désigné par une référence et le nombre par une valeur, mais pourquoi ? Comment puis-je savoir à quel comportement m'attendre avec d'autres objets ?

Answer 1

Un tableau, ou un objet en javascript, contient toujours la même référence, sauf si vous le clonez ou le copiez. Voici un exemple :

http://plnkr.co/edit/Bqvsiddke27w9nLwYhcl?p=preview

// for showing that objects in javascript shares the same reference

var obj = {
  "name": "a"
}

var arr = [];

//we push the same object
arr.push(obj);
arr.push(obj);

//if we change the value for one object
arr[0].name = "b";

//the other object also changes
alert(arr[1].name);

Pour le clone d'objet, nous pouvons utiliser .clone() dans jquery et angular.copy(), ces fonctions créeront un nouvel objet avec une autre référence. Si vous connaissez d'autres fonctions pour faire cela, n'hésitez pas à me le dire, merci !

Answer 2

Pour les tableaux contenant des objets, vous pouvez modifier l'utilisation de JSON.parse et JSON.strinigfy pour changer le type du tableau en une référence d'objet en une chaîne de caractères, puis en un tableau sans avoir à vous soucier du tableau d'origine.

var array = [{name:'John', age:34, logs:'[]'}, {name:'David', age:43, logs:'[3]'}];
  var array2 = JSON.parse(JSON.stringify(array)); // turn object to function output
  array2[0].age++;
  alert(JSON.stringify(array));
  alert(JSON.stringify(array2));