JS高级-浅拷贝和深拷贝

浅拷贝和深拷贝

浅拷贝

• 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用

Object.assign(target,…sources)

• ES6提供的浅拷贝语法糖

<script>
      var obj = {
        id: 1,
        name: 'Tom',
        msg: {
          age: 18
        }
      }
      var ob = {}
      //浅拷贝  ob对象中对象应用是简单的地址拷贝，ob对象或obj对象对引用对象修改，都能导致两个对象发生改变
      for(var k in obj){
        ob[k] = obj[k]
      }
      console.log(ob)// ....  msg:{age:20}
      ob.msg.age = 20;
      console.log(obj)// ....  msg:{age:20}
      //ES6  提供了浅拷贝的语法糖  Object.assign(target,...source)
      Object.assign(ob,obj)
    </script>

深拷贝

• 深拷贝拷贝多层，每一级别的数据都会拷贝

<script>
      var obj = {
        id: 1,
        name: 'Tom',
        msg: {
          message: '错误'
        },
        color: ['pink','aqua']
      }
      var ob = {}
      function deepCopy(newObj,oldObj){
        for(var k in oldObj){
          //判断属性值属于那种数据类型
          var item = oldObj[k]
          //判断是否是数组
          if(item instanceof Array){
            newObj[k] = []
            deepCopy(newObj[k],item)
            //判断是否是对象
          }else if(item instanceof Object){
            newObj[k] = {}
            deepCopy(newObj[k],item)
          }else{
            newObj[k] = item
          }
        }
      }
      deepCopy(ob,obj)
      console.log(ob);
      ob.color.push('red')
      console.log(obj)
    </script>