JavaScript 编程中如何利用遍历深拷贝数组对象

JavaScript编程中，深拷贝数组对象 是确保对象副本独立于原对象的重要手段，常用于防止原数据被意外修改。通过深拷贝，可以创建一个一模一样但完全独立的数组对象。实现深拷贝有多种方法，包括递归复制、使用JSON方法、利用库函数等。其中，递归复制是最直观的一种方法，遍历原数组对象的每个元素，如果元素是基础类型则直接复制，如果是对象或数组则再次进行递归拷贝，从而实现层次上的全面复制。

一、递归遍历方法

基础概念介绍

递归遍历深拷贝是通过函数自调用，检查数组中每个元素的类型的方法。若元素为对象，则对该对象执行深拷贝；若为基本类型，则直接复制。这种方法可以保证新数组中的对象与原数组中的对象内存地址不同。

实现步骤

首先，创建一个拷贝函数，判断当前待拷贝的元素类型。如果是数组或对象，则递归调用该拷贝函数；如果是基础数据类型，则直接复制。递归遍历的关键在于正确处理每一层数据的复制与递归逻辑。

function deepClone(obj) {
    if (typeof obj !== 'object' || obj == null) {
        // 非对象或数组，则直接返回值
        return obj;
    }
    // 初始化返回结果
    let result;
    if (obj instanceof Array) {
        result = [];
    } else {
        result = {};
    }
    for (let key in obj) {
        // 保证key不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用深拷贝
            result[key] = deepClone(obj[key]);
        }
    }
    return result;
}

使用该递归函数可以实现数组对象的深拷贝：

const array = [{ a: 1 }, { b: 2 }];
const newArray = deepClone(array);
console.log(newArray); // [{ a: 1 }, { b: 2 }]

二、JSON方法

方法解释

利用JSON.stringify和JSON.parse这两个方法可以快速实现深拷贝。首先将对象转化为JSON字符串，然后再将字符串解析成新的对象。

注意事项

使用JSON方法进行深拷贝时，无法复制函数和正则对象等特殊的对象，也不能解决循环引用的问题。

function jsonDeepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
const array = [{ a: 1, b: function() {} }, { c: 2 }];
const newArray = jsonDeepClone(array);
console.log(newArray); // [{ a: 1 }, { c: 2 }]

在这种方法中，原数组中的函数b不会被拷贝到newArray中。

三、库函数

第三方库介绍

有些第三方库如lodash提供了深拷贝的函数。通过引入这些库，可以不用自己编写深拷贝逻辑，直接调用库中的函数。

使用示例

以lodash的_.cloneDeep方法为例，此方法是一个成熟的深拷贝实现，支持拷贝数组和对象，也可处理函数和循环引用问题。

import _ from 'lodash';
const array = [{ a: 1 }, { b: 2 }];
const newArray = _.cloneDeep(array);
console.log(newArray); // [{ a: 1 }, { b: 2 }]

使用_.cloneDeep之后，newArray为array的一个深拷贝版本。

四、手动迭代法

迭代法的原理

与递归方法类似，迭代法也是检查每个元素，但使用栈或队列来管理待拷贝的数据结构，避免了递归的函数堆栈限制。

实现步骤

创建一个栈（或队列），将原始对象作为第一个元素放入。然后遍历栈，对栈中当前对象的每个属性进行判断，若属性值为对象，则将此属性值和新构造的对象放入栈中进行下一轮的拷贝，这个过程会持续进行，直到栈为空。

function iterateDeepClone(obj) {
    let root = obj instanceof Array ? [] : {};
    let stack = [{ parent: root, key: undefined, data: obj }];
    while (stack.length) {
        // 广度优先搜索
        const node = stack.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;
        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            parent[key] = obj instanceof Array ? [] : {};
            res = parent[key];
        }
        for (let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    stack.push({ parent: res, key: k, data: data[k] });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }
    return root;
}