JavaScript中的浅拷贝和深拷贝原理与实现浅析

const obj = { name: 'John', age: 30 };

const newObj = obj;

newObj.age = 40;
console.log(obj.age); // 输出 40

const arr = [1, 2, 3];
const newArr = arr;
newArr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

/**
 * 浅拷贝
 *
 * @param {Object} target 目标对象
 * @param {Object} source 源对象
 * @return {Object} 返回目标对象
 */
function extend(target, source) {
    for (var key in source) {
        if (source.hasOwnProperty(key)) {
            var value = source[key];
            if (typeof value !== 'undefined') {
                target[key] = value;
            }
        }
    }
    return target;
}

const obj = { name: 'John', age: 30 };
const newObj = JSON.parse(JSON.stringify(obj));
newObj.age = 40;
console.log(obj.age); // 输出 30

const arr = [1, [2, 3], [4, [5]]];
const newArr = JSON.parse(JSON.stringify(arr));
newArr[1][0] = 6;
console.log(arr[1][0]); // 输出 2

function deepCopy(obj) {
    var result, copy;
    if (obj.constructor === Object)
        result = {}; //判断传入的如果是对象，继续遍历
    else if (Array.isArray(obj))
        result = []; //判断传入的如果是数组，继续遍历
    else
        return obj; //如果是基本数据类型就直接返回
    for (var key in obj) {
        if(obj.hasOwnProperty(key)){
            copy = obj[key];
            if(copy===null){
                break;
            }
            if(typeof copy ==='undefined'){
                result[key]=undefined;
            }else if (getType(copy) == "Object"||getType(copy) == "Array")
                result[key] = deepCopy(copy); //递归方法
            else
                result[key] = copy; //基本数据类型则赋值给属性
        }
    }
    return result;
}

/**
* 深拷贝
* @param obj
* @param appeard
* @returns {*[]|any}
*/
deepCopy(obj, appeard = new Map()) {
    if (!(obj instanceof Object)) return obj; //如果是原始数据类型
    if (appeard.has(obj)) return appeard.get(obj); //如果已经出现过
    let result = Array.isArray(obj) ? [] : {};
    appeard.set(obj, result); //将新对象放入map
    //遍历所有属性进行递归拷贝
    [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)].forEach(key => (result[key] = this.deepCopy(obj[key], appeard)));
    return result;
}