Gostaria de saber como faço uma cópia de um array sem a referência.
Exemplo do que eu gostaria de fazer:
var a = [1,2,3,4];
var b = a;
a[0] = 3;
b[0] = "nao me copie!"
console.log(a[0]) //mostrar 3
console.log(b[0]) //mostrar frase nao me copie!
Você pode usar o método slice
sem passar argumentos para uma cópia rasa (fonte), ou algo como o angular.copy
para uma cópia profunda:
var b = a.slice();
// ou
var b = angular.copy(a);
No seu exemplo acima não faz diferença usar um ou outro, mas se os elementos do array fossem objetos complexos, a cópia rasa simplesmente copiaria as referências para os elementos, enquanto a cópia profunda também copiaria os elementos em si (recursivamente):
var a = [true, 10, "teste", [1,2,3], { outro:"objeto" }];
var b1 = a.slice(); // cópia rasa
var b2 = angular.copy(a); // cópia profunda
// Modificando "a"
a[0] = false; // Não afeta b1 nem b2
a[1] = 20; // Idem
a[2] = "blábláblá"; // Idem
a[3][1] = 20; // Afeta b1, pois o sub-array modificado é o mesmo
a[4].um = a[4].outro; // Idem, para o objeto referenciado
delete a[4].outro;
// Visualização
document.body.innerHTML += "<pre>a = " + JSON.stringify(a) + "</pre>";
document.body.innerHTML += "<pre>b1 = a.slice() = " + JSON.stringify(b1) + "</pre>";
document.body.innerHTML += "<pre>b2 = angular.copy(a) = " + JSON.stringify(b2) + "</pre>";
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Se a array não tiver objectos que precisem também de referências, ou elementos do DOM, ie seja composto por primitivos* ou objetos/arrays de primitivos* podes fazer uma cópia profunda assim:
var b = JSON.parse(JSON.stringify(a));
No teu exemplo funcionaria corretamente:
var a = [1,2,3,4];
var b = JSON.parse(JSON.stringify(a));
a[0] = 3;
b[0] = "nao me copie!"
console.log(a[0]) // 3
console.log(b[0]) // nao me copie!
Nota: * - sobre tipagem em JavaScript ler aqui
Usando ES6:
var a = ["teste", "teste1"];
var b =[... a];
a[0] = "teste3";
b[0] = "teste4";
console.log(a) //mostrar teste3
console.log(b) //mostrar teste4
Há várias formas de se copiar sem fazer referência, e o .slice() é uma delas. Porém, eu estava tendo o problema de que o .slice() para arrays dentro de arrays vai pegar apenas a referência em vez de copiar de fato, como mostrado na resposta aceita da pergunta deste link:
"Please note that these methods will clone the Array object itself, array contents however are copied by reference and are not deep cloned."
array1 = [ [ [1], [2], [3] ], [ [4], [5], [6] ] ];
// array "pai", com 2 "filhos", e 6 "netos"
array2 = array1.slice();
// Copia os filhos, mas com os "netos" faz referência
Então para resolver isso, eu fiz o seguinte:
for (var x = 0; x < array1.length; x++) {
array2.push ( [ array1[0][0].slice(), array1[0][1].slice(), array1[0][2].slice() ] )
}
Que no fim das contas
array1 === array2
sem ter nenhuma referência.