數組Slice（）修改原始數組

Question

我正在嘗試將數組復制到新變量，然后修改數組。

碼：

  var test = [ { test: "test1", arr: ["1", "2", "3"] }, { test: "test2", arr: ["4", "5", "6"] } ]; console.log("test before", test); console.log("test before", test[1]); console.log("test before", test[1].arr); var t2 = [...test] // used .slice(0) but same result t2[1].arr = t2[1].arr.slice(0, 1); console.log("test after", test[1].arr); console.log("t2", t2[1].arr); 

輸出：

test before:  
0: {test: "test1", arr: Array(3)} //arr: (3) ["1", "2", "3"]
1: {test: "test2", arr: Array(1)} // arr: (1) ["4"]

test before: 
{test: "test2", arr: Array(3)} //arr: (1) "4"

test before: (3) ["4", "5", "6"]

test after: ["4"]

t2: ["4"]

如您所見，spread operator / slice（）正在修改原始值。
我還嘗試使用var t2 = Object.Create(test) [相同結果]。

Answer 1

將對象/數組分配給變量時，它不會復制它。 我只是設置了對原始對象/數組的引用。 您應該使用Object.assign進行淺層克隆，並使用JSON.parse(JSON.stringify(obj))進行深層克隆
注意 ：數組實際上是javascript中的對象

  var test = [ { test: "test1", arr: ["1", "2", "3"] }, { test: "test2", arr: ["4", "5", "6"] } ]; console.log("test before", test); console.log("test before", test[1]); console.log("test before", test[1].arr); var t2 = JSON.parse(JSON.stringify(test)) // used .slice(0) but same result t2[1].arr = t2[1].arr.slice(0, 1); console.log("test after", test[1].arr); console.log("t2", t2[1].arr); 

但是，此JSON.parse(JOSN.stringify(obj))效率不高，在某些情況下會給出錯誤的輸出。

使用jQuery

 $.extend(true, {}, obj); 

使用lodash

 _.cloneDeep(value) 

在這里您可以找到有關此的詳細信息

Answer 2

數組散布（或Array.slice（））只是原始數組的淺表副本，因此子對象仍然相同。

有關對象深層復制的更多詳細信息，請看一下： 如何在Javascript中克隆對象數組？