javascript浅拷贝和深拷贝

javascript浅拷贝和深拷贝

在javascript中存在对象拷贝的问题，今天总结一下浅拷贝和深拷贝

一、浅拷贝

就是拷贝的比较浅，这是将一些基本属性拷贝过去，但是如果存在属性中的值是对象，则不会进行拷贝其中的中，只是将其地址拷贝过来。

<script>
let obj = {
      
      id:20,
      name:"dmc",
      msg:{
      
        age:19,
      }
    }
    let o = {
      };
    for(let k in obj){
      
      o[k] = obj[k];
    }
    o.msg.age = 11;
    console.log(o);
    console.log(obj);
script>

就是因为传入的是对象的地址，所以当其中的一个值改变的时候，拷贝的对象中的值也改变了。

语法糖Object.assign(拷贝给谁,被拷贝的对象)

<script>
 let obj = {
      
      id:20,
      name:"dmc",
      msg:{
      
        age:19,
      }
    }
    let o = {
      };
 Object.assign(o,obj);
console.log(o);
script>

Object.assign()也可以进行浅拷贝，其语法更为简单。

二、深拷贝

深拷贝只能利用递归来实现。

<script>
let obj = {
      
        id:1,
        name:"dmc",
        msg:{
      
          sex:"女",
          address:"安徽省淮北市"
        },
        color:["red",'green','yellow'],
      }
      let o = {
      };
      function deepCopy(newObj,oldObj){
      
        for(let k in oldObj){
      
          let 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(o,obj)
      console.log(o);
      obj.color = ["blue"];
      console.log(o);


script>

解析：这里使用递归来进行深拷贝，首先应该先判断是否是数组，因为数组也是对象，当先判断是否是对象的时候，数组就会被筛选，不会再往下进行。
2021年1月9日总结。