避免改变 JavaScript 数组

Question

下面是我的代码

let traces = { ref: null, min: null, max: null, avg: null };
let learning = {
    "Application": "b3",
    "t": [
        {
            "d": 2,
            "BinaryType": "Current"
        },
        {
            "d": 3,
            "BinaryType": "Max"
        },
        {
            "d": 4,
            "BinaryType": "Avg"
        },
        {
            "d": 5,
            "BinaryType": "Min"
        }
    ]
};

let traceArr = Object.assign([],learning.t);

traceArr.forEach(trace => {

    if (trace.BinaryType == 'Current') {            
        traces.ref = Object.assign({}, learning);   
        traces.ref.t = [];
        traces.ref.t.push(trace);
        traces.ref.t[0].BinaryType = 'Refeyrence';            
    }

    if (trace.BinaryType == 'Min') {           
        traces.min = Object.assign({}, learning);
        traces.min.t = [];
        traces.min.t.push(trace);            
    }

    if (trace.BinaryType == 'Max') {            
        traces.max = Object.assign({}, learning);
        traces.max.t = []
        traces.max.t.push(trace);            
    }

    if (trace.BinaryType == 'Avg') {            
        traces.avg = Object.assign({}, learning);
        traces.avg.t = [];
        traces.avg.t.push(trace);            
    }          
});

console.log("Output",traces);
console.log("Traces- Should be non mutated",traceArr);
console.log("Original",learning.t)

我假设当我修改数组的内容时，原始（学习）对象的内容不应该受到影响。

两个问题：

• 我假设 traces.ref.t = [];应该更改新创建的对象中的引用。不是吗？

• console.log("Original",learning.t) 输出如下 表示内容已更改（文本 Refeyrence 在数组迭代期间修改）。为什么会这样？还有什么 我应该做些什么来避免它？

  '原创' [ { d: 2 , BinaryType：“参考” }, { d: 3 , 二进制类型：“最大” }, { d: 4 , 二进制类型：“平均” }, { d: 5 , 二进制类型：“最小” } ]

Answer 1

您似乎遇到了两个问题，但都与更改共享对象有关。

我假设 traces.ref.t = [];应该更改新创建的对象中的引用。不是吗？

执行[] 将创建一个新的数组实例，但traces.ref 一开始仍使用共享的traces 对象。您可能想要创建traces 对象的副本。由于它没有任何嵌套值，因此在您的情况下使用扩展语法是实现这一目标的一种简单方法：

const newTrace = { ...traces }

console.log("Original",learning.t) 输出如下，表示内容已更改（在数组迭代期间修改的文本Refeyrence）。为什么会这样？我应该怎么做才能避免它？

这是因为trace 对象被推入数组，然后被修改。您还可以通过使用对象展开来创建浅拷贝来解决此问题：

newTrace.ref.t.push({ ...trace });

仅通过这些更改，您的原始代码可能如下所示：

let traces = { ref: null, min: null, max: null, avg: null };
let learning = {
  Application: "b3",
  t: [
    {
      d: 2,
      BinaryType: "Current"
    },
    {
      d: 3,
      BinaryType: "Max"
    },
    {
      d: 4,
      BinaryType: "Avg"
    },
    {
      d: 5,
      BinaryType: "Min"
    }
  ]
};

let traceArr = Object.assign([], learning.t);

traceArr.forEach(trace => {
  if (trace.BinaryType == "Current") {
    const newTrace = { ...traces };
    newTrace.ref = Object.assign({}, learning);
    newTrace.ref.t = [];
    newTrace.ref.t.push({ ...trace });
    newTrace.ref.t[0].BinaryType = "Refeyrence";
  }

  if (trace.BinaryType == "Min") {
    const newTrace = { ...traces };
    newTrace.min = Object.assign({}, learning);
    newTrace.min.t = [];
    newTrace.min.t.push({ ...trace });
  }

  if (trace.BinaryType == "Max") {
    const newTrace = { ...traces };
    newTrace.max = Object.assign({}, learning);
    newTrace.max.t = [];
    newTrace.max.t.push({ ...trace });
  }

  if (trace.BinaryType == "Avg") {
    const newTrace = { ...traces };
    newTrace.avg = Object.assign({}, learning);
    newTrace.avg.t = [];
    newTrace.avg.t.push({ ...trace });
  }
});

console.log("Output", traces);
console.log("Traces- Should be non mutated", traceArr);
console.log("Original", learning.t);

Here is this code in the TypeScript playground。它包含一些类型错误，但这是避免突变的最少更改次数。

Answer 2

我认为 Object.assign() 不会进行深层复制。我很确定它正在创建一个新数组，其元素指向原始数组。进行深拷贝的最简单方法是将其转换为 json 并返回。

let traceArr = JSON.parse(JSON.stringify(learning.t));

最大的缺点是，如果你复制的任何东西都有循环引用，它就不起作用。

编辑：

为了说明正在发生的事情，学习对象开始为

let learning = {
    "Application": "b3",
    "t": [Object1, Object2, ...]
}

然后发生这种情况，

let traceArr = Object.assign([], learning.t);

这会创建一个新数组并将 learning.t 的内容复制到其中。此时，traceArr 看起来像

traceArr = [Object1, Object2, ...]

然后，它遍历 traceArr 中的项目，这些项目与 learning.t 中的相同对象，只是指向不同的数组。

if (trace.BinaryType == 'Current') {            
    // At this point, trace === Object1

    // Shallow copy of learning
    traces.ref = Object.assign({}, learning);
    // traces.ref = { "Application": "b3", "t": [Object1, Object2, ...] }

    // Create a new array for traces.ref.t
    traces.ref.t = [];
    // traces.ref = { "Application": "b3", "t": [] }

    // Adds Object1 (same object from learning.t) to the new array
    traces.ref.t.push(trace);
    // traces.ref = { "Application": "b3", "t": [Object1] }

    // Modify Object1
    traces.ref.t[0].BinaryType = 'Refeyrence';            
}

如果您不希望 traces.ret.t 的元素指向与 learning.t 相同的对象，则需要创建新对象，即您需要推送 trace 的副本而不是 trace。或者，正如我所建议的，将 traceArr 制作为 learning.t 的深层副本，以便所有对象都是新的，并且没有任何内容是共享的。