1. 程式人生 > >js中的深淺拷貝理解

js中的深淺拷貝理解

淺拷貝,通俗理解就是拷貝一層,例如{a:1,b:{c:1,d:2}},那麼拷貝的是a,b指向的記憶體的位置;由於b指向的是一個物件的引用,那麼,我對原來物件中的c屬性進行修改,也會影響到新物件屬性的值;但是修改原來物件中a的值,就不會影響後新物件a的值;

那麼如何實現淺拷貝呢?

  function simpleClone(obj,newObj) {
            if(typeof obj!=="object"){
                return ;
            }
            for(let prop in obj){
                // 如果傳入的物件有該屬性並且不是繼承的
                if(obj.hasOwnProperty(prop))
                {
                    newObj[prop] = obj[prop];
                }                
            }
            return newObj;
        }

那麼如何實現深拷貝呢?

 let arr = {a:1,b:2,c:3,d:4,e:{ad:1,ac:2},f:[1,2]};
function deepClone(obj,newObj={}) {
           for(let prop in obj){
               if(obj.hasOwnProperty(prop)){
                   // 判斷遍歷出來的object[prop]是否是object型別,並且不為空
                   if(typeof obj[prop]==="object" && obj[prop]!==null){
                       console.log(obj[prop].constructor.name);
                       newObj[prop] = obj[prop].constructor.name === "Array"? []:{};
                       deepClone(obj[prop],newObj[prop])
                   }else{
                       newObj[prop] = obj[prop];
                   }
               }
           }
           return newObj
        }
            let arr3 = deepClone(arr);
            console.log(arr3 === arr);
            arr.e.ad = 99;
            console.log(arr3.e.ad)//=>1;

其實還有簡便的方法:

淺拷貝:Object.assign(obj,obj1,obj2)

深拷貝:JSON.parse(JSON.stringfy(obj)),方便又快捷,只是遇到事件時比較難處理;

先學難的再學簡單的,提高自己的程式碼能力!