淺層複製及深層複製


Posted by hoyi-23 on 2021-08-12

之前有介紹到 Call by Value 、Reference & Sharing,傳參考時,會遇到的問題就是修改時會互相影響。
想要避免讓它互相影響,我們就要來了解一下淺層複製深層複製

範例物件:

var family={
    name: 'Bob',
    members:{
        mom: 'Betty',
        dad: 'Sean'
    }
}

淺層複製

方法: for inJQuery.extendES6寫法
只能複製最外層,內層還是會以傳參考的方式(所以會互相影響)

for in

先定義一個新物件:

var newFamily={};
for (var key in family){
    newFamily[key] = family[key]
}

試著修改外層:

newFamily.name='Andy';
console.log(family, newFamily)

試著修改內層:

newFamily.member.mom='Keira';
console.log(family, newFamily)

內層還是會一起更改,這就是淺層複製。

JQuery.extend

JQuery.extend 是用來將多個物件合起來,並放到第一個物件:
$.extend(dest,src1,src2,src3...)將src合併,放到dest

var newResult = $.extend({},{name:'Tom',age: 20 },{name: 'Ted',sex: 'male'} )
console.log(newResult)//{name: 'Ted',age: 20, sex: 'male'}

以 後面 蓋 前面 的方式合併

Object.assign() (ES6寫法)

用來複製一個或多個物件自身所有可數的屬性到另一個目標物件。回傳的值為該目標物件。
語法: Object.assign(target, ...sources)

var newFamily = object.assign({},family)

深層複製

方法:將物件轉為字串,再轉回物件

var newFamily = JSON.parsse(JSON.stringify(family));

可以測試看看,會發現內層也可以以傳值的方式被路複製了! 主要是因為它一開始就先轉為字串,以傳值的方式複製。


#淺層複製 #深層複製







Related Posts

[第六週] HTML 常用標籤 (下)

[第六週] HTML 常用標籤 (下)

把問題條列化 - 自主練習

把問題條列化 - 自主練習

[ 筆記 ] API 文件 範例

[ 筆記 ] API 文件 範例


Comments