按值复制数组

Question

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

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

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

Answer 1

使用这个：

let oldArray = [1, 2, 3, 4, 5];

let newArray = oldArray.slice();

console.log({newArray});

基本上， slice()操作克隆数组并返回对新数组的引用。

另请注意：

对于引用、字符串和数字（​​而不是实际对象），slice() 将对象引用复制到新数组中。原始数组和新数组都引用到同一个对象。如果引用的对象发生更改，则新数组和原始数组都可以看到这些更改。

字符串和数字等基元是不可变的，因此不可能更改字符串或数字。

Answer 2

在 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

• 文字值数组（type1）
  [ ...myArray ]、myArray.splice(0)、myArray.slice() 和 myArray.concat( ) 技术可用于仅深度复制具有文字值（布尔值、数字和字符串）的数组；其中 slice() 在 Chrome 中具有最高性能，而 spread ... 在 Firefox 中具有最高性能。

• 文字值（type1）和文字结构（type2）数组
  JSON.parse(JSON.stringify(myArray)) 技术可用于深度复制文字值（布尔值、数字、字符串）和文字结构（数组、对象），但不能深度复制原型对象。< /p>

• 所有数组（type1、type2、type3）

  • structuralClone();
  • 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 相同的数组，而不是一个新的独立数组。如何复制数组以获得两个独立的数组？

code

由于 arr1 是一个文字值数组（布尔值、数字或字符串），因此您可以使用上面讨论的任何深度复制技术，其中 slice() 和 spread < >... 具有最高的性能。

