前端经典面试题 - 手写一个深拷贝函数，2种方法实现深拷贝

一句话区分深拷贝、浅拷贝

深拷贝：拷贝前后，互不影响
浅拷贝：拷贝前后，互相影响

前置知识：判断是否为复杂数据类型

let defineType = function(element){
    return Object.prototype.toString.call(element).slice(8,-1)
}

通过slice方法，截取字符串，如是复杂数据类型，则会输出Object、Array字符串。

方法一：深拷贝函数

let toClone = function(data){
	// 检验数据类型
    let dataType = defineType(data)
    //	初始化数据，此时新数据的数据类型还不确定
    let result
    // 确定新数据的数据类型
    if(dataType === 'Object'){
        result = {}
    }else if(dataType === 'Array'){
        result = []
    }else{
    	//  如果是简单数据类型直接返回
        return result
    }
    //  遍历生成新数据内容
    for (const key in data) {
    	//	检验是否包含复杂数据结构
        let value = data[key]
        let valueType = defineType(value)
        //	如果包含复杂数据结构，递归，再次调用toClone函数
        if (valueType === 'Object' || valueType === 'Array') {
            result[key] = toClone(value)
        }else{
        	//  如果是简单数据类型，直接赋值
            result[key] = value
        }
    }
    return result
}

检验

var obj = {
    k1 : 5,
    k2 : 55,
    k3 : '588',
    k4 : [5,7,5],
    k5 : {
        k6 : 345
    }
}
let objNew = toClone(obj)
console.log(obj);	
console.log(objNew);
	// { k1: 5, k2: 55, k3: '588', k4: [ 5, 7, 5 ], k5: { k6: 345 } }
	// { k1: 5, k2: 55, k3: '588', k4: [ 5, 7, 5 ], k5: { k6: 345 } }

objNew.k4[1]=8
console.log(obj);
console.log(objNew);
	// { k1: 5, k2: 55, k3: '588', k4: [ 5, 7, 5 ], k5: { k6: 345 } }
	// { k1: 5, k2: 55, k3: '588', k4: [ 5, 8, 5 ], k5: { k6: 345 } }

方法二

JSON.parse(JSON.stringify(element))

如果对您有帮助，请为我点个赞~~