Javascript 操作對象數組

Question

今天我發現了一些我不明白的東西，你能向我解釋一下它是如何工作的：

let places = [
  { num: 1, name: 'a'},
  { num: 2, name: 'b'},
  { num: 3, name: 'c'},
]

const order = (arr, numOut) => {
  let newArr = new Array(...arr)
  newArr[1].num = numOut;

  console.log(newArr);
}

order(places,3);
console.log(places);

// OUTPUT :
// [ { num: 1, name: 'a' }, { num: 3, name: 'b' }, { num: 3, name: 'c' } ]
// [ { num: 1, name: 'a' }, { num: 3, name: 'b' }, { num: 3, name: 'c' } ]

let places = [
  { num: 1, name: "a" },
  { num: 2, name: "b" },
  { num: 3, name: "c" },
];

const order = (arr) => {
  let newArr = new Array(...arr);
  newArr.push({ num: 4, name: "d" });

  console.log(newArr);
};

order(places);
console.log(places);

// OUTPUT :
// [{ num: 1, name: 'a' },{ num: 2, name: 'b' },{ num: 3, name: 'c' },{ num: 4, name: 'd' }]
//[ { num: 1, name: 'a' }, { num: 2, name: 'b' }, { num: 3, name: 'c' } ]

那么為什么原始數組被修改了，而使用 push 方法只修改了新數組呢？

Answer 1

在let newArr = new Array(...arr); 您正在創建數組的淺表副本。 換句話說，您有一些 object 引用的數組，並且您正在創建相同 object 引用的不同數組。

在您的示例中：

• 數組 A 包含對 object C、object D 和 ZA8CFDE6331BD59EB2AC96F8911C4B66 的引用。
• 數組 B 還包含對 object C、object D 和 ZA8CFDE6331BD59EB2AC96F8911Z46 的引用。
• newArr[1].num = numOut; 更改 object 的num值 D.
• 在數組 B 上調用push()方法並在其中添加對新創建的 object F 的引用

在此處閱讀有關淺拷貝和深拷貝的更多信息： 深拷貝和淺拷貝有什么區別？