JS深拷贝

对象、数组、基本类型 

/**
 * 深拷贝
 */

const obj1 = {
    age: 20,
    name: 'xxx',
    address: {
        city: 'beijing'
    },
    arr: ['a', 'b', 'c']
}
console.log(typeof null)
const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {//obj == null等价于obj===null||obj===undefined
        // 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
}
 

追加了函数、Set、Map、循环引用

/**
 * 深拷贝
 * @param obj obj
 * @param map weakmap 为了避免循环引用
 */
export function cloneDeep(obj, map = new WeakMap()) {
    if (typeof obj !== 'object' || obj == null)
        return obj;
    // 避免循环引用：set完之后直接get，不用重新计算
    const objFromMap = map.get(obj);
    if (objFromMap)
        return objFromMap;
    let target = {};
    map.set(obj, target);
    // Map
    if (obj instanceof Map) {
        target = new Map();
        obj.forEach((v, k) => {
            const v1 = cloneDeep(v, map);
            const k1 = cloneDeep(k, map);
            target.set(k1, v1);
        });
    }
    // Set
    if (obj instanceof Set) {
        target = new Set();
        obj.forEach(v => {
            const v1 = cloneDeep(v, map);
            target.add(v1);
        });
    }
    // Array
    if (obj instanceof Array) {
        target = obj.map(item => cloneDeep(item, map));
    }
    // Object
    for (const key in obj) {
        const val = obj[key];
        const val1 = cloneDeep(val, map);
        target[key] = val1;
    }
    return target;
}
// 功能测试
const a = {
    set: new Set([10, 20, 30]),
    map: new Map([['x', 10], ['y', 20]]),
    info: {
        city: '北京'
    },
    fn: () => { console.info(100); }
};
a.self = a;
console.log(cloneDeep(a));