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

Question

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

          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));