对象的深复制与浅复制

对象深拷贝与浅拷贝

深拷贝: 拷贝前后的两个数据互不影响.深拷贝不仅拷贝了指针,也将指针指向的内容进行了拷贝.相当于重新开辟了一个内存单元.后面拷贝过来的对象无论怎么改变,对之前的对象没有影响.

浅拷贝: 顾名思义与深拷贝相反,浅拷贝拷贝的是地址也就是指针,但是没有拷贝内容,由于地址指向的是同一个内存单元,无论是原先的对象还是新拷贝过来的对象,只要修改了值也就是共同指向的那个内存单元值改变了,另外一个对象也会相应的发生改变.

对象浅拷贝方法:
1. 通过Object.assign(目标对象,源对象)返回目标对象,如果目标对象与源对象都有值,如果两个对象有相同的key值,那么目标对象会被覆盖,并且这个方法拷贝的是可枚举的属性值.

    let obj1 = {a:1,b:2}
    let obj2 = {b:2,c:3}
    let obj = Object.assign(obj1,obj2)
    console.log(obj,obj1,obj2)
    // {a:1,b:2,c:3} ,{a:1,b:2,c:3},{b:2,c:3}

对象深拷贝方法:
1. Lodash原生库,里面提供了很多方法,其中cloneDeep就能实现深拷贝.
2. 通过JSON.stringify(对象)这个方法,先将对象转化成字符串,然后再通过JSON.parse()将这个字符串转化成对象或者数组.

    let obj1 = { a: 0 , b: { c: 1,d: {e:2}}}; 
    let obj2 = JSON.parse(JSON.stringify(obj1))
    obj2.b.d.e = 5;
    console.log(obj1,obj2)
    //{ a: 0 , b: { c: 1,d: {e:2}}},
    //{ a: 0 , b: { c: 1,d: {e:5}}}
    //这样可以简单的实现了深复制,复制过来的对象相互间没有影响,但是有一种情况下这种方法无法实现深复制,如对象中存在函数是无法将函数复制过来的

    let obj1 = {a:0,b:function(){
        console.log(this)
    }}
    let onj2 = JSON.parse(JSON.stringify(obj1))
    console.log(obj1,obj2)
    // {a:0,b:f},{a:0}
    }}

lodash在前端框架中的使用,例如vue

    1.安装lodash
        npm i lodash -D
    2.lodash/function 这种格式，单独引入某个函数

<template>
  <div class="home">
      深复制loadsh测试
      <ul>
        <li>{{obj1.a}}</li>
        <li>{{obj1.b.c.d}}</li>
      </ul>
      <button @click="response()">再说一遍</button>
      <ul v-if="obj2 !== null">
        <li>{{obj2.a}}</li>
        <li>{{obj2.b.c.d}}</li>
      </ul>
      <div v-else>好的</div>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep"
export default {
  name: 'Home',
  data(){
    return {
      obj1:{
        a:'头顶一片天',
        b:{
          c:{
            d:'脚踏一块地',
            e:function data(){
              alert("测试")
            }
          }
        }
      },
      obj2:null
    }
  },
  methods:{
    response(){
      this.obj2 = cloneDeep(this.obj1)
      this.obj2.b.c.e()
    }
  }
}
</script>