浅拷贝和深拷贝的几种实现

97 阅读1分钟

浅拷贝

ES6-API

      //ES6-api
      var obj = {
        name: "test",
        age: 50,
        say: function () {
          console.log(123);
        },
      };
      var newobj = Object.assign({}, obj);
      console.log(newobj);

函数封装

      function shallowCopy(obj) {
        let newobj = {};
        for (const key in obj) {
          if (!obj.hasOwnProperty(key)) {
            break;
          }
          newobj[key] = obj[key];
        }
        return newobj;
      }

各种库的方法实现

深拷贝

判断类型+递归

    function deepCopy(newobj,oldobj){
      for(let k in oldobj){
        let value = oldobj[k]
        if(value instanceof Array){
          newobj[k] = [];
          deepCopy(newobj[k],value)
        }else if(value instanceof Object){
          newobj[k] = {};
          deepCopy(newobj[k],value)
        }else{
          newobj[k] = value
        }
      }
    }

JSON

var newobj =JSON.parse(JSON.stringify(obj)) 
- 无法解决循环引用,会爆栈
- 无法处理null,undefind和函数的复制

MessageChannel

      function deepClone(obj) {
        return new Promise((resolve, reject) => {
          const { port1, port2 } = new MessageChannel();
          port1.onmessage = function(e){
            resolve(e.data)
          };
          port2.postMessage(obj);
        });
      }
      deepClone(obj).then(res=>{
        console.log(res);
      })

第三方库