手写 js 深浅拷贝

浅拷贝

• 拷贝 目标对象的属性 引用类型地址

实现浅拷贝的方式

1. Object.assign({}, .obj)
2. Array.slice()

// 浅拷贝简单实现
function clone(target) {
    if(target === null ) {
        return target
    }
	// 克隆 数组 和 对象
    let cloneTarget = Array.isArray(target) ? [] : {}
    for (const key in target) {
        if (target.hasOwnProperty(key)) {
            cloneTarget[key] = target[key]
        }
    }
    return cloneTarget
}

深拷贝

• 拷贝 目标对象的属性

深拷贝实现方式

1. JSON.parse(JSON.stringify())
2. 通过深度循环递归来实现
   • 第一种 方式 虽说满足大部分的需求 但是有缺陷
     • 会忽略undefined
     • 会忽略sybmol
     • 会忽略函数
     • 不能处理循环调用

// 手动实现 深拷贝

function isObject(params) {
  let type = typeof params
  return params !== null && (type === 'object' || type === 'function')
}

function forEach(params, fn) {
	console.log('parmas', params);
	let index = -1
	while (++index < params.length) {
	    console.log(params);
	    let key = params[index]
	    fn(key)
	}
}

/**
 * 1. 判断是否 引用类型 不是 直接返回 
 * 2. 处理数组
 * 3. 处理循环引用
 * 4. 性能优化
*/
function deepClone(target, map = new Map()) {
    
    // 1. 判断是否 引用类型 不是 直接返回 
    if (!isObject(target)) {
        return target
    }

    // 2. 处理数组
    let cloneTarget = Array.isArray(target) ? [] : {}

    // 3. 处理循环引用
    if(map.get(target)) {
        return map.get(target)
    }
    map.set(cloneTarget, target)

    // 4. 性能优化
    // for (const key in target) {
    //     if (target.hasOwnProperty(key)) {
    //         const element = target[key];
    //         cloneTarget[key] = deepClone(target[key], map)
    //     }
    // }
    let Keys = Array.isArray(target) ? undefined : Object.keys(target)

    forEach(Keys || target, (key) => {
        console.log(key);
        cloneTarget[key] = deepClone(target[key], map)
    })


    return cloneTarget
}

• 以上还有缺陷

1. 不能拷贝 map set
2. 不能拷贝 函数