克隆对象数组失败

Question

I fetch some fancy data from an MVC Controller and asign it to the global variable "data_Visits". Then, later in the party, I need to operate repeatedly on the original data in "data_Visits".

To not change values in "data_Visits", I thought to clone it and then operate on the clone. Still, the following seems to change values in "data_Visits":

var data = data_Visits.slice(0);

data.forEach(function (d) {
    d.date = new Date(ToJavaScriptDate(d.date));
    d.result1 = +d.result1;
    d.result2 = +d.result2;
});

Would anybody happen to know WHY ?

Answer 1

Because you're making a clone of an array of references. You need to clone each array entry specifically, otherwise both arrays would contain the different collections of references to the same objects.

What you need to do is called a deep copy.

As soon as you've specified jquery tag - here is an example:

var data = $.extend(true, [], data_Visits);

References:

• http://api.jquery.com/jQuery.extend/

PS: as a simple example:

This is what you basically do:

var a = { foo: 'bar' };
var b = a;

and even though you have 2 variables - they refer to the same object.

Answer 2

I agree, extend is what you want. If you use an array - you can use slice.

var d = {bob: 'yes'}
var b = jQuery.extend({}, d);

b.bob = 'no'
// shows b modified, d is not
console.log(b, d);

here is a nice referencde: How do I correctly clone a JavaScript object?