js中的深淺拷貝理解
阿新 • • 發佈:2018-12-05
淺拷貝,通俗理解就是拷貝一層,例如{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)),方便又快捷,只是遇到事件時比較難處理;
先學難的再學簡單的,提高自己的程式碼能力!