iT邦幫忙

2021 iThome 鐵人賽

DAY 20
1
自我挑戰組

JavaScript 核心觀念系列 第 20

【Day20】淺層複製及深層複製

在 JavaScript 中,物件型別是利用傳參考的方式來傳遞它的值,

因此當我們要複製出獨立的物件型別時,

就必須使用淺層複製深層複製的方式來複製它的值

淺層複製(Shallow Copy)

當我們用淺層複製來複製物件時,只能複製第一層的物件內容,

第二層之後的物件內容還是會以傳參考的方式來傳遞,

這稱為淺層複製(Shallow Copy),

我們使用範例來看淺層複製(Shallow Copy)的方法有哪些:

1. for ... in

使用 for ... in 將值傳入新物件中

const family = {
    name: '小明家',
    members: {
      dad: 'dad',
      mom: 'mom',
      son: '小明',
    },
};

const newFamily = {};

for (let key in family) {
    // key 為 family 的屬性
    // family[key] 為該屬性的值
    newFamily[key] = family[key];
};

newFamily.name = '威威家';

console.log(family);
console.log(newFamily);

console.log(newFamily === family);  // false

由結果可以看出在 newFamilyname 修改後,原物件 family 資料不變,

而且兩個物件的記憶體位址也不同,

但是如果修改第二層的物件資料時

newFamily.members.son = 'weiwei';
console.log(family);
console.log(newFamily);

此時會連同 family 內的資料一併修改,

這就是所謂的淺層複製(Shallow Copy),

以下列出淺層複製(Shallow Copy)的另外兩種方法

2. Object.assign()

() 前面放空物件,後面放需要複製的物件型別內容

const newFamily2 = Object.assign({}, family);

3. 展開語法(...)

在物件實字 {} 內輸入 ... 後放入需要複製的物件型別內容

const newFamily3 = {...family};

深層複製(Deep Copy)

完全複製物件型別內容,稱為深層複製(Deep Copy)

範例:

我們會使用 JSON.stringify() 將物件轉換成 JSON 格式,

再使用 JSON.parse() 將 JSON 格式轉成物件

const family = {
    name: '小明家',
    members: {
      dad: 'dad',
      mom: 'mom',
      son: '小明',
    },
};

const newFamily = JSON.parse(JSON.stringify(family));

newFamily.members.son = 'weiwei';

console.log(family);
console.log(newFamily);

此時可以看見就算修改第二層的物件內容 family 內的資料也不會被修改,

這兩個物件內容已經完全儲存在不同記憶體位址,

而這就是所謂的深層複製(Deep Copy)

以上是今天的內容,感謝觀看!!


上一篇
【Day19】傳值和傳址(傳參考)
下一篇
【Day21】什麼是函式?
系列文
JavaScript 核心觀念30

尚未有邦友留言

立即登入留言