避免更改JavaScript数组

Question

Below is my code

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)

I assume that when I modify the content of the array, the content of the original (learning) object should not getting affected.

Two questions:

• I was assuming that traces.ref.t = []; should change the reference in the new created object. Does it not?

• The console.log("Original",learning.t) output is as below which indicates that the content got changed (text Refeyrence which was modified during array iteration). Why is this happening? And what should I be doing to avoid it?

  'Original' [ { d: 2 , BinaryType: " Refeyrence " }, { d: 3 , BinaryType: "Max" }, { d: 4 , BinaryType: "Avg" }, { d: 5 , BinaryType: "Min" } ]

Answer 1

It looks like you're having two issues, but both with mutateing a shared object.

I was assuming that traces.ref.t = []; should change the reference in the new created object. Does it not?

Doing [] will create a new array instance, but traces.ref is still using the shared traces object at the very start. You likely want to create a copy of the traces object. Since it doesn't have any nested values, using spread syntax is an easy way to achieve that in your case:

const newTrace = { ...traces }

The console.log("Original",learning.t) output is as below which indicates that the content got changed (text Refeyrence which was modified during array iteration). Why is this happening? And what should I be doing to avoid it?

This one is because the trace object is being pushed into the array and then it's being modified. You can work around this by also using an object spread to create a shallow copy:

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

With only these changes, you original code may look like this:

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 . It contains a few type errors but this is the minimum number of changes to avoid mutations.

Answer 2

I don't think Object.assign() does a deep copy. I'm pretty sure it's creating a new array whose elements point to the original array. The simplest way to do a deep copy is to convert it to json and back.

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

The big disadvantage there is that if whatever you're copying has circular references, it won't work.

EDIT:

To illustrate what's happening, the learning object starts off as

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

Then this happens,

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

Which creates a new array and copies the contents of learning.t into it. At this point, traceArr looks like

traceArr = [Object1, Object2, ...]

Then, it loops over the items in traceArr, which are the same objects from learning.t, just pointed to from a different array.

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';            
}

If you don't want traces.ret.t's elements to point to the same objects as learning.t, you need to create new objects, ie you need to push a copy of trace instead of trace. Or, as I suggested, make traceArr a deep copy of learning.t so that all the objects are new and nothing is shared.