浅谈对象的深拷贝和浅拷贝

浅谈对象的深拷贝和浅拷贝

一、为什么使用对象的拷贝？

1.在普通数据类型赋值

    let a=10
    let b=a
    a=20
    console.log(a)//a=20
    console.log(a)//b=10

因为普通数据类型的变量和数值存放在栈内存中可以直接改变a与b没有任何关联

2.在引用数据类型赋值

    let obj1={
      name:'小彭',
      age:20
    }
    let obj2=obj1
    obj1.name='小胡'
    console.log(obj1);//小胡
    console.log(obj2);//小胡

因为对象(引用)类型变量存放在栈内存，数值对象存放在堆内存，obj1和obj2都指向堆内存的对象值，所以改变其中一个数值，obj1和obj2都会改变

二、对象的浅拷贝(只能拷贝原始数据类型)

应用实例，在Vue表单添加对象到数组中

• 问题：push数组中的对象都指向同一个数值，修改一个就会改变所有

  <div id="app">
    <form @submit.prevent="insert">
      <input type="text" v-model="student.name">
      <input type="text" v-model="student.age">
      <button>添加</button>
    </form>
    <ul>
      <li v-for="item in list">
        姓名：{{item.name}}
        年龄：{{item.age}}
      </li>
    </ul>
  </div>
      new Vue({
      el:'#app',
      data(){
        return{
          student:{
            name:'',
            age:''
          },
          list:[]
        }
      },
      methods:{
        insert(){
          this.list.push(this.student)
        }
      }
    })

• 解决：使用对象的浅拷贝，相当于把生成一个对象的副本进行继续push不会指向同一个数值，问题得以解决

   //浅拷贝方法封装
    copy(obj){
        let newObj={}
        for(let i in obj){
          newObj[i]=obj[i]
        }
        return newObj
        },
        insert(){
          this.list.push(copy(this.student))
        }     

三、对象的深拷贝(可以拷贝引用数据类型)

应用实例，当对象中包含对象进行拷贝push数组中

• 问题：对象中原始数据类型会进行拷贝，对象类型不会进行拷贝

  <div id="app">
    <form @submit.prevent="insert">
      <input type="text" v-model="student.name">
      <input type="text" v-model="student.age">
      <input type="text" v-model="student.girlfriend.name">
      <button>添加</button>
    </form>
    <ul>
      <li v-for="item in list">
        姓名：{{item.name}}
        年龄：{{item.age}}
        女朋友：{{item.girlfriend.name}}
      </li>
    </ul>
  </div>
      new Vue({
      el:'#app',
      data(){
        return{
          student:{
            name:'',
            age:'',
            girlfriend:{
              name:''
            }
          },
          list:[]
        }
      },
      methods:{
        copy(obj){
        let newObj={}
        for(let i in obj){
            newObj[i]=obj[i]
        }
        return newObj
        }, 
        insert(){
          this.list.push(this.copy(this.student))
        }
      }
    })
    //结果是对象中的girlfriend对象不会拷贝

• 解决：使用递归对对象中的数据进行类型判断，如果是对象类型，进行递归继续拷贝

        copy(obj){
        let newObj={}
        for(let i in obj){
        //对数据类型判断
          if(obj[i] instanceof Object)
          {
            newObj[i]=this.copy(obj[i])
          }
          else{
            newObj[i]=obj[i]
          }
        }
        return newObj
        }, 
        insert(){
          this.list.push(this.copy(this.student))
        }

使用json实现深拷贝

通过对JSON的stringify和parse方法进行转换，实现拷贝效果

    function copy(obj){
      let str=JSON.stringify(obj)
      let newObj=JSON.parse(str)
      return newObj
    }