js basic review to implement a deepClone deep copy by yourself (detailed annotation version)

Review the deep copy problem of the basic part of 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)

operation result:
Insert picture description here

This tutorial is compiled from the video ES5-ES6 "Object Deep Copy" by Mr. Mori Ono

Guess you like

Origin blog.csdn.net/dyw3390199/article/details/112736644