js数组拷贝|极客笔记

js数组拷贝

在JavaScript中，数组拷贝是一个常见的操作，它可以用来创建原数组的副本，而不影响原始数组的内容。在本文中，我们将详细讨论如何使用不同的方法进行数组拷贝，并比较它们之间的优缺点。

1. 直接赋值

最简单的数组拷贝方法就是通过直接赋值来创建一个新数组。这种方法的优点是简单直接，但缺点是只能创建原数组的浅拷贝，对于嵌套数组或对象的情况可能会出现引用问题。

示例代码如下所示：

let originalArray = [1, 2, 3];
let copiedArray = originalArray;

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray); // [1, 2, 3]

originalArray[0] = 4;

console.log(originalArray); // [4, 2, 3]
console.log(copiedArray); // [4, 2, 3]

在上面的示例中，我们可以看到当修改原数组 originalArray 的元素时，copiedArray 也会跟着改变。这是因为直接赋值创建的是原数组的引用，而不是副本。

2. 使用slice()方法

slice() 方法不改变原始数组，而是返回一个浅拷贝。它可以接受两个参数，分别表示开始和结束位置。如果不传参数，则会返回原数组的副本。

示例代码如下所示：

let originalArray = [1, 2, 3];
let copiedArray = originalArray.slice();

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray); // [1, 2, 3]

originalArray[0] = 4;

console.log(originalArray); // [4, 2, 3]
console.log(copiedArray); // [1, 2, 3]

在上面的示例中，我们可以看到当修改原数组 originalArray 的元素时，copiedArray 不会受影响。这是因为 slice() 方法创建的是原数组的浅拷贝。

3. 使用concat()方法

concat() 方法可以用于合并两个或多个数组，并返回一个新数组。通过将原数组与空数组合并，也可以实现数组的拷贝。

示例代码如下所示：

let originalArray = [1, 2, 3];
let copiedArray = [].concat(originalArray);

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray); // [1, 2, 3]

originalArray[0] = 4;

console.log(originalArray); // [4, 2, 3]
console.log(copiedArray); // [1, 2, 3]

在上面的示例中，通过将原数组与空数组合并，我们实现了对原数组的拷贝，并且修改原数组时不会影响新数组。

4. 使用ES6的展开语法

ES6引入了展开语法，可以在数组字面量或函数调用中展开数组，并实现数组的浅拷贝。

示例代码如下所示：

let originalArray = [1, 2, 3];
let copiedArray = [...originalArray];

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray); // [1, 2, 3]

originalArray[0] = 4;

console.log(originalArray); // [4, 2, 3]
console.log(copiedArray); // [1, 2, 3]

在上面的示例中，展开语法 ... 可以方便地将原数组展开，并创建一个新数组，从而实现数组的拷贝。

5. 使用JSON方法

通过JSON.stringify(array)将数组转为JSON字符串，再通过JSON.parse(string)将JSON字符串转为数组，实现数组的深拷贝。

示例代码如下所示：

let originalArray = [1, 2, {a: 3}];
let copiedArray = JSON.parse(JSON.stringify(originalArray));

console.log(originalArray); // [1, 2, {a: 3}]
console.log(copiedArray); // [1, 2, {a: 3}]

originalArray[2].a = 4;

console.log(originalArray); // [1, 2, {a: 4}]
console.log(copiedArray); // [1, 2, {a: 3}]

在上面的示例中，通过将数组转为JSON字符串再转为数组的方式，我们实现了对原数组的深拷贝，修改原数组对象的属性时不会影响新数组。