arr2 = arr1.slice();
arr2 = [...arr1];
arr2 = arr1.splice(0);
arr2 = arr1.concat();
arr2 = JSON.parse(JSON.stringify(arr1));
arr2 = structuredClone(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

Answer 3

您可以使用数组扩展 ... 来复制数组。

const itemsCopy = [...items];

另外，如果想要创建一个新数组并将现有数组作为其中的一部分：

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

数组扩展现在为 所有主要浏览器均受支持，但如果您需要较旧的支持，请使用 typescript 或 babel并编译为ES5。

有关点差的更多信息

Answer 4

不需要 jQuery... 工作示例

var arr2 = arr1.slice()

这将从头开始复制数组将 0 定位到数组末尾。

重要的是要注意，它将按原始类型（字符串、数字等）的预期工作，并且还要解释引用类型的预期行为...

如果您有一个引用类型数组，例如 对象。数组将被复制，但两个数组都将包含对相同对象的引用。因此，在这种情况下，即使数组实际上已被复制，数组也似乎是通过引用复制的。

Answer 5

这就是我在尝试多种方法后所做的：

var newArray = JSON.parse(JSON.stringify(orgArray));

这将创建一个与第一个副本无关的新深层副本（不是浅副本）。

此外，这显然不会克隆事件和函数，但好处是您可以在一行中完成它，并且它可以用于任何类型的对象（数组、字符串、数字、对象...）

Answer 6

slice 的替代方案 是 concat，有两种使用方式。第一个方法可能更具可读性，因为预期的行为非常明确：

var array2 = [].concat(array1);

第二种方法是：

var array2 = array1.concat();

Cohen（在评论中）指出后一种方法 具有更好的性能。

其工作方式是，concat 方法创建一个新数组，该数组由调用它的对象中的元素组成，后跟作为参数传递给它的任何数组的元素。因此，当没有传递参数时，它只是复制数组。

Lee Penkman也在评论中指出，如果array1有可能未定义，您可以返回一个空数组，如下所示：

var array2 = [].concat(array1 || []);

或者，对于第二种方法：

var array2 = (array1 || []).concat();

注意您也可以使用 slice 执行此操作：var array2 = (array1 || []).slice();。

Answer 7

重要！

这里的大多数答案都适用于特定情况。

如果你不关心深层/嵌套对象和道具使用（ES6）：

let clonedArray = [...array]

但如果你想进行深度克隆使用而是：

let cloneArray = JSON.parse(JSON.stringify(array))*

*使用 stringify 时，函数不会被保留（序列化），没有它们，您将得到结果。

---

对于lodash用户：

let clonedArray = _.clone(array) 文档

和

let clonedArray = _.cloneDeep(array) 文档

Answer 8

我个人认为 Array.from 是更具可读性的解决方案。顺便说一下，请注意其浏览器支持。

// clone
let x = [1, 2, 3];
let y = Array.from(x);
console.log({y});

// deep clone
let clone = arr => Array.from(arr, item => Array.isArray(item) ? clone(item) : item);
x = [1, [], [[]]];
y = clone(x);
console.log({y});

Answer 9

上面提到的一些方法在处理数字或字符串等简单数据类型时效果很好，但当数组包含其他对象时，这些方法就会失败。当我们尝试将任何对象从一个数组传递到另一个数组时，它将作为引用而不是对象传递。

在您的 JavaScript 文件中添加以下代码：

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

只需使用

var arr1 = ['val_1','val_2','val_3'];
var arr2 = arr1.clone()

它即可工作。

Answer 10

从ES2015开始，

var arr2 = [...arr1];

Answer 11

如果您处于 ECMAScript 6 环境中，请使用 Spread 运算符 你可以这样做是这样的：

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

console.log(arr1)
console.log(arr2)

<script src="http://www.wzvang.com/snippet/ignore_this_file.js"></script>

Answer 12

原始值始终通过其值传递（复制）。然而，复合值是通过引用传递的。

那么我们如何复制这个arr呢？

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

在 ES6 中复制数组

let arrCopy = [...arr]; 

在 ES5 中复制 n 数组

let arrCopy = arr.slice(); 
let arrCopy = [].concat(arr);

为什么 `let arrCopy = arr` 不是按值传递？

在复合值（例如对象/数组）上将一个变量传递给另一个变量的行为有所不同。对 copand 值使用 asign 运算符，我们传递对对象的引用。这就是为什么在删除/添加 arr 元素时两个数组的值都会发生变化的原因。

例外：

arrCopy[1] = 'adding new value this way will unreference';

当您为变量分配新值时，您正在更改引用本身，并且不会影响原始对象/数组。

了解更多

Answer 13

添加到 array.slice(); 的解决方案请注意，如果您有多维数组，子数组将通过引用复制。
你可以做的是循环和切片（）每个子数组单独

var arr = [[1,1,1],[2,2,2],[3,3,3]];
var arr2 = arr.slice();

arr2[0][1] = 55;
console.log(arr2[0][1]);
console.log(arr[0][1]);

function arrCpy(arrSrc, arrDis){
 for(elm in arrSrc){
  arrDis.push(arrSrc[elm].slice());
}
}

var arr3=[];
arrCpy(arr,arr3);

arr3[1][1] = 77;

console.log(arr3[1][1]);
console.log(arr[1][1]);

相同的东西进入对象数组，它们将通过引用复制，你必须手动复制它们

Answer 14

let a = [1,2,3];

现在您可以执行以下任一操作来制作数组的副本。

let b = Array.from(a); 

OR

let b = [...a];

OR

let b = new Array(...a); 

OR OR

let b = a.slice(); 

OR

let b = a.map(e => e);

现在，如果我改变 a，

a.push(5); 

那么 a 是 [1,2,3,5] 但 b 仍然是 [1,2,3]，因为它有不同的引用。

但我认为，在上述所有方法中 Array.from 更好，主要用于复制数组。

Answer 15

我个人更喜欢这种方式：

JSON.parse(JSON.stringify( originalObject ));

Answer 16

我发现这个方法比较简单：

let arr = [1,2,3,4,5];
let newArr = [...arr];
console.log(newArr);

Answer 17

当有很多答案时，您必须使用最佳实践来解决此问题。

我建议您使用数组扩展...来复制数组。

var arr1 = ['a','b','c'];

var arr2 = [...arr1];

Answer 18

正如我们所知，在 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）使用切片方法，切片用于切片数组的一部分，它将对数组的某些部分进行切片，而不触及原始数组，在切片中，如果不指定数组的开始和结束，它将对整个数组进行切片并基本上制作数组的完整副本，因此我们可以轻松地说：

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

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

var arr2 = arr.concat();

4）还有 stringify 和 parse 方法，不推荐，但可以是复制数组的简单方法和 Objects:

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

5) Array.from 方法，这个没有被广泛支持，使用前检查不同浏览器的支持：

const arr2 = Array.from(arr);

6) ECMA6 方式，也没有完全支持，但是如果你想转译，babelJs 可以帮助你：

const arr2 = [...arr];

Answer 19

您可以将 ES6 与扩展 Opeartor 一起使用，它更简单。

arr2 = [...arr1];

有限制..检查文档传播语法@ mozilla

Answer 20

丹，没必要用什么花招。您所需要做的就是通过执行此操作来复制 arr1 。

var arr1 = ['a','b','c'];
var arr2 = [];

var arr2 = new Array(arr1);

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

console.log('arr1:');
console.log(arr1);

console.log('arr2:');
console.log(arr2);

// Following did the trick:
var arr3 = [...arr1];
arr3.push('d');  // Now, arr3 = ['a','b','c','d'];

console.log('arr3:');
console.log(arr3);

现在，arr1 和 arr2 是两个不同的数组变量，存储在单独的堆栈中。
在 jsfiddle 上查看。

Answer 21

var arr2 = arr1.slice(0);

这样仅适用于简单数组。

如果您有复杂数组，例如对象数组，那么您必须使用其他解决方案，例如：

const arr2 = JSON.parse(JSON.stringify(arr1)); 

例如，我们有一个对象数组，每个单元格在其对象中有另一个数组字段...在这种情况下，如果我们使用slice方法，那么数组字段将通过Ref复制 这意味着这些字段更新将影响原始数组的相同元素和字段。

Answer 22

StructuredClone

在 JavaScript 中按值复制数组的现代方法是使用 结构化克隆：

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

console.log(arr1); //a,b,c
console.log(arr2); //a,b,c,d

Answer 23

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

// 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]);
}

Answer 24

复制多维数组/对象：

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;
}

感谢 James Padolsey 提供此功能。

来源：此处

Answer 25

如果您的数组包含原始数据类型的元素，例如int、char或string等，那么您可以使用返回原始数组副本的这些方法之一，例如作为 .slice() 或 .map() 或扩展运算符（感谢 ES6）。

new_array = old_array.slice()

或

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

或

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

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

对于深复制，您可以根据数据类型在每个级别对原始数据类型使用上述方法，或者您可以使用这种昂贵的方法（下面提到）来进行深复制，而无需执行很多工作。

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

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

Answer 26

如果要创建对象或数组的新副本，则必须显式复制该对象的属性或数组的元素，例如：

var arr1 = ['a','b','c'];
var arr2 = [];

for (var i=0; i < arr1.length; i++) {
   arr2[i] = arr1[i];
}

您可以在 Google 上搜索有关不可变原始值和可变对象引用的更多信息。

Answer 27

当我们想要使用赋值运算符（ = ）复制数组时，它不会创建副本，它只是复制指向数组的指针/引用。例如：

const oldArr = [1,2,3];

const newArr = oldArr;  // now oldArr points to the same place in memory 

console.log(oldArr === newArr);  // Points to the same place in memory thus is true

const copy = [1,2,3];

console.log(copy === newArr);  // Doesn't point to the same place in memory and thus is false

通常，当我们转换数据时，我们希望保持初始数据结构（例如数组）完整。我们通过制作数组的精确副本来做到这一点，这样就可以在第一个数组保持不变的情况下对其进行转换。

复制数组的方法：

const oldArr = [1,2,3];

// Uses the spread operator to spread out old values into the new array literal
const newArr1 = [...oldArr];

// Slice with no arguments returns the newly copied Array
const newArr2 = oldArr.slice();

// Map applies the callback to every element in the array and returns a new array
const newArr3 = oldArr.map((el) => el);

// Concat is used to merge arrays and returns a new array. Concat with no args copies an array
const newArr4 = oldArr.concat();

// Object.assign can be used to transfer all the properties into a new array literal
const newArr5 = Object.assign([], oldArr);

// Creating via the Array constructor using the new keyword
const newArr6 = new Array(...oldArr);

// For loop
function clone(base) {
	const newArray = [];
    for(let i= 0; i < base.length; i++) {
	    newArray[i] = base[i];
	}
	return newArray;
}

const newArr7 = clone(oldArr);

console.log(newArr1, newArr2, newArr3, newArr4, newArr5, newArr6, newArr7);

嵌套数组或对象时要小心！：

当嵌套数组时，值将通过引用复制。以下是这可能如何导致问题的示例：

let arr1 = [1,2,[1,2,3]]

let arr2 = [...arr1];

arr2[2][0] = 5;  // we change arr2

console.log(arr1);  // arr1 is also changed because the array inside arr1 was copied by reference

因此，当您要复制的数组中有对象或数组时，请勿使用这些方法。即仅对基元数组使用这些方法。

如果您确实想深度克隆 javascript 数组，请结合使用 JSON.parse 和 JSON.stringify，如下所示：

let arr1 = [1,2,[1,2,3]]

let arr2 = JSON.parse(JSON.stringify(arr1)) ;

arr2[2][0] = 5;

console.log(arr1);  // now I'm not modified because I'm a deep clone

复印性能：

那么我们应该选择哪一种才能获得最佳性能。事实证明，最详细的方法，for 循环具有最高的性能。使用 for 循环进行真正的 CPU 密集型复制（大型/多个数组）。

之后，.slice() 方法也具有不错的性能，并且更简洁，更容易程序员实现。我建议使用 .slice() 来日常复制对 CPU 要求不高的数组。如果不需要深度克隆并且性能是一个问题，还要避免使用 JSON.parse(JSON.stringify(arr)) （大量开销）。

源性能测试

Answer 28

使用 jQuery 深层复制可以如下进行：

var arr2 = $.extend(true, [], arr1);

Answer 29

您还可以使用 ES6 扩展运算符来复制数组

var arr=[2,3,4,5];
var copyArr=[...arr];

Answer 30

这里还有几种复制方法：

const array = [1,2,3,4];

const arrayCopy1 = Object.values(array);
const arrayCopy2 = Object.assign([], array);
const arrayCopy3 = array.map(i => i);
const arrayCopy4 = Array.of(...array );