如何在JavaScript中克隆对象数组?

Array.slice可以用来复制一个数组或一个数组的一部分…

这将与字符串和数字工作..-改变一个数组中的字符串不会影响另一个数组-但对象仍然只是通过引用复制，所以改变一个数组中引用的对象会影响另一个数组。

下面是一个JavaScript撤销管理器的示例，它可能对此有用:http://www.ridgway.co.za/archive/2007/11/07/simple-javascript-undo-manager-for-dtos.aspx

浅拷贝的问题是所有对象都没有被克隆。虽然对每个对象的引用在每个数组中都是唯一的，但一旦最终获取到它，您将处理与以前相同的对象。你克隆它的方式没有问题…使用Array.slice()也会得到相同的结果。

深层复制出现问题的原因是您最终得到了循环对象引用。深度会尽可能地深，如果你有一个圈，它会无限延伸，直到浏览器昏厥。

如果数据结构不能表示为有向无环图，那么我不确定您是否能够找到用于深度克隆的通用方法。循环图提供了许多棘手的极端情况，由于这不是一个常见的操作，我怀疑是否有人编写了一个完整的解决方案(如果有可能的话——可能没有!)但是我现在没有时间来写一个严格的证明)。我在这个页面上发现了一些关于这个问题的好的评论。

如果你需要一个带有循环引用的对象数组的深层副本，我相信你将不得不编写自己的方法来处理你的专用数据结构，这样它就是一个多通道克隆:

1. 在第一轮中，克隆数组中不引用其他对象的所有对象。记录每个物体的起源。
2. 在第二轮，把这些物体连在一起。

正如Daniel Lew提到的，循环图有一些问题。如果我有这个问题，我要么添加特殊的clone()方法到有问题的对象或记住哪些对象我已经复制。

我用一个变量copyCount来做，它在你每次复制你的代码时增加1。copyCount小于当前复制进程的对象将被复制。如果不是，则应该引用已经存在的副本。这就需要从原文链接到副本。

还有一个问题:内存。如果您从一个对象引用到另一个对象，那么浏览器很可能无法释放这些对象，因为它们总是从某个地方引用。您必须进行第二次传递，将所有复制引用设置为Null。(如果你这样做，你不必有一个copyCount，但一个布尔isCopied就足够了，因为你可以在第二次传递中重置值。)

我可能有一种简单的方法来做到这一点，而不需要做痛苦的递归，也不知道有关对象的所有细节。使用jQuery，只需使用jQuery $.toJSON(myObjectArray)将对象转换为JSON，然后将JSON字符串计算回对象。砰!搞定了，搞定了!问题解决了。：）

var oldObjArray = [{ Something: 'blah', Cool: true }];
var newObjArray = eval($.toJSON(oldObjArray));

$.evalJSON($.toJSON(origArray));

如果你只需要一个浅拷贝，一个非常简单的方法是:

new_array = old_array.slice(0);

忘记eval()(它是JavaScript中最常被误用的特性，会使代码变慢)和slice(0)(只适用于简单的数据类型)

这对我来说是最好的解决方案:

Object.prototype.clone = function() {
var myObj = (this instanceof Array) ? [] : {};
for (i in this) {
if (i != 'clone') {
if (this[i] && typeof this[i] == "object") {
myObj[i] = this[i].clone();
}
else
myObj[i] = this[i];
}
}
return myObj;
};

jQuery:

var target = [];
$.each(source, function() {target.push($.extend({}, this));});

这个问题让我很沮丧。显然，当你发送一个泛型数组到$。扩展方法。因此，为了解决这个问题，我添加了一个小检查，它可以完美地与通用数组、jQuery数组和任何对象一起工作。

jQuery.extend({
deepclone: function(objThing) {
// return jQuery.extend(true, {}, objThing);
/// Fix for arrays, without this, arrays passed in are returned as OBJECTS! WTF?!?!
if ( jQuery.isArray(objThing) ) {
return jQuery.makeArray( jQuery.deepclone($(objThing)) );
}
return jQuery.extend(true, {}, objThing);
},
});

调用使用:

var arrNewArrayClone = jQuery.deepclone(arrOriginalArray);
// Or more simply/commonly
var arrNewArrayClone = $.deepclone(arrOriginalArray);

这对我来说很管用:

var clonedArray = $.map(originalArray, function (obj) {
return $.extend({}, obj);
});

