如果我在 JavaScript 中拼接克隆数组，为什么我的原始数组会被拼接？

Question

我有以下代码：

 var coords = [
     {lat: 39.57904, lng: -8.98094, type: "a"}, // A
     {lat: 39.55436, lng: -8.95493, type: "b"}, // B
     {lat: 39.56634, lng: -8.95836, type: "c"} // C
 ];

 var travelingOptions = [];

 getAllTravelingOptions();

 function getAllTravelingOptions(){
     coords.forEach((point, pos) => {
         let c = coords;
         delete c[pos];
         console.log(c);
         console.log(coords);
     });
 }

为什么变量 c 和 coords 总是相同的？如果我在 c 上删除，它会反映在 coords 上的操作。这是正常行为吗？

Answer 1

因为c的赋值，得到了数组coords的引用。

对 coords 的任何更改都会影响 c，直到将新值分配给 c。

如果使用 Array.slice 复制数组，您会得到一个新数组，但具有相同的对象引用。更改内部的一个对象时，您正在更改 c.

中具有相同引用的同一对象

var coords = [
         {lat: 39.57904, lng: -8.98094, type: "a"}, // A
         {lat: 39.55436, lng: -8.95493, type: "b"}, // B
         {lat: 39.56634, lng: -8.95836, type: "c"} // C
     ],
     c = coords.slice();

console.log(c);
coords[1].type = 'foo';
console.log(c);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

赋值不会克隆数组，它只会创建对原始 object/array 的引用。您可以使用 Array.prototype.slice() 进行浅拷贝：

let c = coords.slice();

Answer 3

这是因为 c 和 coords 现在引用同一个对象。为防止这种情况，请使用 let c = coords.slice() 创建 coords 的副本并将其分配给 c。

let original = [1, 2, 3, 4];
let test = original;
let testSlice = original.slice();

original[0] = 12345;

console.log('test: ', test)
console.log('testSlice: ', testSlice)

但是，新数组仍将引用旧数组所引用的相同对象。快速解决此问题的方法是 'cloning' 这些对象。

let objs = [
  {'obj': 1},
  {'obj': 2},
  {'obj': 3}
];

let newArr = [];

objs.forEach(obj => {
 let newObj = {};
 Object.keys(obj).forEach(key => {
   newObj[key] = obj[key];
  });
  newArr.push(newObj);
});

console.log('old: ', objs)
console.log('new: ', newArr)

newArr[0].obj = 12345;

console.log('old after changing obj on new: ', objs)

如果我在 JavaScript 中拼接克隆数组，为什么我的原始数组会被拼接？

Why does my original array get spliced if I splice the cloned array in JavaScript?

javascript

arrays

variables

behavior