如何在javascript中复制/克隆数组

这意味着，当您尝试使用 const newArray = oldArray 复制它时，它将复制对原始数组的引用而不是复制值。

const beers = ['', '', ''];
const beersCopy = beers;
console.log(beers === beersCopy);
// The console output will be true, because it's pointing to the exact value in memory.

浅拷贝数组
当拷贝或克隆数组时，值的数据类型是决定使用何种方法的关键。

如果您的数组仅包含原始不可变值（数字、布尔值、字符串等），您可以使用以下方法。

• push
• … （传播）
• .slice -Array.from
• _.clone (lodash) .push() 一种经典的数组方法，也是最明显的方法，基本上循环原始数组并使用 push() 方法将原始数组中的元素推送到新数组中。

我们简单地遍历原始数组并将每个元素推送到新数组。

const arr = [1, 2, 3];
const newArr = [];
for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i]);
}

…（展开）
展开运算符是最快的方法之一，是在 ES6 中引入的。它简洁明了，是一种本地方法（对不起 lodash）。

const arr = [1, 2, 3];
const newArr = [...arr];
.slice()

slice() 方法将数组的一部分的浅拷贝返回到从头到尾选择的新数组对象中 arr.slice([start[, end]])。原始数组不会被修改。这是复制数组的最快方法。

const arr = [1, 2, 3];
const newArr = arr.slice();
Array.from

Array.from() 静态方法从类数组或可迭代对象（Map 或 Set）创建一个新的浅拷贝 Array 实例。

它还采用可选的映射函数作为第二个参数 Array.from(arrayLike [, mapFn [, thisArg]])。

const arr = [1, 2, 3];
const newArr = Array.from(arr);
_.clone()

lodash 的 _.clone(value) 方法创建了一个值的浅克隆。它表现良好，如果您已经在您的应用程序中使用 lodash，它是一个可行的选择。

// import lodash
const _ = require('lodash');
const arr = [1, 2, 3];
const newArr = _.clone(arr);
Deep Copy Arrays

上面的所有方法都会创建数组的浅表副本。如果您将对象作为数组项，并且尝试进行浅拷贝，则将复制实际数组，但底层对象将通过引用传递给新数组。

让我们通过一个代码示例来看一下这个问题。

const arr = [
  {
    name: 'mario',
    food: 'pizza',
  },
  {
    name: 'luigi',
    food: 'spaghetti',
  },
];
const arrCopy = [...arr];
console.log(arr === arrCopy);

// 这将返回 false，因为数组已被复制（浅复制），内存中的新引用。
console.log(arr[0] === arrCopy[0]);
// 这将返回 true，因为引用指向内存中的相同位置。
有几种方法可以创建深度克隆。

jQuery.extend()
_.clonedeep()
JSON (stringify/parse)
jQuery.extend()
如果您仍在项目中使用 jQuery，则可以使用 jQuery 的扩展方法。

const arr = [
  {
    name: 'mario',
    food: 'pizza',
  },
  {
    name: 'luigi',
    food: 'spaghetti',
  },
];
const arrCopy = jQuery.extend(true, [], arr);
console.log(arr === arrCopy);
// This will return false, because the array has been copied (new reference in memory).
console.log(arr[0] === arrCopy[0]);
// This will return false, because the reference points to a new one in memory.
_.cloneDeep()

来自 Lodash 的方法 _.cloneDeep(value) 做的事情与 _.clone() 完全相同，除了它递归地克隆数组中的所有内容。

const arr = [
  {
    name: 'mario',
    food: 'pizza',
  },
  {
    name: 'luigi',
    food: 'spaghetti',
  },
];
// import lodash
const _ = require('lodash');
const arrCopy = _.cloneDeep(arr);
console.log(arr === arrCopy);
// This will return false, because the array has been copied (new reference in memory).
console.log(arr[0] === arrCopy[0]);
// This will return false, because the reference points to a new one in memory.

JSON 方法
JavaScript 提供了用于序列化和反序列化的原生方法，基本上是将大多数数据类型转换为 JSON 字符串，然后将有效的 JSON 字符串转换为对象。

它可以这样使用：

const arr = [
  {
    name: 'mario',
    food: 'pizza',
  },
  {
    name: 'luigi',
    food: 'spaghetti',
  },
];
const arrCopy = JSON.parse(JSON.stringify(arr));
console.log(arr === arrCopy);
// This will return false, because the array has been copied (new reference in memory).
console.log(arr[0] === arrCopy[0]);
// This will return false, because the reference points to a new one in memory.

使用这种方法有一些优点和缺点。一个优点是它不需要像 Lodash 这样的第三方库。缺点是提供的数组数据需要可序列化，通过 JSON 进行序列化和反序列化需要一些时间，因此这不是最快的方法。