JS的深拷贝和浅拷贝

一时失言乱红尘 2022-10-02 08:50 217阅读 0赞

> **前言**:     原来工作只知道,使用 Object.assign(\{\},obj) 去拷贝一个对象会复制各个熟悉值.不会影响原对象.
> 
>              后来学会了ES6 是用 扩展运算符\{...obj\} 拷贝. 但是没有深究其原理.后来有空扒了以下原理和概念:
> 
> **浅拷贝的时候,如果数据是基本数据类型，那么就会拷贝值本身，如果除了基本数据类型之外还有一层对象, 那么对于浅拷贝而言就只能拷贝其引用，对象的改变会反应到拷贝对象上；**
> 
> **但是深拷贝就会拷贝多层，即使是嵌套了对象，也会都拷贝出来。assign,扩展运算法 都是拷贝两层.并不是深拷贝.**

一般使用 ''='' 号给变量赋 值 比如:

let x = 1
    let y = x
    y = 2
    console.log(x) //输出1,没有改变原对象的值
    
    let a = {"attr": 1 }
    let b = a
    b.attr = 2
    console.log(a.attr) // 输出 2,原对象的值发生了改变

使用 assign(\{\},obj) 函数,只是拷贝两层 ,第三层一样是拷贝引用: (扩展运算符\{...obj\}同理)

// 拷贝两层
    let a2 = {"attr": 'oldVal'}
    
    let b2 = Object.assign({},a2) // 拷贝
    
    b2['attr'] = 'newVal'
    
    console.log(a2.attr) // oldVal
    
    // 三层,就无法拷贝了
    let a3 = {"attr": 'oldVal'}
    let b3 = {"attr": a3}
    
    let c3 = Object.assign({},b3) // 拷贝
    
    
    c3['attr']['attr'] = 'newVal'
    
    console.log(a3.attr) //newVal -- 原对象,值发生了改变

如何深拷贝?

[百度方法: js 深拷贝方法][js]

[js]: https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=js%E6%B7%B1%E6%8B%B7%E8%B4%9D&oq=js%25E6%25B7%25B1%25E6%258B%25B7%25E8%25B4%259D&rsv_pq=a66e00c200020fb6&rsv_t=0c04h2q8lw9L8gdFKxXtjFMsYgZjC42KcrwUPku8QqW0IpvclLVfJqZ20wI&rqlang=cn&rsv_enter=1&rsv_sug3=1&rsv_sug1=1&rsv_sug7=100&rsv_sug2=1&prefixsug=js%25E6%25B7%25B1%25E6%258B%25B7%25E8%25B4%259D&rsp=0&rsv_sug4=359&rsv_sug=1