js基础复习之自己实现一个deepClone深拷贝(详细注释版)

复习一下js基础部分的深拷贝问题：

// 这里我们先创建一个obj对象，就是我们要深拷贝的那个
var obj = {
    name: 'DeanWade',
    age: 28,
    info: {
        hobby: ['switch', 'ps4', 'basketball', {
            'coding1': 'js',
            'coding2': 'vue',
            'coding3': 'python'
        }],
        career: {
            worldwideTrading: 3,
            FrontEndEnginner: 2
        }
    }
}

// origin是拷贝目标， target是输出结果目标
function deepClone(origin, target) {
	// 如果没有指定输出结果对象，我们就默认给一个空对象{}
    var tar = target || {}
    // 把Object.prototype.toString方法拿出来保存到toStr,后面用
    toStr = Object.prototype.toString
    // 不想维护字符串， arrType就是Object.prototype.toString的结果
    // 补充知识：
    // 我们用Object.prototype.toString.call()来判断到底是对象类型还是数组类型
    // Object.prototype.toString.call([]) ===>结果是字符串[object Array]
    // Object.prototype.toString.call({}) ===>结果是字符串[object Object]
    var arrType = '[object Array]'
    
    // 遍历拷贝目标里面的每一项
    for (var k in origin) {
    	// 要判断属性一定要在目标的本身，而不是在它的__proto__上
        if(origin.hasOwnProperty(k)) {
        	// 如果origin[k]是一个对象类型并且还不是null的时候
            if(typeof origin[k] === 'object' && origin[k] !== null) {
            	// 判断origin[k]是数组还是对象
            	// 是数组我们就让目标的k属性targe[k]初始化为空数组[]
            	// 是对象我们就让标的k属性targe[k]初始化为空对象{}
                tar[k] = toStr.call(origin[k]) === arrType ? [] : {}
                // 递归deepClone, 这次递归的拷贝目标是origin[k], 输出目标是target[k]
                deepClone(origin[k], tar[k])
            // 直到一个属性不是对象的时候，就可以直接赋值不用递归循环去一层一层往里面找了
            } else {
            	// 直接赋值
                tar[k] = origin[k]
            }
        }
    }
    // 返回最终结果
    return tar
}

const newObj = deepClone(obj, {})
console.log(newObj)

运行结果：

这篇教程整理自小野森森老师的视频ES5-ES6『对象深拷贝』