js的深拷贝与浅拷贝、实现深拷贝

浅拷贝:指针的拷贝

深拷贝:指针和值的拷贝

提示:js的基本数据类型,指针和值都存放在栈中;引用数据类型,指针存放在栈,值存在堆中。浅拷贝后得的的值改变会改变原数据,深拷贝后得到的值改变不会改变原数据。

//第一种为Object.assign(),
let a = {
    age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

//但是如果属性值是对象的话,拷贝的是地址
let a = {
    age: 1,
    name: {
        "hehe": 1
    }
}
let b = Object.assign({}, a)
a.name.hehe = 2
console.log(b.name.hehe) // 2
//第二种为展开运算符 ...  如果属性值是对象的话,也是拷贝的地址
let a = {
    age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1
//第三种为arr.concat()   (数组)

实现深拷贝的方式,列举了三种

1.JSON.parse(JSON.stringify(object)) 缺点:会忽略undefined,会忽略 symbol,不能序列化函数,不能解决循环引用的对象
2.使用 MessageChannel 函数:
function structuralClone(obj) {
    return new Promise(resolve => {
        const { port1, port2 } = new MessageChannel()
        port2.onmessage = ev => resolve(ev.data)
        port1.postMessage(obj)
    })
}
var obj = {
    a: 1,
    b: {
        c: 2
    }
}
obj.b.d = obj.b
// 注意该方法是异步的,且可以处理 undefined 和循环引用对象
const test = async () => {
    const clone = await structuralClone(obj)
    //这里改变clone对象的值不会影响obj
    console.log(clone)
}
test();
3.封装一个函数,一个一个判断处理 数组、对象、undefined等类型

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值