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

ES6：

如果您也想克隆对象，则必须散布数组和对象：

const newArrayOfObjects = [
  ...originalArrayOfObject
].map(i => ({ ...i}));

Answer 3

有多种方法可以做到 -

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 4

Lodash有一种专门针对此的方法clonedeep。如果您不想拉入整个库，那么它有一个独立的包：

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

Answer 5

由于您使用的是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 6

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

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

这个方法的第一个参数是要更新的数组，我传递一个空对象，因为我想要一个新的新对象。

我们也可以使用以下语法，它们相同但更短：

let newObject = [...oldObject];

Answer 7

这是因为数组被保存为指针，所以设置一个新变量只是指向同一个数组。

我所知道的最简单的方法是用切片......

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

这会创建一个包含所有原始值的新数组，因为您要从第一个（0）切片。

如果您需要深度克隆，因为您的数组也包含对象/数组，请尝试此...

https://github.com/pvorb/clone

Answer 8

您可以通过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]

同样的语法也可以用于javascripts对象

var newObj = [... existingObj]

如何克隆Javascript对象数组？

8 个答案: