按值复制数组

最新推荐文章于 2021-12-16 14:57:02 发布

asdfgh0077

最新推荐文章于 2021-12-16 14:57:02 发布

阅读量191

点赞数

文章标签： javascript arrays

原文链接：https://stackoom.com/question/VPTJ/按值复制数组

版权

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

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

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

#1楼

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

var array2 = [].concat(array1);

第二种方法是：

var array2 = array1.concat();

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

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

Lee Penkman在评论中也指出，如果有一个array1 undefined的机会，您可以返回一个空数组，如下所示：

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

或者，对于第二种方法：

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

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

#2楼

当使用简单的数据类型（例如数字或字符串）时，上述方法中的某些方法可以很好地工作，但是当数组包含其他对象时，这些方法将失败。当我们尝试将任何对象从一个数组传递到另一个数组时，它将作为引用而不是对象传递。

在您的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()

会的。

#3楼

这是一个变体：

var arr1=['a', 'b', 'c'];
var arr2=eval(arr1.toSource());
arr2.push('d');
console.log('arr1: '+arr1+'\narr2: '+arr2);
/*
 *  arr1: a,b,c
 *  arr2: a,b,c,d
 */

#4楼

添加到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]);

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

#5楼

在尝试了多种方法之后，我就是这样做的：

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

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

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

#6楼

在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 () {}];

深层复制技术取决于三种阵列类型

根据数组中元素的类型，我们可以使用各种技术进行深层复制。

文字值数组（类型1）
[...myArray] ， myArray.splice(0) ， myArray.slice()和myArray.concat()技术只能用于深度复制具有文字值（布尔值，数字和字符串）的数组； Spread运算符[...myArray]的性能最佳（ https://measurethat.net/Benchmarks/Show/4281/0/spread-array-performance-vs-slice-splice-concat ）。
文字值（类型1）和文字结构（类型2）的数组
JSON.parse(JSON.stringify(myArray))技术可用于深度复制文字值（布尔值，数字，字符串）和文字结构（数组，对象），但不能复制原型对象。
所有数组（type1，type2，type3）
jQuery $.extend(myArray)技术可用于深度复制所有数组类型。像Underscore和Lo-dash这样的库提供与jQuery $.extend()类似的深层复制功能，但性能较低。更令人惊讶的是， $.extend()性能比JSON.parse(JSON.stringify(myArray))技术http://jsperf.com/js-deep-copy/15更高。
对于那些避开第三方库（例如jQuery）的开发人员，您可以使用以下自定义函数；其性能比$ .extend更高，并且可以深度复制所有数组。

