前端必会coding-深拷贝(deepClone)

前端必会的代码deepClone

    • 前端必会的代码deepClone
      • 两种实现方式
      • coding
        • 利用json实现
        • 递归
        • 递归改进

前端必会的代码deepClone

两种实现方式

  1. 曲线救国(JSON)
  2. 常规思路(递归)

coding

利用json实现
function jsonDeepClone(target) {
	return JSON.parse(JSON.stringify(target)); 
}
// 测试
const a = {
 b: { c: 1},
 d: 1,
}
const a2 = {
 f: true,
 e: undefined,
 f: function a() { console.log('1') },
}
jsonDeepClone(a1)
jsonDeepClone(a2)

结果展示:
前端必会coding-深拷贝(deepClone)_第1张图片
缺点 如图

递归
  1. 基础版本
function deepClone(target) {
	if(typeof target === 'object') {
		let cloneTarget = Array.isArray(target) ? [] : {};
		for(let key in target) {
			cloneTarget[key] = deepClone(target[key]);
		}
		return cloneTarget;
	} else {
		return target;
	}
}

测试结果
成功部分前端必会coding-深拷贝(deepClone)_第2张图片

失败部分前端必会coding-深拷贝(deepClone)_第3张图片

递归改进
function deepClone(target, map = new WeakMap()) {
	if (typeof target === 'object') {
		let cloneTarget = Array.isArray(target) ? [] : {};
		if(map.get(target)) {
			return target;
		}
		map.set(target, cloneTarget);
		for(const key in target) {
			cloneTarget[key] = deepClone(target[key], map)
		}
		return cloneTarget;
	} else {
		return target;
	}
}

结果展示
前端必会coding-深拷贝(deepClone)_第4张图片

你可能感兴趣的:(JavaScript,es6)