jquery 如何克隆一个JavaScript对象数组?

ljo96ir5  于 2023-06-22  发布在  jQuery
关注(0)|答案(9)|浏览(133)

我有一个结果集,它是一个对象数组。我需要克隆这个,这样我就可以对它进行更改,而不接触原始数据。

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的变量,并将其设置为“Source Data”。
我希望能够对这个新的数据变量进行更改,但似乎在对其进行更改时,源数据正在更改(w2ui.grid.records)。
有没有合适的方法来克隆这个集合,这样我就可以有一个新的数据示例来修改?

vcirk6k6

vcirk6k61#

编辑

深度克隆使用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);
6xfqseft

6xfqseft2#

ES6:
如果你也想克隆对象,你必须展开数组和对象:

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

s8vozzvw3#

如果你使用的是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>
6mw9ycah

6mw9ycah4#

Lodash有一个专门用于此的方法,称为clonedeep。如果你不想拉入整个库,有一个独立的包:
https://www.npmjs.com/package/lodash.clonedeep

moiiocjp

moiiocjp5#

这是因为数组是作为指针保存的,所以设置一个新变量只是指向同一个数组。
我知道的最简单的方法是用切片...

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

这将创建一个包含所有原始值的新数组,因为您是从第一个值(0)开始切片的。
如果你需要一个深度克隆,因为你的数组也包含对象/数组,试试这个...
https://github.com/pvorb/clone

yyhrrdl8

yyhrrdl86#

下面的代码为我深克隆一个对象数组,其中没有存储任何函数。

const deepClone = input => {
        if (typeof input !== 'object') return input;
        const output = Array.isArray(input) ? [] : {};
        const keys = Object.keys(input);
        keys.forEach(key => {
            output[key] = deepClone(input[key]);
        });
        return output;
    };
9njqaruj

9njqaruj7#

structuredClone

在JavaScript中深度复制对象数组的现代方法是使用structuredClone

const arr1 =[{'obj1':1}, {'obj2':2}];
const arr2 = structuredClone(arr1); //copy arr1
arr2.push({'obj3':3});

console.log(arr1); //[{'obj1':1}, {'obj2':2}]
console.log(arr2); //[{'obj1':1}, {'obj2':2}, {'obj3':3}]
oo7oh9g9

oo7oh9g98#

有很多种方法-

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);
tjjdgumg

tjjdgumg9#

您可以通过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对象
var newObj = [...existingObj]

相关问题