如何克隆一個Javascript數組對象？

Question

我有一個結果集，它是一個對象數組。我需要克隆這個，以便我可以對其進行更改，而不必觸摸原始數據。

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. 
     } 
    }); 
}); 

在這個例子中，我創建了一個名爲data並將其設置爲我的「源數據」變量。

我希望能夠對這個新的數據變量進行更改，但似乎在對其進行更改時，源數據正在更改（w2ui.grid.records）。

是否有適當的方法來克隆這個集合，以便我可以修改一個新的數據實例？

Answer 1

編輯

深克隆使用JSON.parse(JSON.stringify(arr));

淺克隆使用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

Lodash有一個特別針對這個被稱爲clonedeep的方法。有一個獨立的包，如果你不想在整個庫拉：

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

Answer 3

這是因爲數組保持爲指針，所以設置一個新的變量只是指向同一陣列。

我知道的最簡單的方法是用切片...

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

這就造成了所有的原始值的新陣列，因爲你從第一個（0）切片。

如果你需要一個深克隆，因爲你的數組包含對象/數組也試試這個...

https://github.com/pvorb/clone

Answer 4

有多種方法做它 -

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 5

您可以通過ES6傳播運營商實現此目的

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] 

相同的語法可以用於Javascript角目的以及

變種newObj = [...existingObj]

Answer 6

由於您使用jQuery你麪包車嘗試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 7

我使用新的ES6 Object.assign方法：

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

的第一個參數此方法是要更新的數組和I p屁股空的物體，因爲我想要一個新的新物體。

我們也可以使用下面的語法，這是相同的，但較短的：

let newObject = [...oldObject];