无需jQuery...工作实例

var arr2 = arr1.slice()

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

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

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

使用这个：

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

let newArray = oldArray.slice();

console.log({newArray});

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

另请注意：

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

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

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

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

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

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

切片的替代方法是 concat，它可以通过 2 种方式使用。其中第一个可能更具可读性，因为预期的行为非常明确：

var array2 = [].concat(array1);

第二种方法是：

var array2 = array1.concat();

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

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

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

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

或者，对于第二种方法：

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

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

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

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

它会起作用的。

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

同样的事情也适用于对象数组，它们将通过引用进行复制，您必须手动复制它们

这是我在尝试了许多方法后的做法：

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

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

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

在 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） 、 、 和 技术可用于仅深度复制具有文本值（布尔值、数字和字符串）
  的数组;其中在 Chrome 中具有最高的性能，而 spread 在 Firefox 中具有最高的性能。[ ...myArray ]myArray.splice(0)myArray.slice()myArray.concat()slice()...

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

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

  • structuredClone();
  • Lo-dash 或 jQuery 技术可用于深度复制所有数组类型。Lodash 技术具有最高性能的地方。cloneDeep(myArray)extend(true, [], myArray)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 相同的数组，而不是一个新的、独立的数组。如何复制数组以获得两个独立的数组？

答

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

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

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

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

复制多维数组/对象：

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 提供此功能。

来源： 这里

如果您处于 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>

您可以使用数组跨差来复制数组。...

const itemsCopy = [...items];

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

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

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

有关点差的更多信息

从 ES2015 开始，

var arr2 = [...arr1];

我个人认为 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});

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

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

正如我们在 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方法，不推荐使用，但可以成为复制数组和对象的简单方法：

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

5）Array.from方法，这个没有得到广泛的支持，使用前检查不同浏览器的支持情况：

const arr2 = Array.from(arr);

6） ECMA6 方式，也不完全支持，但 babelJs 可以帮到你，如果你想转译：

const arr2 = [...arr];

您也可以使用 ES6 扩展算子来复制 Array

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

以下是几种复制方法：

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

丹，没必要用花哨的把戏。您需要做的就是通过这样做来复制 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);

现在和是存储在不同堆栈中的两个不同的数组变量。在 jsfiddle 上查看此内容。arr1arr2

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

arr2 = [...arr1];

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

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

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.parseJSON.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

复印性能：

那么我们选择哪一个以获得最佳性能。事实证明，最冗长的方法，循环具有最高的性能。使用循环进行真正的 CPU 密集型复制（大型/多阵列）。forfor

之后，该方法也具有不错的性能，并且也不那么冗长，并且更容易程序员实现。我建议用于日常复制 CPU 密集型数组。此外，如果不需要深度克隆并且性能有问题，请避免使用（大量开销）。.slice().slice()JSON.parse(JSON.stringify(arr))

源性能测试

重要！

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

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

let clonedArray = [...array]

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

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

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

对于 lodash 用户：

let clonedArray = _.clone(array) 文档

和

let clonedArray = _.cloneDeep(array) 文档

如果你的数组包含原始数据类型的元素，如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);

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

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

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

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

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 更好，主要是为了复制数组。

基元值始终按其值传递（复制）。但是，复合值是通过引用传递的。

那么我们如何复制这个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”不按值传递？

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

异常：

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

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

阅读更多

我个人更喜欢这种方式：

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

当有很多答案时，您必须对这个问题使用最佳实践。

我建议你使用数组点差...复制数组。

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

var arr2 = […arr1];

var arr2 = arr1.slice（0）;

这种方式只适用于简单的数组。

如果你有像对象数组这样的复杂数组，那么你必须使用其他解决方案，如：

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

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

我发现这种方法相对容易：

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

结构化克隆

在 JavaScript 中按值复制数组的现代方法是使用 structuredClone：

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