如果你需要数组中对象的深度拷贝:

var clonedArray = $.map(originalArray, function (obj) {
return $.extend(true, {}, obj);
});

我的方法:

var temp = { arr : originalArray };
var obj = $.extend(true, {}, temp);
return obj.arr;

给我一个漂亮的，干净的，深克隆的原始数组-没有对象引用回原始:-)

jQuery扩展工作正常。你只需要指定你克隆的是一个数组而不是一个对象(注意extend方法的参数是[]而不是{}):

var clonedNodesArray = jQuery.extend([], nodesArray);

下面的代码将递归执行对象和数组的深度复制:

function deepCopy(obj) {
if (Object.prototype.toString.call(obj) === '[object Array]') {
var out = [], i = 0, len = obj.length;
for ( ; i < len; i++ ) {
out[i] = arguments.callee(obj[i]);
}
return out;
}
if (typeof obj === 'object') {
var out = {}, i;
for ( i in obj ) {
out[i] = arguments.callee(obj[i]);
}
return out;
}
return obj;
}

Source .

我之所以回答这个问题，是因为似乎没有一个简单而明确的解决方案来解决“在javascript中克隆对象数组”的问题:

function deepCopy (arr) {
var out = [];
for (var i = 0, len = arr.length; i < len; i++) {
var item = arr[i];
var obj = {};
for (var k in item) {
obj[k] = item[k];
}
out.push(obj);
}
return out;
}


// test case


var original = [
{'a' : 1},
{'b' : 2}
];


var copy = deepCopy(original);


// change value in copy
copy[0]['a'] = 'not 1';


// original[0]['a'] still equals 1

该解决方案迭代数组值，迭代对象键，将后者保存到一个新对象，并将该新对象推入到一个新数组。

看到# EYZ2。注意:简单的.slice()或[].concat()对于数组中的对象在是不够的。

使用structuredClone创建深度拷贝

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

array2 = structuredClone(array1);

然而，这个功能相对较新(Chrome 98, Firefox 94)，大约85%的用户是目前只提供，所以如果没有polyfill，它还没有准备好投入生产。

作为替代方案，您可以使用下面支持良好的基于json的解决方案之一。

使用JSON.parse创建深度副本

let clonedArray = JSON.parse(JSON.stringify(nodesArray))

总结一下下面的评论，这种方法的主要优点是它还克隆数组的内容，而不仅仅是数组本身。主要的缺点是它只能处理json序列化的内容，而且它的性能比spread方法慢30倍。

如果数组中有浅对象，并且IE6是可以接受的，那么更好的方法是将展开操作符与.map数组操作符结合使用。对于两层深的情况(如下面附录中的数组):

clonedArray = nodesArray.map(a => {return {...a}})

