9.浅拷贝和深拷贝

浅拷贝==》既传值，也传地址值

var arr=[1,2,3];
var sum=arr;
console.log(sum);//[1,2,3]
sum.push(4);
console.log(arr);//[1,2,3,4]

实现浅拷贝

//实现浅拷贝 传的是数组里面对象的地址值和值，
var arr=[{name:"cheng"},{name:"li"},{name:"ming"}]
var res=[...arr]
res[0].name="huang"  
res.push({name:"vue"})//push的是外面的，所以不影响内部的对象层
console.log(arr);

深拷贝==》只传值

 /* 数组里面每一项是基本数据类型的一个深拷贝 */
        var arr=[1,2,3];
        var sum=[...arr];
        console.log(sum);//[1,2,3]
        arr.push(4);
        console.log(sum);//[1,2,3]
        var arr=[1,2,3];
        var sum=[].concat(arr);
        console.log(sum);//[1,2,3]
        arr.push(4);
        console.log(sum);//[1,2,3]
        var arr=[1,2,3];
        var sum=arr.slice(0);
        console.log(sum);//[1,2,3]
        arr.push(4);
        console.log(sum);//[1,2,3]

实现深拷贝
A.如果对象中的属性是简单数据类型
1.{…obj} 2.Object.assign（）

var obj = { name: "cheng", age: 18 };
var a = { ...arr };
var a = Object.assign({}, obj);
obj.id = 1001;
console.log(a);

B.如果是复杂数据类型

//复杂类型实现深拷贝
var obj = { name: { name: "ming" } };
function deepClone(obj) {
  let result;
  //1.能够识别数组还是对象
  if (obj instanceof Array || obj instanceof Object) {
    //2.对拷贝的初始值的设定
    if (obj instanceof Array) {
      result = []
    } else if (obj instanceof Object) {
      result = {}
    }
    //3.需要将obj克隆到result中
    for (let key in obj) {
      result[key] = deepClone(obj[key])
    }
    return result;
  }
  else {
    return obj
  }
}
var res = deepClone(obj);
console.log(res);

vue中的深拷贝

<div id="app">
  <!-- 添加功能 -->
  name:<input type="text" v-model="newItem.name">
    id:<input type="text" v-model="newItem.id">
      <button @click="doAdd">添加</button>
<div v-for="item of arr">
  {{item.name}}
    </div>
</div>
<script>
      new Vue({
      el: "#app",
      data: {
        newItem: {
          name: "",
          id: ""
        },
        arr: [
          { name: "vue", id: 1001 },
          { name: "css", id: 1002 },
          { name: "js", id: 1003 }
        ],
      },
      methods: {
        doAdd() {
          var res={...this.newItem}
          this.arr.push(res)
        }
      }
    })
</script>