Web前端必做笔记之一：对象拷贝(二) 浅拷贝

Web前端必做笔记之一：对象拷贝(二) 浅拷贝

<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>

script>
new Vue({
  el: '#app',
  data: {
      student:{
            name:'',
            age:''
      },
      list:[]
  },
  methods:{
          insert(){

                console.log('hello world');
                this.list.push(this.student);

              }

         }
  })
</script>

首先我在输入框中写入小明和他的年龄，然后点添加，就可以看到添加成功了，我再添加三个，可以无限添加的，这是没有问题的，现在呢我把这个小明改成’小红’,然后我们会看到下面所有的小明都变成了小红，那为啥都变成了小红呢？

我们建立了一个数组叫做list[],我们往里面添加了东西，添加的student这个对象，我们往里面添加的都是这个student对象，而对象是存储在堆内存中，
他们都指向相同的一个对象，都是小明，这就是我们为啥改一个都变，
如何解决这个问题，我们可以给这个student做个克隆，或者说是拷贝完成之后，让这些对象不是一个对象

<script>
     
       //拷贝一个对象：让两个变量指向两个对象
       //如何拷贝

       let  obj = {
              name:"小明",
              age:2
       }
       
       let  newObj = {};
       for(let i in obj){
              console.log(obj[i]); //小明，2

              newObj[i] = obj[i]; //这样就实现了一个拷贝
       }
       obj.name ="小红"; //把这个obj的姓名改成小红，看看是否拷贝了两个，拷贝成功就是一个小红一个小明
       console.log(obj); //小红
       console.log(newObj); //小明
</script>

        //封装一个函数
       function copy(obj){  //拷贝我穿进来的obj
            
            let  newObj = {};
            for(let i in obj){
                  console.log(obj[i]);

                  newObj[i] = obj[i]; //这样就实现了一个拷贝
            }
           return  newObj;
       }  //这样就实现了一个对象的拷贝

       let newObject = copy(obj);
       console.log(obj); //小红
       console.log(newObject); //小明

<script>
//让vue中有个拷贝的函数
new Vue({
  el: '#app',
  data: {
      student:{
            name:'',
            age:''
      },
      list:[]
  },
  methods:{
          insert(){

                console.log('hello world');
            //     this.list.push(this.student);
                this.list.push(
                      this.copy(this.student)); //这样传的就是个student的副本
          },
          copy(obj){  //拷贝的方法
            let  newObj = {};
            for(let i in obj){
                  console.log(obj[i]);

                  newObj[i] = obj[i];
            }
           return  newObj;
       }
  }
})
</script>