Question

我正在尝试从数组中删除一个对象。所以我使用了splice但是在拼接之前我制作了一个对象的副本

this.program.lstProgramdetails.forEach((lph: any) => {
            this.rtGridUp = Object.assign({}, lph);
            this.rtGridMid = Object.assign({}, lph);
            this.rtGridDown = Object.assign({}, lph);
            lph.Details.forEach((inm: any, index: number) => {              
                if (inm.Track !== null && inm.Track.TrackDateIn !== null) {
                    this.rtGridMid.Details.splice(index, 1);
                    this.rtGridDown.Details.splice(index, 1);
                } else if (inm.Track === null) {
                    this.rtGridUp.Details.splice(index, 1);
                    this.rtGridDown.Details.splice(index, 1);
                } else {
                    this.rtGridUp.Details.splice(index, 1);
                    this.rtGridMid.Details.splice(index, 1);
                }
            });
                    });

根据条件，两个数组应该被切片，一个应该得到没有拼接的对象。

但是在控制台中观看它会清除所有3个阵列。有没有办法在不影响复制对象的情况下拼接该对象？

Answer 1

说明

这里的问题是Object.assign({}, objectToClone)确实创建了您要克隆的对象的副本，但保留了嵌套对象的引用

const objectToClone = { a: 'a', b: { b: 'b' } };
const clone = Object.assign({}, objectToClone);

clone.b.b = 'c';
console.log(objectToClone, clone);

如您所见，该对象未被深度克隆。

有关详细信息，请参阅Is this a good way to clone an object in ES6? 问题。

纯函数

纯函数是一种在不改变现有值More details about pure and impure functions

的情况下计算新值的函数

所以，要避免像你在这里遇到的副作用。实现这一目标的一种巧妙方法是使用像slice这样的纯函数，它返回一个新值，而splice改变它及其可能的引用。

解决问题的方法

this.program.lstProgramdetails.forEach((lph: any) => {
  lph.Details.forEach((inm: any, index: number) => {
    const keys = [null, null];
    if (inm.Track !== null && inm.Track.TrackDateIn !== null) {
      keys = ['rtGridMid', 'rtGridDown'];
    } else if (inm.Track === null) {
      keys = ['rtGridUp', 'rtGridDown'];
    } else {
      keys = ['rtGridUp', 'rtGridMid'];
    }

    // ES7 syntax
    this[keys[0]].Details = [
      ...lph.Details.slice(0, index),
      ...lph.Details.slice(0, index + 1)
    ];
    this[keys[1]].Details = [
      ...lph.Details.slice(0, index),
      ...lph.Details.slice(0, index + 1)
    ];

    // Or if you prefer
    this[keys[0]].Details = lph.Details.slice(0, index).concat(
      lph.Details.slice(0, index + 1)
    );
    this[keys[1]].Details = lph.Details.slice(0, index).concat(
      lph.Details.slice(0, index + 1)
    );
  });
});

This is a cool video explaining it也显示了ES6语法

我没有测试这段代码片段，只是为了解释目的而编写它。

我希望你会发现这个答案有用！

Typescript：Splice an Object也会影响复制对象

1 个答案:

说明

纯函数

解决问题的方法