JavaScript手撕代码 —— 实现对象的深拷贝

1. 实现深拷贝

const deepCopy = oldObj => {
    // 递归出口：若属性为值或者null，则直接返回
    if (typeof oldObj !== 'object' || oldObj === null) {
        return oldObj;
    }

    // 结果对象
    let newObj = {};
    // 如果是数组，则定义结果数组
    if (oldObj.constructor === Array) {
        newObj = [];
    }

    // 遍历对象的key
    for (const key in oldObj) {
        // key是对象的自有属性，递归调用深拷贝方法
        if (oldObj.hasOwnProperty(key)) {
            newObj[key] = deepCopy(oldObj[key]);
        }
    }
    return newObj;
};

2. 验证

1. 拷贝数组

const arr = [
    {
        a: () => {
            console.log('aaaa');
        },
    },
    { a: 2 },
    { a: 3 },
];

const arr2 = deepCopy(arr);

// 改变新的数组
arr2[0].a = () => {
    console.log('bbbb');
};
arr2[1].a = 9;

arr[0].a(); // aaaa
arr2[0].a(); // bbbb

console.log(arr[1].a); // 2
console.log(arr2[1].a); // 9

改变新数组的内容，旧数组不会被改变。

2. 拷贝对象

const oldObj = {
    id: 0,
    data: {
        name: 'Jack',
        age: 18,
    },
};

const newObj = deepCopy(oldObj);

newObj.id = 1;
newObj.data.name = 'Tom';
newObj.data.age = 20;

console.log(oldObj); // { id: 0, data: { name: 'Jack', age: 18 } }
console.log(newObj); // { id: 1, data: { name: 'Tom', age: 20 } }

改变新对象中深层对象的值，旧对象不会被改变。