JavaScript中十种一步拷贝数组的方法

JavaScript中咱们常常会遇到拷贝数组的场景，可是都有哪些方式可以来实现呢，咱们不妨来梳理一下。

一、扩展运算符（浅拷贝）

自从ES6出现以来，这已经成为最流行的方法。它是一个很简单的语法，可是当你在使用相似于React和Redux这类库时，你会发现它是很是很是有用的。

numbers = [1, 2, 3];
numbersCopy = [...numbers];

这个方法不能有效的拷贝多维数组。数组/对象值的拷贝是经过引用而不是值复制。

// 😊
numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// 只修改了咱们但愿修改的，原数组不受影响

// 😢
nestedNumbers = [[1], [2]];
numbersCopy = [...nestedNumbers];
numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// 因为公用引用，因此两个数组都被修改了，这是咱们不但愿的

二、for()循环（浅拷贝）

考虑到函数式编程变得愈来愈流行，我认为这种方法多是最不受欢迎的。

numbers = [1, 2, 3];
numbersCopy = [];
for (i = 0; i < numbers.length; i++) {
  numbersCopy[i] = numbers[i];
}

这个方法不能有效的拷贝多维数组。由于咱们使用的是 =运算符，它在处理数组/对象值的拷贝时经过引用而不是值复制。

// 😊
numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]

// 😢
nestedNumbers = [[1], [2]];
numbersCopy = [];
for (i = 0; i < nestedNumbers.length; i++) {
  numbersCopy[i] = nestedNumbers[i];
}
numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// 因为公用引用，因此两个数组都被修改了，这是咱们不但愿的

三、while()循环（浅拷贝）

和for() 相似。

numbers = [1, 2, 3];
numbersCopy = [];
i = -1;
while (++i < numbers.length) {
  numbersCopy[i] = numbers[i];
}

四、Array.map（浅拷贝）

上面的for和while都是很“古老”的方式，让咱们继续回到当前，咱们会发现map方法。map源于数学，是将一个集合转换成另外一种集合，同时保留结构的概念。

在英语中，它意味着Array.map 每次返回相同长度的数组。

numbers = [1, 2, 3];
double = (x) => x * 2;

numbers.map(double);

当咱们使用map方法时，须要给出一个callback函数用于处理当前的数组，并返回一个新的数组元素。

和拷贝数组有什么关系呢？

当咱们想要复制一个数组的时候，只须要在map的callback函数中直接返回原数组的元素便可。

numbers = [1, 2, 3];
numbersCopy = numbers.map((x) => x);

若是你想更数学化一点，(x) => x叫作恒等式。它返回给定的任何参数。

identity = (x) => x;
numbers.map(identity);
// [1, 2, 3]

一样的，处理对象和数组的时候是引用而不是值复制。

五、Array.filter（浅拷贝）

Array.filter方法一样会返回一个新数组，可是并不必定是返回一样长度的，这和咱们的过滤条件有关。

[1, 2, 3].filter((x) => x % 2 === 0)
// [2]

当咱们的过滤条件老是true时，就能够用来实现拷贝。

numbers = [1, 2, 3];
numbersCopy = numbers.filter(() => true);
// [1, 2, 3]

一样的，处理对象和数组的时候是引用而不是值复制。

六、Array.reduce（浅拷贝）

其实用reduce来拷贝数组并无展现出它的实际功能，可是咱们仍是要将其可以拷贝数组的能力说一下的

numbers = [1, 2, 3];
numbersCopy = numbers.reduce((newArray, element) => {
  newArray.push(element);
  return newArray;
}, []);

reduce() 方法对数组中的每一个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。

上面咱们的例子中初始值是一个空数组，咱们在遍历原数组的时候来填充这个空数组。该数组必需要从下一个迭代函数的执行后被返回出来。

一样的，处理对象和数组的时候是引用而不是值复制。

七、Array.slice（浅拷贝）

slice 方法根据咱们指定的start、end的index从原数组中返回一个浅拷贝的数组。

[1, 2, 3, 4, 5].slice(0, 3);
// [1, 2, 3]
// Starts at index 0, stops at index 3

// 当不给定参数时，就返回了原数组的拷贝
numbers = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice();
// [1, 2, 3, 4, 5]

一样的，处理对象和数组的时候是引用而不是值复制。

八、JSON.parse & JSON.stringify（深拷贝）

JSON.stringify将一个对象转成字符串；
JSON.parse将转成的字符串转回对象。

将它们组合起来能够将对象转换成字符串，而后反转这个过程来建立一个全新的数据结构。

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse(
  JSON.stringify(nestedNumbers)
);
numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1], [2]]
// [[1, 300], [2]]
// These two arrays are completely separate!

这个能够安全地拷贝深度嵌套的对象/数组

几种特殊状况

一、若是obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

var test = {
  name: 'a',
  date: [new Date(1536627600000), new Date(1540047600000)],
};

let b;
b = JSON.parse(JSON.stringify(test))
console.log(b)

二、若是obj里有RegExp、Error对象，则序列化的结果将只获得空对象；

const test = {
  name: 'a',
  date: new RegExp('\\w+'),
};
// debugger
const copyed = JSON.parse(JSON.stringify(test));
test.name = 'test'
console.log('ddd', test, copyed)

三、若是obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；

const test = {
  name: 'a',
  date: function hehe() {
    console.log('fff')
  },
};
// debugger
const copyed = JSON.parse(JSON.stringify(test));
test.name = 'test'
console.error('ddd', test, copyed)

四、若是obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null

五、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 若是obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；

function Person(name) {
  this.name = name;
  console.log(name)
}

const liai = new Person('liai');

const test = {
  name: 'a',
  date: liai,
};
// debugger
const copyed = JSON.parse(JSON.stringify(test));
test.name = 'test'
console.error('ddd', test, copyed)

参考文章： 关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

九、Array.concat（浅拷贝）

concat将数组与值或其余数组进行组合。

[1, 2, 3].concat(4); // [1, 2, 3, 4]
[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

若是咱们不指定参数或者提供一个空数组做为参数，就能够进行浅拷贝。

[1, 2, 3].concat(); // [1, 2, 3]
[1, 2, 3].concat([]); // [1, 2, 3]

一样的，处理对象和数组的时候是引用而不是值复制。

十、Array.from（浅拷贝）

能够将任何可迭代对象转换为数组。给一个数组返回一个浅拷贝。

console.log(Array.from('foo'))
// ['f', 'o', 'o']

numbers = [1, 2, 3];
numbersCopy = Array.from(numbers)
// [1, 2, 3]

一样的，处理对象和数组的时候是引用而不是值复制。

---

小结

上面这些方法都是在使用一个步骤来进行拷贝。若是咱们结合一些其余的方法或技术可以发现还有不少的方式来实现数组的拷贝，好比一系列的拷贝工具函数等。

---

原文地址：
How to clone an array in JavaScript

---

关注微信公众号同步推送更新

或者能够去Github上面给个Star