原因有两个:1)它的速度要快得多(参见下面的基准比较)，而且它还允许数组中的任何有效对象。

 [{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic1.jpg?raw=true', id: '1', isFavorite: false}, {url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic2.jpg?raw=true', id: '2', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic3.jpg?raw=true', id: '3', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic4.jpg?raw=true', id: '4', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic5.jpg?raw=true', id: '5', isFavorite: true},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic6.jpg?raw=true', id: '6', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic7.jpg?raw=true', id: '7', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic8.jpg?raw=true', id: '8', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic9.jpg?raw=true', id: '9', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic10.jpg?raw=true', id: '10', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic11.jpg?raw=true', id: '11', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic12.jpg?raw=true', id: '12', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic13.jpg?raw=true', id: '13', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic14.jpg?raw=true', id: '14', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic15.jpg?raw=true', id: '15', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic16.jpg?raw=true', id: '16', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic17.jpg?raw=true', id: '17', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic18.jpg?raw=true', id: '18', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic19.jpg?raw=true', id: '19', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic20.jpg?raw=true', id: '20', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic21.jpg?raw=true', id: '21', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic22.jpg?raw=true', id: '22', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic23.jpg?raw=true', id: '23', isFavorite: false}]

使用:

let clonedArray = JSON.parse(JSON.stringify(nodesArray))

或者:

clonedArray = nodesArray.map(a => {return {...a}})

map/spread方法每次传递花费0.000466毫秒，JSON。解析和JSON。Stringify 0.014771毫秒每传递

我认为我成功地编写了一个深度克隆任何JavaScript结构的通用方法，主要使用所有现代浏览器都支持的Object.create。代码是这样的:

function deepClone (item) {
if (Array.isArray(item)) {
var newArr = [];


for (var i = item.length; i-- !== 0;) {
newArr[i] = deepClone(item[i]);
}


return newArr;
}
else if (typeof item === 'function') {
eval('var temp = '+ item.toString());
return temp;
}
else if (typeof item === 'object')
return Object.create(item);
else
return item;
}

我们可以发明一个简单的递归数组方法来克隆多维数组。虽然嵌套数组中的对象保持对源数组中相应对象的引用，但数组不会。

Array.prototype.clone = function(){
return this.map(e => Array.isArray(e) ? e.clone() : e);
};


var arr = [ 1, 2, 3, 4, [ 1, 2, [ 1, 2, 3 ], 4 , 5], 6 ],
brr = arr.clone();
brr[4][2][1] = "two";
console.log(JSON.stringify(arr));
console.log(JSON.stringify(brr));

这将深度复制数组、对象、null和其他标量值，还将深度复制非本机函数上的任何属性(这很不常见，但也是可能的)。(为了提高效率，我们不尝试复制数组上的非数值属性。)

function deepClone (item) {
if (Array.isArray(item)) {
var newArr = [];
for (var i = item.length; i-- > 0;) {
newArr[i] = deepClone(item[i]);
}
return newArr;
}
if (typeof item === 'function' && !(/\(\) \{ \[native/).test(item.toString())) {
var obj;
eval('obj = '+ item.toString());
for (var k in item) {
obj[k] = deepClone(item[k]);
}
return obj;
}
if (item && typeof item === 'object') {
var obj = {};
for (var k in item) {
obj[k] = deepClone(item[k]);
}
return obj;
}
return item;
}

我用Object.assign解决了对象数组的克隆问题

const newArray = myArray.map(a => Object.assign({}, a));

或者用传播的语法更短

const newArray = myArray.map(a => ({...a}));

如果你只需要一个浅克隆，做这个克隆的最佳方法如下:

使用... ES6展开运算符。

这里有一个最简单的例子:

var clonedObjArray = [...oldObjArray];

通过这种方式，我们将数组扩展为单独的值，并使用[]操作符将其放入一个新数组中。

下面是一个更长的例子，展示了它的不同工作方式:

let objArray = [ {a:1} , {b:2} ];


let refArray = objArray; // this will just point to the objArray
let clonedArray = [...objArray]; // will clone the array


console.log( "before:" );
console.log( "obj array" , objArray );
console.log( "ref array" , refArray );
console.log( "cloned array" , clonedArray );


objArray[0] = {c:3};


console.log( "after:" );
console.log( "obj array" , objArray ); // [ {c:3} , {b:2} ]
console.log( "ref array" , refArray ); // [ {c:3} , {b:2} ]
console.log( "cloned array" , clonedArray ); // [ {a:1} , {b:2} ]

对于克隆对象，我只是建议ECMAScript 6 reduce():

const newArray = myArray.reduce((array, element) => array.push(Object.assign({}, element)), []);

但坦白说，我更喜欢恐龙的答案。我只是把这个版本放在这里作为另一个选择，但就我个人而言，我会使用map()作为恐龙的建议。

根据使用的是Underscore.js还是巴别塔，下面是深度克隆数组的不同方法的基准测试。

https://jsperf.com/object-rest-spread-vs-clone/2

看起来巴别塔是最快的。

var x = babel({}, obj)

JavaScript中深度克隆的一些优雅方法:

• < p > # EYZ0

• < p > # EYZ0

1. 用于克隆对象的普通JavaScript方法

2. 对JSON库深度克隆对象的巧妙利用

3. jQuery的$ .extend ()函数

4. 使用Mootools ` 克隆()函数克隆对象

此方法非常简单，您可以在不修改原始数组的情况下修改克隆。

// Original Array
let array = [{name: 'Rafael'}, {name: 'Matheus'}];


// Cloning Array
let clone = array.map(a => {return {...a}})


// Editing the cloned array
clone[1].name = 'Carlos';




console.log('array', array)
// [{name: 'Rafael'}, {name: 'Matheus'}]


console.log('clone', clone)
// [{name: 'Rafael'}, {name: 'Carlos'}]

我使用新的ECMAScript 6 Object.assign方法:

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

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

我们也可以使用这个语法，它是相同的，但更短:

let newObject = [...oldObject];

function deepCloneArray(array) {
return Array.from(Object.create(array));
}

var game_popularity = [
{ game: "fruit ninja", popularity: 78 },
{ game: "road runner", popularity: 20 },
{ game: "maze runner", popularity: 40 },
{ game: "ludo", popularity: 75 },
{ game: "temple runner", popularity: 86 }
];
console.log("sorted original array before clonning");
game_popularity.sort((a, b) => a.popularity < b.popularity);
console.log(game_popularity);




console.log("clone using object assign");
const cl2 = game_popularity.map(a => Object.assign({}, a));
cl2[1].game = "clash of titan";
cl2.push({ game: "logan", popularity: 57 });
console.log(cl2);




// Adding new array element doesnt reflect in original array
console.log("clone using concat");
var ph = []
var cl = ph.concat(game_popularity);


// Copied by reference ?
cl[0].game = "rise of civilization";


game_popularity[0].game = 'ping me';
cl.push({ game: "angry bird", popularity: 67 });
console.log(cl);


console.log("clone using ellipses");
var cl3 = [...game_popularity];
cl3.push({ game: "blue whale", popularity: 67 });
cl3[2].game = "harry potter";
console.log(cl3);


console.log("clone using json.parse");
var cl4 = JSON.parse(JSON.stringify(game_popularity));
cl4.push({ game: "home alone", popularity: 87 });
cl4[3].game ="lockhead martin";
console.log(cl4);


console.log("clone using Object.create");
var cl5 = Array.from(Object.create(game_popularity));
cl5.push({ game: "fish ville", popularity: 87 });
cl5[3].game ="veto power";
console.log(cl5);




// Array function
console.log("sorted original array after clonning");
game_popularity.sort((a, b) => a.popularity < b.popularity);
console.log(game_popularity);




console.log("Object.assign deep clone object array");
console.log("json.parse deep clone object array");
console.log("concat does not deep clone object array");
console.log("ellipses does not deep clone object array");
console.log("Object.create does not deep clone object array");

输出

sorted original array before clonning
[ { game: 'temple runner', popularity: 86 },
{ game: 'fruit ninja', popularity: 78 },
{ game: 'ludo', popularity: 75 },
{ game: 'maze runner', popularity: 40 },
{ game: 'road runner', popularity: 20 } ]
clone using object assign
[ { game: 'temple runner', popularity: 86 },
{ game: 'clash of titan', popularity: 78 },
{ game: 'ludo', popularity: 75 },
{ game: 'maze runner', popularity: 40 },
{ game: 'road runner', popularity: 20 },
{ game: 'logan', popularity: 57 } ]
clone using concat
[ { game: 'ping me', popularity: 86 },
{ game: 'fruit ninja', popularity: 78 },
{ game: 'ludo', popularity: 75 },
{ game: 'maze runner', popularity: 40 },
{ game: 'road runner', popularity: 20 },
{ game: 'angry bird', popularity: 67 } ]
clone using ellipses
[ { game: 'ping me', popularity: 86 },
{ game: 'fruit ninja', popularity: 78 },
{ game: 'harry potter', popularity: 75 },
{ game: 'maze runner', popularity: 40 },
{ game: 'road runner', popularity: 20 },
{ game: 'blue whale', popularity: 67 } ]
clone using json.parse
[ { game: 'ping me', popularity: 86 },
{ game: 'fruit ninja', popularity: 78 },
{ game: 'harry potter', popularity: 75 },
{ game: 'lockhead martin', popularity: 40 },
{ game: 'road runner', popularity: 20 },
{ game: 'home alone', popularity: 87 } ]
clone using Object.create
[ { game: 'ping me', popularity: 86 },
{ game: 'fruit ninja', popularity: 78 },
{ game: 'harry potter', popularity: 75 },
{ game: 'veto power', popularity: 40 },
{ game: 'road runner', popularity: 20 },
{ game: 'fish ville', popularity: 87 } ]
sorted original array after clonning
[ { game: 'ping me', popularity: 86 },
{ game: 'fruit ninja', popularity: 78 },
{ game: 'harry potter', popularity: 75 },
{ game: 'veto power', popularity: 40 },
{ game: 'road runner', popularity: 20 } ]


Object.assign deep clone object array
json.parse deep clone object array
concat does not deep clone object array
ellipses does not deep clone object array
Object.create does not deep clone object array

地图将从旧数组创建一个新数组(不引用旧数组)，在映射中创建一个新对象，迭代属性(键)，并将旧数组对象的值赋给新对象的相应属性。

这将创建完全相同的对象数组。

let newArray = oldArray.map(a => {
let newObject = {};
Object.keys(a).forEach(propertyKey => {
newObject[propertyKey] = a[propertyKey];
});
return newObject;
});

Lodash有cloneDeep函数用于以下目的:

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);

在JavaScript中，数组和对象复制会改变原始值，因此深复制是解决这个问题的解决方案。

深度复制实际上意味着创建一个新数组并复制值，因为无论它发生什么都不会影响原始数组。

JSON.parse和JSON.stringify是复制深的最好和最简单的方法。JSON.stringify()方法将JavaScript值转换为JSON字符串。JSON.parse()方法解析JSON字符串，构造由字符串描述的JavaScript值或对象。

深克隆

let a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].x.z=0


console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

更多详细信息:在这里阅读

这是我的解决方案。它适用于对象数组或Map。该解决方案还保留了方法。

深度复制实际上意味着创建一个新数组并复制值，因为无论它发生什么都不会影响原始数组。

这对我来说是最好的解决方案:

deepCopy(inputObj: any) {
var newObj = inputObj;
if (inputObj && typeof inputObj === "object") {
newObj = Object.prototype.toString.call(inputObj) === "[object Array]" ? [] : {};
for (var i in inputObj) {
newObj[i] = this.deepCopy(inputObj[i]);
}


//For maps
if(Object.prototype.toString.call(inputObj) === "[object Map]"){
newObj = new Map;
inputObj.forEach((v,k) =>{
newObj.set(k,this.deepCopy(v));
});
}
}
return newObj;
}

person1 = {
name: 'Naved',
last: 'Khan',
clothes: {
jens: 5,
shirts: 10
}
};


person2 = {
name: 'Naved',
last: 'Khan'
};


// first way  shallow copy single lavel copy
// const person3 = { ...person1 };


// secound way shallow copy single lavel copy
// const person3 = Object.assign({}, person1);


// third  way shallow copy single lavel copy but old
// const person3 = {};
// for (let key in person1) {
//  person3[key] = person1[key];
// }


// deep copy with array and object best way
const person3 = JSON.parse(JSON.stringify(person1));


person3.clothes.jens = 20;


console.log(person1);
console.log(person2);
console.log(person3);

如果你想实现一个深度克隆，使用JSON.parse (JSON。Stringify(你的{}或[])):

const myObj ={
a: 1,
b: 2,
b: 3
}


const deepClone = JSON.parse(JSON.stringify(myObj));
deepClone.a = 12;
console.log("deepClone-----"+myObj.a);
const withOutDeepClone = myObj;
withOutDeepClone.a = 12;
console.log("withOutDeepClone----" + myObj.a);

我使用Vue.js，所以数组/对象有其他代码附加Vue.js功能。我尝试了很多给出的答案，但我最终使用了clone-deep。

最简洁的浅拷贝解决方案:

array = array.map(obj => {
return { ...obj };
});

这将生成一个完全独立的副本，如[{a: 1}, {b: 2}]，但不是[{a: {b: 2}}, {b: {a: 1}}]。

在我的例子中，我有一个包含许多嵌套对象的数组，所以其他答案不适用于我的用例。

我现在使用npm包deep-copy-all:

npm i deep-copy-all

const deepCopy = require("deep-copy-all")


const copy = deepCopy(original)
copy[0].users[0].payments[0].product.price = 10


console.log(copy[0].users[0].payments[0].product.price) // 10
console.log(original[0].users[0].payments[0].product.price) // 5

在2022年，我们可以使用structuredClone进行深度复制。

structuredClone(数组)

关于它的更多细节点击这里

如何使用一个简单的递归函数来获得对象/数组的深层副本

const deepCopyFunction = (inObject) => {
const deepCopyObject = Array.isArray(inObject) ? [] : {};
for (const key in inObject) {
if (typeof inObject[key] === 'object') {
deepCopyFunction(inObject[key]);
}
deepCopyObject[key] = inObject[key];
}
return deepCopyObject;
}