为什么当我在 TS 中更改对象的副本时，原始对象也会更改？答案

【问题标题】：Why when I change copy of object in TS, original one also changes?为什么当我在 TS 中更改对象的副本时，原始对象也会更改？
【发布时间】：2019-06-05 09:15:19
【问题描述】：

我正在导入 redux 存储并使用扩展运算符创建存储属性的副本。然后当我改变这个副本时，原来的属性也会改变。

当我使用copy = JSON.parse(JSON.stringify(original)) 时，一切正常。

export const move = (moveData: IMove): BoardActionTypes => {
  const { board } = store.getState();
  console.log(board.pieces.byId["19"]); // {row: 3, col: 7}

  const newById: IPiecesById = { ...board.pieces.byId };

  newById["19"].col = 4;
  newById["19"].row = 4;

  console.log(board.pieces.byId["19"]); // {row: 4, col: 4}
  console.log(newById["19"]); // {row: 4, col: 4}

  //...
};

【问题讨论】：

标签： reactjs typescript redux

【解决方案1】：

您的问题是关于对象的浅拷贝和深拷贝。

使用扩展运算符时，您会创建对象的浅表副本（就像使用老式 Object.assign 时一样）。

当您使用 JSON 解析时 - 您将获得对象的深层副本（或“深层克隆”）。

Shallow Copy，顾名思义，意味着外部对象是一个新对象，而嵌套对象保持不变。一旦你深入了解了 redux，spear 操作符在大多数情况下就足够了，但要记住这是一个重要的区别。

您可能还想阅读my question on this matter 和this article。

【讨论】：

【解决方案2】：

我有两个选择。

1.使用underscore.js

var foo = { row: 0, col:0 };
var bar = _.clone(foo);
bar.row = 99;

console.log(foo);
console.log(bar);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"&gt;&lt;/script&gt;

2。原版JS

function clone(obj) {
  if (obj === null || typeof(obj) !== 'object')
  return obj;

  var copy = obj.constructor();

  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) {
      copy[attr] = obj[attr];
    }
  }

  return copy;
}

var foo = { row: 0, col: 0 };
var bar = clone(foo);
bar.row = 99;

console.log(foo);
console.log(bar);

【讨论】：

【解决方案3】：

发生在你身上的是 - 两个具有相同引用的对象。

如果您不想使用外部库或辅助函数（如果您不打算广泛使用它），您可以使用以下内容：

const newById = board.pieces.byId.map((item) => ({ ...item }));

（我假设byId是一个数组，map创建一个新数组）

【讨论】：