JavaScript中十种一步拷贝数组的方法实例详解

在JavaScript中，我们常常需要对数组进行复制或者克隆，以便在之后的操作中更加方便。本文将详细讲解JavaScript中十种一步拷贝数组的方法，并给出相应的实例说明。

1. 使用数组的slice方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.slice();
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用数组的slice方法可以返回一个新的数组对象，这个新的数组对象包含了被克隆数组的所有元素。需要注意的是，在使用slice方法克隆数组时，原数组并没有被修改。

2. 使用数组的concat方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.concat();
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用数组的concat方法也可以返回一个新的数组对象，这个新的数组对象包含了被克隆数组的所有元素。需要注意的是，在使用concat方法克隆数组时，原数组并没有被修改。

3. 使用ES6的扩展运算符

let arr1 = [1, 2, 3, 4, 5];
let arr2 = [...arr1];
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用ES6的扩展运算符可以将被克隆数组展开成独立的元素，然后使用新的数组字面量包含这些元素，最终得到一个新的数组对象。需要注意的是，在使用扩展运算符克隆数组时，原数组并没有被修改。

4. 使用数组的map方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.map(x => x);
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用数组的map方法可以对数组中的每个元素进行操作，并返回一个新的数组对象，这个新的数组对象包含了被克隆数组的所有元素。需要注意的是，在使用map方法克隆数组时，原数组并没有被修改。

5. 使用数组的filter方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.filter(() => true);
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

虽然使用数组的filter方法进行数组克隆并不是明智的选择，但是在这里提供一下这种方法的实例说明。使用数组的filter方法可以对数组进行筛选，并返回一个包含所有元素的新的数组对象。需要注意的是，在使用filter方法克隆数组时，原数组并没有被修改。

6. 使用数组的reduce方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.reduce((acc, cur) => {
  return acc.concat(cur);
}, []);
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用数组的reduce方法可以将数组中的所有元素通过指定的累加器函数逐个处理，并最终返回一个新的数组对象。在这里，我们使用一个空数组作为累加器的初始值，然后将被克隆数组中的每个元素都添加进去。需要注意的是，在使用reduce方法克隆数组时，原数组并没有被修改。

7. 使用JSON对象的parse方法和stringify方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = JSON.parse(JSON.stringify(arr1));
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用JSON对象的parse方法和stringify方法可以将数组转化成JSON字符串，然后再将JSON字符串转化成新的数组对象。需要注意的是，这种方法能够克隆的数组不能含有任何函数或者不可枚举的属性，否则这些属性将会被丢失。

8. 使用Object.assign方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = Object.assign([], arr1);
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用Object.assign方法可以将一个空数组作为目标对象，然后将被克隆数组作为源对象，最终返回一个新的数组对象。需要注意的是，在使用Object.assign方法克隆数组时，原数组并没有被修改。

9. 使用数组的from方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = Array.from(arr1);
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用数组的from方法可以将类数组或者可迭代对象转化成数组。在这里，我们将被克隆数组作为第一个参数传入，然后使用返回值作为新的数组对象。需要注意的是，在使用from方法克隆数组时，原数组并没有被修改。

10. 使用ES6的Array.from方法

let arr1 = [1, 2, 3, 4, 5];
let arr2 = Array.from(arr1);
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

使用ES6的Array.from方法和普通的数组的from方法一样，也可以将类数组或者可迭代对象转化成数组。在这里，我们将被克隆数组作为第一个参数传入，然后使用返回值作为新的数组对象。需要注意的是，在使用from方法克隆数组时，原数组并没有被修改。

结论

本文共讲解了JavaScript中十种一步拷贝数组的方法，并给出了相应的实例说明。需要注意的是，这种方法中的每个方法都有其特定的使用场景，应该根据实际需要灵活选择。