How to clone an array of Javascript objects?

Question

I have a result set, which is an array of objects. I need to clone this so that I can make changes to it without touching the source data.

var data = w2ui.grid.records, exclude = Array('recid', 'w2ui'); // Exclude these data points from the pivot // Modify our tempData records to remove HTML $.each(data, function(key, value) { $.each(value, function(_key, _value) { if(jQuery.inArray(_key, exclude) != -1) { delete data[key][_key]; }else{ data[key][_key] = $('<div>'+_value+'</div>').text(); // <div></div> for those which are simply strings. } }); }); 

In this example, I created a variable called data and set it to "Source Data".

I expected that I could make changes to this new data variable, but it seems that when I make changes to it, the original data changes ( w2ui.grid.records ).

Is there a way to clone this set so that I can change a new data instance?

Answer 1

EDIT

Using deep cloning JSON.parse(JSON.stringify(arr));

Invalid clone Use slice(0);

 var arr = [{'obj1':1}, {'obj2':2}]; var clone = arr.slice(0); console.log(clone); 

 var arr = [{'obj1':1}, {'obj2':2}] var clone = JSON.parse(JSON.stringify(arr)); console.log(clone); 

Answer 2

There are various ways to do this -

 let arr = [{ 'obj1': 1 }, { 'obj2': 2 }]; // 1 const arr2 = arr.slice(); console.log(arr2); // 2 const arr3 = [].concat(arr); console.log(arr3); // 3 // or use the new ES6 Spread const arr4 = [...arr]; console.log(arr4); // 4 const arr5 = Array.from(arr); console.log(arr5); 

Answer 3

Since you are using jquery, you are trying to use extend :

 var arr = [{'obj1':1}, {'obj2':2}]; var clone = jQuery.extend(true, [], arr); clone[0]['obj1']=10; console.log(clone); console.log(arr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

Lodash has a method specifically for this called clonedeep . There is a separate package if you do not want to pull out the entire library:

https://www.npmjs.com/package/lodash.clonedeep

Answer 5

This is because the array is held as a pointer, so setting a new variable simply points to the same array.

The easiest way I know is to slice ...

 var data = w2ui.grid.records.slice(0); 

Creates a new array with all the original values, because you slice the first (0).

If you need a deep clone because your array contains objects / arrays, try this ...

https://github.com/pvorb/clone

Answer 6

You can achieve this from ES6 distribution operators

 var arr1 = [1] var arr2 = arr1 arr1 === arr2 //true arr2.push(2) arr2 //[1, 2] arr1 //[1, 2] var arr3 = [...arr1] //create a copy of existing array arr1 === arr3 //false arr2 === arr3 //false arr3.push(3) arr3 //[1, 2, 3] arr1 //[1, 2] arr2 //[1, 2] 

The same syntax can be used for javascripts object

var newObj = [... existingObj]

Answer 7

I am using the new ES6 Object.assign method:

 let oldObject = [1,3,5,"test"]; let newObject = Object.assign({}, oldObject); 

the first argument to this method is an updatable array, and I skip the empty object because I need a new fresh object.

we can also use the following syntax, which is the same, but shorter:

 let newObject = [...oldObject];