将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相同的数组,而不是一个新的独立数组。如何复制阵列以获得两个独立的阵列?
当前回答
我发现这种方法比较容易:
设arr=[1,2,3,4,5];让newArr=[…arr];console.log(newArr);
其他回答
当我们想要使用赋值运算符(=)复制数组时,它不会创建副本,只会复制指向数组的指针/引用。例如:
常量oldArr=[1,2,3];const newArr=旧Arr;//现在oldArr指向内存中的相同位置console.log(oldArr==newArr);//指向内存中的相同位置,因此是正确的常量拷贝=[1,2,3];console.log(copy==newArr);//不指向内存中的相同位置,因此是错误的
通常,当我们转换数据时,我们希望保持初始数据结构(例如数组)的完整性。我们通过制作数组的精确副本来实现这一点,这样可以在初始数组保持不变的情况下转换该数组。
复制阵列的方法:
常量oldArr=[1,2,3];//使用扩展运算符将旧值扩展到新数组文本中const newArr1=[…oldArr];//不带参数的切片返回新复制的数组const newArr2=oldArr.slice();//Map将回调应用于数组中的每个元素并返回一个新数组const newArr3=旧Arr.map((el)=>el);//Concat用于合并数组并返回一个新数组。不带参数的凹形复制数组const newArr4=oldArr.contat();//Object.assign可用于将所有财产转换为新的数组文字const newArr5=对象赋值([],oldArr);//使用new关键字通过Array构造函数创建const newArr6=新数组(…oldArr);//For循环函数克隆(基本){常量newArray=[];for(设i=0;i<base.length;i++){newArray[i]=基[i];}return newArray;}const newArr7=克隆(oldArr);console.log(newArr1、newArr2、newArr3、newArr4、newArr5、newArr6、newArr7);
嵌套数组或对象时要小心!:
嵌套数组时,将通过引用复制值。以下是一个示例,说明这可能会导致问题:
设arr1=[1,2,[1,2]]设arr2=[…arr1];arr2[2][0]=5;//我们改变arr2console.log(arr1);//arr1也被更改,因为arr1内部的数组是通过引用复制的
因此,当数组中存在要复制的对象或数组时,不要使用这些方法。即,仅在基元数组上使用这些方法。
如果您确实想深度克隆javascript数组,请将JSON.parse与JSON.stringify结合使用,如下所示:
设arr1=[1,2,[1,2]]让arr2=JSON.parse(JSON.stringify(arr1));arr2[2][0]=5;console.log(arr1);//现在我没有被修改,因为我是一个深度克隆
复制性能:
因此,我们选择哪一种来获得最佳性能。结果证明,最冗长的方法,for循环具有最高的性能。使用for循环进行真正的CPU密集型复制(大/多阵列)。
在此之后,.slice()方法也有不错的性能,而且不那么冗长,程序员更容易实现。我建议将.slice()用于日常复制不太占用CPU的数组。如果不需要深度克隆,并且性能存在问题,还应避免使用JSON.parse(JSON.stringify(arr))(大量开销)。
源性能测试
以下是如何对可变深度的基元数组执行此操作:
// If a is array:
// then call cpArr(a) for each e;
// else return a
const cpArr = a => Array.isArray(a) && a.map(e => cpArr(e)) || a;
let src = [[1,2,3], [4, ["five", "six", 7], true], 8, 9, false];
let dst = cpArr(src);
https://jsbin.com/xemazog/edit?js安慰
不需要jQuery。。。工作示例
var arr2 = arr1.slice()
这将从起始位置0到阵列末端复制阵列。
重要的是要注意,它将按照原始类型(字符串、数字等)的预期工作,并解释引用类型的预期行为。。。
如果您有一个引用类型数组,那么就说Object类型。将复制该数组,但这两个数组都将包含对同一对象的引用。因此,在这种情况下,即使实际复制了数组,也似乎通过引用复制了数组。
如果您的数组包含原始数据类型的元素,如int、char或string等,那么您可以使用其中一种方法来返回原始数组的副本,如.slice()或.map()或spread运算符(得益于ES6)。
new_array = old_array.slice()
or
new_array = old_array.map((elem) => elem)
or
const new_array = new Array(...old_array);
但是如果您的数组包含复杂元素,例如对象(或数组)或更多嵌套对象,那么,您必须确保从顶层到最后一层复制所有元素,否则将使用内部对象的引用,这意味着更改new_array中object_elements的值仍将影响旧_array。您可以将这种复制方法称为“深度复制”旧数组的。
对于深度复制,您可以根据数据类型在每个级别对原始数据类型使用上述方法,也可以使用这种成本高昂的方法(如下所述)进行深度复制,而无需做大量工作。
var new_array = JSON.parse(JSON.stringify(old_array));
根据您的需求,还有很多其他方法可以使用。我只提到了其中的一些,它们可以让我们大致了解当我们试图按值将一个数组复制到另一个数组时会发生什么。
let a = [1,2,3];
现在,您可以执行以下任一操作来创建阵列的副本。
let b = Array.from(a);
OR
let b = [...a];
OR
let b = new Array(...a);
OR
let b = a.slice();
OR
let b = a.map(e => e);
现在,如果我改变一个,
a.push(5);
那么,a是[1,2,3,5],但b仍然是[1,3,3],因为它有不同的引用。
但我认为,在上述所有方法中,Array.from都更好,并且主要用于复制数组。