Javascript Map函数不保留原始对象

Question

I have a scenario wherein i have

var data = [
    {
        "x": 1,
        "y": 0.27,
        "classifier": 1
    },
    {
        "x": 2,
        "y": 0.88,
        "classifier": 1
    }
]

I want another object data2 with y=1-y, which i obtain with:

var data2 = data.map(function(el) {el.y = 1-el.y; return el});

data2[0]
Object {x: 1, y: 0.73, classifier: 1}

data2[1]
Object {x: 2, y: 0.12, classifier: 1}

which is the correct form that i want the data in. However the issue is i want to preserve the original data as well. Right now even data has mutated data.

data[0]
Object {x: 1, y: 0.73, classifier: 1}

data[1]
Object {x: 2, y: 0.12, classifier: 1}

Is map the right function to use here? Am i using it correctly?

Answer 1

You're modifying the original element object, which isn't a full deep copy of the original data.

Create a copy of el in the function and then calculate the new .y . For example:

var data2 = data.map(function(el) {
  return {
    x : el.x,
    y : 1-el.y,
    classifier : el.classifier
  };
});

Answer 2

While creating a new array, you let its values point to the original objects, which you mutate by assigning to their object properties.

Instead you could also create (shallow) copies of the objects with Object.assign :

var data2 = data.map(function(el) { 
    return Object.assign({}, el, { y: 1-el.y });
});

Or with arrow function:

var data2 = data.map( el => Object.assign({}, el, { y: 1-el.y }) );

 var data = [ { "x": 1, "y": 0.27, "classifier": 1 }, { "x": 2, "y": 0.88, "classifier": 1 } ] var data2 = data.map( el => Object.assign({}, el, { y: 1-el.y }) ); console.log (data);