JS拷贝数组|极客笔记

JS拷贝数组

在JavaScript中，拷贝数组是一个常见的操作。有时候我们需要在不改变原数组的情况下对数组进行复制，以便后续对拷贝后的数组进行操作。本文将详细介绍JavaScript中拷贝数组的几种方法，并分析它们的优缺点。

方法一：使用slice方法

slice() 方法从已有的数组中返回选定的元素。

示例代码如下：

let originalArray = [1, 2, 3, 4, 5];
let copiedArray = originalArray.slice();
console.log(copiedArray);

// Output: [1, 2, 3, 4, 5]

优点：

slice() 方法简单易用。
返回的是一个新数组，不会影响原数组。

缺点：

仅适用于对一维数组的拷贝。

方法二：使用concat方法

concat() 方法用于连接两个或多个数组。

示例代码如下：

let originalArray = [1, 2, 3, 4, 5];
let copiedArray = [].concat(originalArray);
console.log(copiedArray);

// Output: [1, 2, 3, 4, 5]

优点：

concat() 方法也是简单易用的方法。
返回的是一个新数组，不会影响原数组。

缺点：

仅适用于对一维数组的拷贝。

方法三：使用展开运算符

展开运算符（spread operator）可以在拷贝数组时非常方便。

示例代码如下：

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

// Output: [1, 2, 3, 4, 5]

优点：

简洁、直观，一行代码即可完成。
支持拷贝多维数组。

缺点：

在处理大型数组时可能会造成性能问题。

方法四：使用JSON方法

将数组对象转换为JSON格式，再将JSON格式转换为数组，也可以实现数组的深拷贝。

示例代码如下：

let originalArray = [1, 2, [3, 4], 5];
let copiedArray = JSON.parse(JSON.stringify(originalArray));
console.log(copiedArray);

// Output: [1, 2, [3, 4], 5]

优点：

支持对多维数组的拷贝。

缺点：

不适用于处理包含函数、正则表达式等特殊类型的数组。

方法五：使用Array.from方法

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

示例代码如下：

let originalArray = [1, 2, 3, 4, 5];
let copiedArray = Array.from(originalArray);
console.log(copiedArray);

// Output: [1, 2, 3, 4, 5]

优点：

Array.from() 方法可以处理类似数组的对象。
支持对多维数组的拷贝。

缺点：

在处理大型数组时可能会造成性能问题。

方法六：使用循环

通过遍历原数组，将每个元素逐一添加到新数组中，也可以实现数组的拷贝。

示例代码如下：

let originalArray = [1, 2, 3, 4, 5];
let copiedArray = [];
for(let i=0; i<originalArray.length; i++) {
    copiedArray.push(originalArray[i]);
}
console.log(copiedArray);

// Output: [1, 2, 3, 4, 5]

优点：

自定义程度高，适用于对特定数组进行操作。

缺点：

需要额外的循环操作，相对繁琐。

方法七：使用递归实现深拷贝

对于多维数组，可以通过递归的方式实现深拷贝。

示例代码如下：

function deepCopy(arr) {
    let newArr = [];
    for(let el of arr) {
        if(Array.isArray(el)) {
            newArr.push(deepCopy(el));
        } else {
            newArr.push(el);
        }
    }
    return newArr;
}

let originalArray = [1, 2, [3, 4], 5];
let copiedArray = deepCopy(originalArray);
console.log(copiedArray);

// Output: [1, 2, [3, 4], 5]