function copy(aObject) {
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

所以要回答这个问题...

题

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

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

回答

因为arr1是文字值（布尔值，数字或字符串）的数组，所以您可以使用上面讨论的任何深层复制技术，其中散布运算符...具有最高的性能。

// Highest performance for deep copying literal values
arr2 = [...arr1];

// Any of these techniques will deep copy literal values as well,
//   but with lower performance.
arr2 = arr1.slice();
arr2 = arr1.splice(0);
arr2 = arr1.concat();
arr2 = JSON.parse(JSON.stringify(arr1));
arr2 = $.extend(true, [], arr1); // jQuery.js needed
arr2 = _.extend(arr1); // Underscore.js needed
arr2 = _.cloneDeep(arr1); // Lo-dash.js needed
arr2 = copy(arr1); // Custom-function needed - as provided above

#7楼

在我的特定情况下，我需要确保阵列保持完整，因此这对我有用：

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

#8楼

复制多维数组/对象：

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的这项功能。

资料来源：这里

#9楼

有新引入的Array.from ，但是不幸的是，截至撰写本文时，它仅在最新的Firefox版本（32及更高版本）上受支持。可以简单地如下使用：

var arr1 = [1, 2, 3];
console.log(Array.from(arr1)); // Logs: [1, 2, 3]

参考：这里

或Array.prototype.map可以与身份函数一起使用：

function identity(param)
{
    return param;
}

var arr1 = [1, 2, 3],
    clone = arr1.map(identity);

参考：这里

#10楼

如果您在ECMAScript 6的环境中，则可以使用Spread Operator通过以下方式进行操作：

 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>

#11楼

您可以使用数组传播...复制数组。

const itemsCopy = [...items];

另外，如果要创建一个包含现有数组的新数组，请执行以下操作：

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

现在，所有主要浏览器都支持数组扩展，但是如果您需要较早的支持，请使用打字稿或babel并编译为ES5。

有关价差的更多信息

#12楼

从ES2015开始，

var arr2 = [...arr1];

#13楼

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

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

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

#14楼

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

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

#15楼

正如我们在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）也是接触方法，这是用于合并两个数组的方法，但是我们可以只指定一个数组，然后基本上复制新的接触数组中的值：

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

#16楼

您还可以使用ES6传播运算符复制Array

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

#17楼

以下是几种复制方式：

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

#18楼

丹，无需花哨的技巧。您需要做的就是通过这样做来复制arr1。

 var arr2 = new Array(arr1);

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

#19楼

您可以按照以下方式进行操作：
arr2 = arr1.map(x => Object.assign({}, x));

#20楼

您可以将ES6与更简单的传播Opeartor一起使用。

arr2 = [...arr1];

有限制..check docs @mozilla 传播语法

#21楼

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

 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

通常，在转换数据时，我们希望保持原始数据结构（例如Array）完整无缺。我们通过精确复制数组来做到这一点，以便可以在初始数组完好无损的情况下对它进行转换。

复制数组的方式：

 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()进行.slice() CPU的阵列的日常复制。如果不需要深度克隆并且性能是一个问题，也请避免使用JSON.parse(JSON.stringify(arr)) （很多开销）。

源性能测试

#22楼

重要！

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

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

let clonedArray = [...array]

但是，如果要进行深度克隆，请改用以下方法：

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

对于lodash用户：

let clonedArray = _.clone(array) 文档

和

let clonedArray = _.cloneDeep(array) 文档

#23楼

快速示例：

如果数组中的元素是基本类型 （字符串，数字等）

 var arr1 = ['a','b','c']; // arr1 and arr2 are independent and primitive elements are stored in // different places in the memory var arr2 = arr1.slice(); arr2.push('d'); console.log(arr1); // [ 'a', 'b', 'c' ] console.log(arr2); // [ 'a', 'b', 'c', 'd' ]

如果数组中的元素是对象文字，则另一个数组（{}，[]）

 var arr1 = [{ x: 'a', y: 'b'}, [1, 2], [3, 4]]; // arr1 and arr2 are independent and reference's/addresses are stored in different // places in the memory. But those reference's/addresses points to some common place // in the memory. var arr2 = arr1.slice(); arr2.pop(); // OK - don't affect arr1 bcos only the address in the arr2 is // deleted not the data pointed by that address arr2[0].x = 'z'; // not OK - affect arr1 bcos changes made in the common area // pointed by the addresses in both arr1 and arr2 arr2[1][0] = 9; // not OK - same above reason console.log(arr1); // [ { x: 'z', y: 'b' }, [ 9, 2 ], [ 3, 4 ] ] console.log(arr2); // [ { x: 'z', y: 'b' }, [ 9, 2 ] ]

2的解决方案 ：按元素逐个深度复制

 var arr1 = [{ x: 'a', y: 'b'}, [1, 2], [3, 4]]; arr2 = JSON.parse(JSON.stringify(arr1)); arr2.pop(); // OK - don't affect arr1 arr2[0].x = 'z'; // OK - don't affect arr1 arr2[1][0] = 9; // OK - don't affect arr1 console.log(arr1); // [ { x: 'a', y: 'b' }, [ 1, 2 ], [ 3, 4 ] ] console.log(arr2); // [ { x: 'z', y: 'b' }, [ 9, 2 ] ]

#24楼

如果您的数组包含原始数据类型的元素（例如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进行DEEP COPY一样在每个级别调用这种复制方法。

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

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

您还可以根据需要使用许多其他方法。我只提到了其中的一些，以便大致了解当我们尝试通过值将数组复制到另一个数组时会发生什么。

#25楼

let a = [1,2,3];

现在，您可以执行以下任一操作来复制数组。

let b = Array.from(a);

要么

let b = [...a];

要么

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

要么

let b = a.slice();

要么

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

现在，如果我更改一个，

a.push(5);

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

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

#26楼

这是如何对可变深度的图元数组进行处理的方法：

// 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，控制台

#27楼

原始值总是通过其值（复制）。复合值hovever通过引用传递。

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

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

在ES6中复制一个数组

let arrCopy = [...arr];

在ES5中复制n数组

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

为什么`让arrCopy = arr`没有通过值？

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

例外：

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

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

#28楼

我个人更喜欢这样：

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

#29楼

不需要jQuery ... 工作示例

var arr2 = arr1.slice()

这会将数组从起始位置0复制到数组末尾。

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

如果您具有引用类型的数组，请说类型为Object 。该数组将被复制，但是两个数组都将包含对相同Object的引用。因此，在这种情况下，即使实际复制了数组，也似乎是通过引用复制了该数组。

#30楼

用这个：

var newArray = oldArray.slice();

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

另请注意：

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

字符串和数字之类的基元是不可变的，因此无法更改字符串或数字。

#31楼

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

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

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

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