按值复制阵列

将JavaScript中的数组复制到另一个数组时：

var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d');  //Now, arr1 = ['a','b','c','d']

我意识到arr2指的是与arr1相同的数组，而不是一个新的独立数组。如何复制阵列以获得两个独立的阵列？

当前回答

您可以将ES6与spread Opartor一起使用，它更简单。

arr2 = [...arr1];

有一些限制。。check docs Spread语法@mozilla

其他回答

正如我们在Javascript中所知道的那样，数组和对象都是通过引用的，但是我们可以用什么方法复制数组而不改变后面的原始数组呢？

这里有几种方法：

假设我们在您的代码中有这个数组：

var arr = [1, 2, 3, 4, 5];

1）在函数中循环数组并返回一个新数组，如下所示：

 function newArr(arr) {
      var i=0, res = [];
      while(i<arr.length){
       res.push(arr[i]);
        i++;
       }
   return res;
 }

2）使用slice方法，slice用于对数组的一部分进行切片，它将在不接触原始数组的情况下对数组的某些部分进行切片。在切片中，如果不指定数组的开始和结束，它将对整个数组进行切片，并基本上制作数组的完整副本，因此我们可以很容易地说：

var arr2 = arr.slice(); // make a copy of the original array

3）还有contact方法，这是用于合并两个数组，但我们可以只指定其中一个数组，然后这基本上会复制新接触数组中的值：

var arr2 = arr.concat();

4）另外，不建议使用stringify和parse方法，但这是复制Array和Objects的一种简单方法：

var arr2 = JSON.parse(JSON.stringify(arr));

5） Array.from方法，这不受广泛支持，使用前请检查不同浏览器中的支持：

const arr2 = Array.from(arr);

6） ECMA6方式，也不完全支持，但babelJs可以帮助您，如果您想转换：

const arr2 = [...arr];

structuredClone是一种新的深度克隆方法。

structuredClone(value)
structuredClone(value, { transfer })

transfer是一个值可转移对象数组，它将被移动而不是克隆到返回的对象中。

你可能会发现它的算法很有趣。

如果您的数组包含原始数据类型的元素，如int、char或string等，那么您可以使用其中一种方法来返回原始数组的副本，如.slice（）或.map（）或spread运算符（得益于ES6）。

new_array = old_array.slice()

new_array = old_array.map((elem) => elem)

const new_array = new Array(...old_array);

但是如果您的数组包含复杂元素，例如对象（或数组）或更多嵌套对象，那么，您必须确保从顶层到最后一层复制所有元素，否则将使用内部对象的引用，这意味着更改new_array中object_elements的值仍将影响旧_array。您可以将这种复制方法称为“深度复制”旧数组的。

对于深度复制，您可以根据数据类型在每个级别对原始数据类型使用上述方法，也可以使用这种成本高昂的方法（如下所述）进行深度复制，而无需做大量工作。

var new_array = JSON.parse(JSON.stringify(old_array));

根据您的需求，还有很多其他方法可以使用。我只提到了其中的一些，它们可以让我们大致了解当我们试图按值将一个数组复制到另一个数组时会发生什么。

对于包含对象的ES6阵列

cloneArray(arr) {
    return arr.map(x => ({ ...x }));
}

在我的特殊情况下，我需要确保阵列保持完整，所以这对我来说很有用：

// Empty array
arr1.length = 0;
// Add items from source array to target array
for (var i = 0; i < arr2.length; i++) {
    arr1.push(arr2[i]);
}

推荐文章