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

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

深拷贝:拷贝前后,互不影响
浅拷贝:拷贝前后,互相影响

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

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

通过slice方法,截取字符串,如是复杂数据类型,则会输出ObjectArray字符串。

方法一:深拷贝函数

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))

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值