1. 程式人生 > >js實現對象或者數組深拷貝

js實現對象或者數組深拷貝

ber dex 改變 () 類型 拷貝 ice function vue

今天遇到個問題,就是vue綁定的數組在push中所有的數組都會跟著改變。這個主要是因為 JavaScript中對象或者數組等引用類型,直接拷貝,改變一個另外一個也會改變;

有個簡單的方法就是先轉換為字符串再轉換為json

var arr = [1,2,3];
var arr1 = arr;
arr1.push(4);
console.log(arr);  //[1,2,3,4]
console.log(arr1);//[1,2,3,4]

上面這是沒轉換的.

1、通過JSON.stringfy()和JSON.parse()轉換

var arr = [1,2,3];

var arr1 = JSON.stringify(arr);
var arr2 = JSON.parse(arr1); arr2.push(4); console.log(arr); //[1, 2, 3] console.log(arr1);//字符串[1,2,3] console.log(arr2);//[1, 2, 3, 4]
2、通過for循環
function copyArry(arr) {
    var res=[];
    for(var i=0;i<arry1.length;i++){
        res.push(arry1[i])
    }
    return res
}
var arry1=[1,2,3,4];
var arry2=copyArry(arry1);
arry2.push(
5) console.log(arry1)//[1,2,3,4] console.log(arry2)//[1,2,3,4,5]
3、slice 方法實現數組的深拷貝
var arry1=[1,2,3,4];
var arry2=arry1.slice(0);
arry2.push(5)
console.log(arry1)//[1,2,3,4]
console.log(arry2)//[1,2,3,4,5]

4、concat 方法實現數組的深拷貝

var arry1=[1,2,3,4];
    var arry2=arry1.concat();
    arry2.push(5)
console.log(arry1)//[1,2,3,4]
console.log(arry2)//[1,2,3,4,5]


js實現對象或者數組深拷貝