实现深拷贝的几种方式

深拷贝:在堆内存中开辟一个存储空间来存储一个一模一样的克隆对象。
浅拷贝:相反不在堆内存中重新开辟空间,仅仅复制栈内存中的引用地址,本质上依然指向的同一块存储空间。

一、JSON.stringify();(深拷贝普通对象时推荐使用)

let obj = {
  name: '张三',
  age: 18
}
 
// 先转为json格式字符串,再转回来
let newObj = JSON.parse(JSON.stringify(obj));
 
obj.age = 20;
console.log(newObj.age); // 输出18

此方法仅适用对象属性类型为string、number、boolean时,推荐使用该方式。但是属性类型为undefined、null、Date、RegExp、function时,使用该方式进行深拷贝会出问题。

二、递归方式(推荐使用)

// 函数拷贝
const copyObj = (obj = {}) => {
    let newObj = null
    // 判断是否需要继续进行递归
    if(typeof obj == 'object' && obj !== null){
        newObj = obj instanceof Array?[]:{}
        // 进行下一层递归克隆
        for(let i in obj){
            newObj[i] = copyObj(obj[i])
        }
    }else{
        newObj = obj
    }
    return newObj
}

let obj = {
    numberParams: 1,
    funcParams:() => {
        console.log('I am a function!')
    },
    objParams: {
        prop1: 1,
        prop2: 2
    }
}

const newObj = copyObj(obj)
obj.numberParams = 100 // 更改原对象的属性
console.log(newObj.numberParams) // 输出1

这种方式为项目中最安全且最常用的深拷贝方法俗称万能拷贝,适合于各种数据结构。

此外还有其他组件库的方法比如

1.JQuery的extend()

2.第三方库lodash的cloneDeep()

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值