JS陣列和物件實現深拷貝

for 迴圈

//for 迴圈 copy
function
copyfun
(arr)
return copyarr;
}let arr1 =[1
,2,3
,4];
let arr2 =
copyfun
(arr1)
;//[1, 2, 3, 4]
console.
log(arr2)
//[1, 2, 3, 4]
arr2[0]
=10;console.
log(arr1)
//[1, 2, 3, 4]
console.
log(arr2)
//[10, 2, 3, 4]

slice 方法實現深拷貝

let arr1 =[1
,2,3
,4];
let arr2 = arr1.
slice(0
);arr2[0]
=10;console.
log(arr1)
;//[1, 2, 3, 4]
console.
log(arr2)
;//[10, 2, 3, 4]

concat 方法實現深拷貝

let arr1 =[1
,2,3
,4];
let arr2 = arr1.
concat()
;arr2[0]
=10;console.
log(arr1)
;//[1, 2, 3, 4]
console.
log(arr2)
;//[10, 2, 3, 4]

es6 擴充套件運算實現深拷貝

let arr1 =[1
,2,3
,4];
let arr2 =
[...arr1]
;arr2[0]
=10;console.
log(arr1)
//[1, 2, 3, 4]
console.
log(arr2)
//[10, 2, 3, 4]

json.parse() 與 json.stringify()

let arr1 =[1
,2,3
,4];
let arr2 =
json
.parse
(json
.stringify
(arr1));
arr2[0]
=10;console.
log(arr1)
//[1, 2, 3, 4]
console.
log(arr2)
//[10, 2, 3, 4]

物件的迴圈

function
copyfun
(obj)
;for
(let key in obj)
return copyobj
}let person1 =
let person2 =
copyfun
(person1)
;person2.name =
"mamo"
console.
log(person1)
// console.
log(person2)
//

json.parse() 與 json.stringify()

let obj1 =
, a: undefined,
b:function
(n, m)
, c:
symbol
("foo")}
;let obj2 =
json
.parse
(json
.stringify
(obj1));
console.
log(obj1)
//, a: undefined, b: ƒ, c: symbol(foo)}
console.
log(obj2)
//} obj2.y.d =2;
//修改obj2.y.d
console.
log(obj1)
//, a: undefined, b: ƒ, c: symbol(foo)}
console.
log(obj2)
//}

此辦法可實現多維物件的深拷貝。但是請注意：進行json.stringify() 序列化的過程中會把undefined、任意的函式以及 symbol 值，在序列化過程中會被忽略（出現在非陣列物件的屬性值中時）或者被轉換成 null（出現在陣列中時），也就是null值正常保留。

es6 擴充套件運算

let person1 =
let person2 =
person2.name =
"mamo"
console.
log(person1)
//console.
log(person2)
//

object.assign()

請注意：object.assign() 只能實現一維物件的深拷貝。

let obj1 =
;let obj2 = object.
assign
(, obj1)
;console.
log(obj1)
// console.
log(obj2)
// obj2.x =2;
// 修改 obj2.x
console.
log(obj1)
// console.
log(obj2)
// let obj3 =};
let obj4 = object.
assign
(, obj3)
; // }
// }
obj4.y.d =2;
// 修改 obj4.y.d
console.
log(obj3)
// }
console.
log(obj4)
// }

js陣列，物件深拷貝

無事，封裝了乙個js深拷貝的方法基本思路 deepcopy data data 可能是陣列也可能是物件 1.判斷data是陣列物件或者其他資料型別 2.宣告空陣列或者空物件 res 3.分別處理如果陣列元素或物件屬性值不是陣列或物件，空陣列或物件之間接收元素 res.push data i...

js 陣列物件深拷貝

如何區分深拷貝與淺拷貝，簡單點來說，就是假設b複製了a，當修改a時，看b是否會發生變化，如果b也跟著變了，說明這是淺拷貝，拿人手短，如果b沒變，那就是深拷貝，自食其力我們希望在改變新的陣列物件的時候，不改變原陣列物件我們在使用深拷貝的時候，一定要弄清楚我們對深拷貝的要求程度是僅深拷貝...

js 陣列物件深拷貝

結論物件的拷貝不能採用直接賦值的方式。踩過的坑如下 formdata本來是父元件傳過來的，但是我不想直接用，於是我直接賦值給乙個formdatacopy的物件。但是詭異的事情發生了，就是在我填寫自己的表單元件的時候，一旦表單的資料發生的變化時，本來是formdatacopy的值發生變化，但是 fo...

JS陣列和物件實現深拷貝

js陣列，物件深拷貝

js 陣列物件深拷貝

js 陣列物件深拷貝

相關推薦