zoukankan      html  css  js  c++  java
  • js实现数组、对象深度克隆的两种办法

    1.深度克隆的原理

    JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系。

    实现深度克隆的原理得从对象是一种引用类型说起

    众所周知,对象是一种引用类型,对象的地址指针存放于栈中,而对象实际的数据存放于堆中。

    因此当我们简单地执行复制操作时,实际是把地址指针进行了复制操作,因此在对象的实际数据改变之后,新老对象都会受到影响。

    那么如何让他不受到影响呢?

    答案是利用基本数据类型的特点,基本类型在执行复制操作后,新老数值之间不会互相产生影响

    所以,我们要对对象不断进行分解,直到其是基本数据类型之后,再进行复制操作。

    2.实现方法

    2.1 硬刚法(迭代法,适用于所有)

    // 方法一 利用迭代
    // 思路是:判定要克隆的对象是不是引用类型,如果是引用类型,则继续迭代,如果该项是基本类型,则直接复制。
    function deepClone(obj){
        let newObj=Array.isArray(obj)?[]:{}
    
        if(obj&&typeof obj ==="object"){
            for(let key in obj){
                if(obj.hasOwnProperty(key)){
                    newObj[key]=(obj && typeof obj[key]==='object')?deepClone(obj[key]):obj[key];
                }
            }
        }
        return newObj
    }
    
    let a=[{c:1},2,3,4],
    b=deepClone(a);
    a[0]={c:2};
    console.log(a,b);
    
    

    2.2 投机取巧法(Json方法,适用于部分)

    
    //方法2  利用JSON对象的方法
    //主要是利用JSON.stringify和JSON.parse,这种办法只能实现纯数据的克隆,如果存在function则会直接忽略,不会进行复制操作
    
    function deepClone2(obj){
        return JSON.parse(JSON.stringify(obj))
    }
    
    let a1={a: 1, b: function() {}}
    b1=deepClone2(a1);
    console.log(a1,b1);
    
    
  • 相关阅读:
    由于客观原因,暂时学习php两天,然后继续学习.net
    【任务】html编辑器在vs2003下实现
    one bug og webMatrix when create a new file
    数据统一接口?
    安全3S
    一个订单管理页面
    【总结】浪费3个月向.net继续前进
    关于在asp.net中类的继承问题
    【心得】create a data table in webMatrix is very easy!
    Java与.NET谁是未来
  • 原文地址:https://www.cnblogs.com/60late/p/9626336.html
Copyright © 2011-2022 走看看