什么是深拷贝、什么是浅拷贝？两者的区别?

目录

首先了解一下基本类型和引用类型的区别

深拷贝和浅拷贝的区别

总结:

---

首先了解一下基本类型和引用类型的区别

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。    基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

---

深拷贝和浅拷贝的区别

这两者的区别，在任何编程语言中，都是一样的。

浅拷贝的概念：

把对象中，“最外层”的属性，拷贝一份，交给一个新对象

如果发现，属性的值是简单类型，则把值完整拷贝一份，交给新对象

如果是复杂类型，则只复制内存地址，交给新对象

const obj  =  {
        name: 'zs',
        age: 20,
        info: {
                address: '北京',
                area: '东城区'
        }
}

const o1 = { ...obj }
for (let k in obj) {
        o1[k] = obj[k]
}
const o1 = Object.assign({}, obj)  // es6新增浅拷贝
console.log(o1)

深拷贝的概念:

把对象中每一层属性，都完整的复制一份，交给一个新对象，深拷贝得到的两个对象，是完全内存无关的

JSON 转换（好处：简单；坏处：无法深拷贝函数等特殊值）

递归（好处：能够实现完整的深拷贝；坏处：需要对递归有清醒掌握）

const obj  =  {
        name: 'zs',
        age: 20,
        hobby: ['吃饭', '睡觉', '打豆豆'],
         info: {
                address: '北京',
                area: '东城区'
                class: [1,2,3]
        },
        show() {
                console.log('show函数被调用了')
        }
}

// 注意：使用 JSON 相关的 API 实现深拷贝，会丢失函数等无法被 JSON 识别的数据
const str = JSON.stringify(obj)
const result = JSON.parse(str)
console.log(result)
   
function deepClone(val) {
   if (typeof val === 'object' && val !== null) {
        // 有必要进行深拷贝
        // newObj 中存放的，是深拷贝的结果
        const newObj = Array.isArray(val) ? [] : {}
        // TODO:对 val 进行 for...in... 深拷贝
        for (const k in val) {
           // console.log(k, val[k])
           newObj[k] = deepClone(val[k])
        }
        return newObj
   } else {
        // 没必要进行深拷贝
        return val
      }
   }

// const result = deepClone(['a', 'b', 'c'])
// const result = deepClone({ name: 'zs', age: 20, info: { a: 1, b: 2 } })
   const result = deepClone(obj)
   console.log(result)

总结:

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个 地址，就会影响到另一个对象。

深拷贝：会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即 发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。