使用对象分配和映射问题防止原始数据发生突变

Question

我有一个包含对象的数组：data = [{id:"a", position:{x:10,y:10}, parent:'3a'},{id:"b", position:{x:100,y:100}}]我正在使用映射方法创建新的数组，我想在其中有新的道具位置，但基于现有的，而不改变数据数组的原始值。我知道我必须使用对象分配来防止变异，但我不知道如何设置基于位置而不更改原始位置：

if (e.parent) {
const newObject = Object.assign({}, e, {
position: {
x: (e.position.x -= bbX / 2 - parent.x),
y: (e.position.y -= bbY / 2 - parent.y)
}
});
return newObject;
}
return e;
});

我尝试过这个和类似的，但当涉及到的位置时，我仍然看到原始数据阵列中的突变

Answer 1

问题是由以下行引起的：

x: (e.position.x -= bbX / 2 - parent.x),
y: (e.position.y -= bbY / 2 - parent.y)

当您使用减法赋值运算符-=时，您还将结果赋值给作为原始数据的左变量，只需使用减法运算符-即可：

const data = [{id:"a", position:{x:10,y:10}, parent:'3a'},{id:"b", position:{x:100,y:100}}];
const newData = data.reduce((arr, cur) => {
let e = Object.assign({}, cur, {position: {x: (cur.position.x - 5),y: (cur.position.y - 5)}});
arr.push(e);
return arr;
},[]);
console.log("original data:" + JSON.stringify(data));
console.log("new data:" + JSON.stringify(newData));