iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
2
Modern Web

實作經典 JavaScript 30系列 第 20

Day20: JS中引用與複製的差異(二)

今天針對物件來看引用與複製的差異
先創造一個簡單的物件

const person = {
  name: 'Wes Bos',
  age: 80
};

再製作一個新變數captain,讓 captain = person

const captain = person
captain.number = 99
console.log(captain,person)

結果發現

person = {
  name: 'Wes Bos',
  age: 80,
  number: 99
}

captain = {
  name: 'Wes Bos',
  age: 80,
  number: 99
}

所以這樣是直接引用而不是複製
那麼物件要怎麼樣才能真正的複製呢?
這邊提供兩種方法
1.Object.assign()

const cap = Object.assign({}, person, { number: 99, age: 12 });
console.log(person,cap)

2.JSON.parse

const cap2 = JSON.parse(JSON.stringify(person))
cap2.number = 555
console.log(person,cap2)

重新複製新的物件後,再針對新物件改動,
就不會影響到原始的物件內容。
強烈建議可以看Alex老師的影片,
裡面有講到更深的東西,也釐清許多觀念。

今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day19: JS中引用與複製的差異(一)
下一篇
Day21: LocalStorage(ㄧ)
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言