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

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

本文关键字：拼接 数组 为什么 原始 我的 JavaScript 如果      更新时间：2023-09-26

我有以下代码：

 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上的操作。这是正常行为吗？

因为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; }

赋值不会克隆数组，它只创建对原始对象/数组的引用。您可以使用 Array.prototype.slice(( 制作一个浅拷贝：

let c = coords.slice();

发生这种情况是因为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)

但是，新数组仍将引用与旧数组相同的对象。对此的快速解决方法是"克隆"这些对象。

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)

相关文章：