JS-ディープコピー

序文:

単純なデータ型はスタックスペースに格納され、値が格納されます。
複雑なデータ型の場合は、ヒープスペースに格納され、参照がスタックに格納されます。浅いコピーと深いコピーの違いにつながるのは、この保存方法の違いです。

浅いコピー:
属性が基本型の場合、基本型の値がコピーされます。属性が参照型の場合、コピーはメモリアドレスであるため、新しくコピーされたオブジェクトを変更すると、元のオブジェクトに影響します。
ディープコピー:
メモリからのオブジェクトの完全なコピー。ヒープメモリから新しい領域が開かれ、新しいオブジェクトが格納されます。新しいオブジェクトを変更しても、元のオブジェクトには影響しません。

ディープコピーを実現するために一般的に使用される方法
数组.concat()は、最初のレイヤーのディープコピーしか実現できず、ディープレイヤーは実現できません。
Object.assign()上記と同様に、
JSON.parse(JSON.stringify())オブジェクト、配列、文​​字列、数値、true、false、およびnullデータのみをサポートします。関数、未定義、日付、RegExpなどのデータ型などの他のものはサポートされていません。サポートされていないデータの場合、この属性は直接無視されます。

オブジェクトまたは配列のディープコピーを再帰的に実装する

var My={
    
    
    name:'123',
    age:22,
    hobby:['吃饭','睡觉','打游戏'],
    study:{
    
    
        js:{
    
    
            vue:'双向数据绑定',
            react:'组件化开发'
        },
        html:{
    
    
            h5:{
    
    div:'语义化标签',input:'增强型表单'}
        }
    }
}
let My2=My      //浅拷贝,复制的是地址
// My2.age=10   
// console.log(My);
// console.log(My2);

function deepClone(obj){
    
    
    //传入初始参数
    //如果不是对象或数组就返回,是null空对象也返回
    if((typeof obj)!='object'||obj==null){
    
      
        return obj
    }
    //初始化返回结果
    let result;
    //判断是不是数组
    if(obj instanceof Array){
    
    
        result=[]
    }else if(obj instanceof Object){
    
    
        result={
    
    }
    }
    
    for (let key in obj){
    
       //for in 遍历对象,遍历的是key
        //判断key不是原型上的属性 hasOwnProperty方法 如果属性在原型上会返回false
        if(obj.hasOwnProperty(key)){
    
    
            //递归函数 使用循环把每个参数传入然后重复调用 循环完毕函数执行完毕
            result[key]=deepClone(obj[key])
        }
    }

    //返回结果
    return result;

}
// console.log(deepClone(My));
//深拷贝 在内存中开辟了新的空间,复制的对象地址指向新的地址
My2=deepClone(My)
My2.age=12
console.log(My);
console.log(My2);

関数コピー

function deepClone(target){
    
    
  if(target instanceof Object){
    
    
      let dist ;
      if(target instanceof Array){
    
    
        dist = []
      }else if(target instanceof Function){
    
    
        dist = function(){
    
    
            // 在函数中去执行原来的函数,确保返回的值相同
            return target.call(this, ...arguments);
        }
      }else{
    
    
        dist = {
    
    };
      }
      for(let key in target){
    
    
          dist[key] = deepClone(target[key]);
      }
      return dist;
  }else{
    
    
      return target;
  }
}

通常のコピー


function deepClone(target){
    
    
  if(target instanceof Object){
    
    
      let dist ;
      if(target instanceof Array){
    
    
        // 拷贝数组
        dist = [];
      }else if(target instanceof Function){
    
    
        // 拷贝函数
        dist = function () {
    
    
          return target.call(this, ...arguments);
        };
      }else if(target instanceof RegExp){
    
    
        // 拷贝正则表达式
       dist = new RegExp(target.source,target.flags);
      }else{
    
    
        // 拷贝普通对象
        dist = {
    
    };
      }
      for(let key in target){
    
    
          dist[key] = deepClone(target[key]);
      }
      return dist;
  }else{
    
    
      return target;
  }
}

コピー日

作者:海因斯坦
链接:https://zhuanlan.zhihu.com/p/270332499
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

function deepClone(target){
    
    
  if(target instanceof Object){
    
    
      let dist ;
      if(target instanceof Array){
    
    
        // 拷贝数组
        dist = [];
      }else if(target instanceof Function){
    
    
        // 拷贝函数
        dist = function () {
    
    
          return target.call(this, ...arguments);
        };
      }else if(target instanceof RegExp){
    
    
        // 拷贝正则表达式
       dist = new RegExp(target.source,target.flags);
      }else if(target instanceof Date){
    
    
          dist = new Date(target);
      }else{
    
    
        // 拷贝普通对象
        dist = {
    
    };
      }
      for(let key in target){
    
    
          dist[key] = deepClone(target[key]);
      }
      return dist;
  }else{
    
    
      return target;
  }
}

最終機能

function deepClone(target,cache = new Map()){
    
    
  if(cache.get(target)){
    
    
      return cache.get(target)
  }
  if(target instanceof Object){
    
    
      let dist ;
      if(target instanceof Array){
    
    
        // 拷贝数组
        dist = [];
      }else if(target instanceof Function){
    
    
        // 拷贝函数
        dist = function () {
    
    
          return target.call(this, ...arguments);
        };
      }else if(target instanceof RegExp){
    
    
        // 拷贝正则表达式
       dist = new RegExp(target.source,target.flags);
      }else if(target instanceof Date){
    
    
          dist = new Date(target);
      }else{
    
    
        // 拷贝普通对象
        dist = {
    
    };
      }
      // 将属性和拷贝后的值作为一个map
      cache.set(target, dist);
      for(let key in target){
    
    
          // 过滤掉原型身上的属性
        if (target.hasOwnProperty(key)) {
    
    
            dist[key] = deepClone(target[key], cache);
        }
      }
      return dist;
  }else{
    
    
      return target;
  }
}

本文代码作者:海因斯坦
链接:https://zhuanlan.zhihu.com/p/270332499
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

おすすめ

転載: blog.csdn.net/weixin_51198863/article/details/111808667