将JavaScript中的数组复制到另一个数组时:
var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d'); //Now, arr1 = ['a','b','c','d']
我意识到arr2指的是与arr1相同的数组,而不是一个新的独立数组。如何复制阵列以获得两个独立的阵列?
将JavaScript中的数组复制到另一个数组时:
var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d'); //Now, arr1 = ['a','b','c','d']
我意识到arr2指的是与arr1相同的数组,而不是一个新的独立数组。如何复制阵列以获得两个独立的阵列?
当前回答
我个人认为Array.from是一个更具可读性的解决方案。顺便说一句,请注意它的浏览器支持。
//克隆设x=[1,2,3];设y=数组.来自(x);console.log({y});//深层克隆让clone=arr=>Array.from(arr,item=>Array.isArray(item)?克隆(项目):项目);x=[1,[],[[]]];y=克隆(x);console.log({y});
其他回答
重要的
这里的大多数答案适用于特定情况。
如果您不关心深度/嵌套对象和道具,请使用(ES6):
let clonedArray=[…array]
但如果要进行深度克隆,请改用以下方法:
let cloneArray=JSON.parse(JSON.stringify(数组))*
*函数在使用stringify时不会被保存(序列化),如果没有它们,您将得到结果。
对于lodash用户:
let clonedArray=_.clone(数组)文档
and
let cloneArray=_.cloneDeep(数组)文档
这是我在尝试了许多方法之后所做的:
var newArray = JSON.parse(JSON.stringify(orgArray));
这将创建一个与第一个副本无关的新深度副本(而不是浅层副本)。
此外,这显然不会克隆事件和函数,但您可以在一行中完成它,并且它可以用于任何类型的对象(数组、字符串、数字、对象…)
var arr2=arr1.slice(0);
这种方法只适用于简单数组。
如果您有类似复杂阵列的对象阵列,则必须使用其他解决方案,如:
const arr2 = JSON.parse(JSON.stringify(arr1));
例如,我们有一个对象数组,每个单元格的对象中都有另一个数组字段。。。在这种情况下,如果我们使用切片方法,那么数组字段将通过Ref进行复制,这意味着这些字段更新将影响原始数组中的相同元素和字段。
在Javascript中,深度复制技术依赖于数组中的元素。让我们从这里开始。
三种类型的元素
元素可以是:文字值、文字结构或原型。
// Literal values (type1)
const booleanLiteral = true;
const numberLiteral = 1;
const stringLiteral = 'true';
// Literal structures (type2)
const arrayLiteral = [];
const objectLiteral = {};
// Prototypes (type3)
const booleanPrototype = new Bool(true);
const numberPrototype = new Number(1);
const stringPrototype = new String('true');
const arrayPrototype = new Array();
const objectPrototype = new Object(); // or `new function () {}
从这些元素中,我们可以创建三种类型的数组。
// 1) Array of literal-values (boolean, number, string)
const type1 = [ true, 1, "true" ];
// 2) Array of literal-structures (array, object)
const type2 = [ [], {} ];
// 3) Array of prototype-objects (function)
const type3 = [ function () {}, function () {} ];
深度复制技术取决于三种阵列类型
根据数组中元素的类型,我们可以使用各种技术进行深度复制。
深度复制技术
基准
https://www.measurethat.net/Benchmarks/Show/17502/0/deep-copy-comparison
文字值数组(类型1)[…myArray]、myArray.splice(0)、myArrax.slice()和myArray.concat()技术可用于深度复制仅具有文字值(布尔值、数字和字符串)的数组;其中slice()在Chrome中具有最高的性能,并且扩展。。。在Firefox中具有最高的性能。文本值(类型1)和文本结构(类型2)的数组JSON.parse(JSON.stringify(myArray))技术可用于深度复制文本值(布尔值、数字、字符串)和文本结构(数组、对象),但不能复制原型对象。所有数组(类型1、类型2、类型3)Lo-dash-cloneDeep(myArray)或jQuery-extend(true,[],myArray)技术可用于深度复制所有数组类型。其中Lodash cloneDeep()技术具有最高的性能。对于那些避免使用第三方库的用户,下面的自定义函数将深度复制所有数组类型,性能低于cloneDeep(),性能高于extend(true)。
function copy(aObject) {
// Prevent undefined objects
// if (!aObject) return aObject;
let bObject = Array.isArray(aObject) ? [] : {};
let value;
for (const key in aObject) {
// Prevent self-references to parent object
// if (Object.is(aObject[key], aObject)) continue;
value = aObject[key];
bObject[key] = (typeof value === "object") ? copy(value) : value;
}
return bObject;
}
所以要回答这个问题。。。
问题
var arr1 = ['a','b','c'];
var arr2 = arr1;
我意识到arr2指的是与arr1相同的数组,而不是一个新的独立数组。如何复制阵列以获得两个独立的阵列?
答复
因为arr1是一个文本值数组(布尔值、数字或字符串),所以可以使用上面讨论的任何深度复制技术,其中slice()和spread。。。具有最高的性能。
arr2 = arr1.slice();
arr2 = [...arr1];
arr2 = arr1.splice(0);
arr2 = arr1.concat();
arr2 = JSON.parse(JSON.stringify(arr1));
arr2 = copy(arr1); // Custom function needed, and provided above
arr2 = _.cloneDeep(arr1); // Lo-dash.js needed
arr2 = jQuery.extend(true, [], arr1); // jQuery.js needed
使用此项:
让oldArray=[1,2,3,4,5];let newArray=oldArray.slice();console.log({newArray});
基本上,slice()操作克隆数组并返回对新数组的引用。
还应注意:
对于引用、字符串和数字(而不是实际对象),slice()将对象引用复制到新数组中。原始数组和新数组都引用同一对象。如果引用的对象发生更改,则这些更改对新阵列和原始阵列都可见。
字符串和数字等基元是不可变的,因此不可能更改字符串或数字。