---
# System prepended metadata

title: "\U0001F3C5 Day 11 - 物件參考"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 11 - 物件參考

### 物件參考觀念（關鍵字：JS 深拷貝、淺拷貝差異）

題目
---
(1) 
1-1. 請問以下的輸出結果為何？
1-2. 如果希望 `console.log(obj === objNew);` 的結果為 false，則可以如何修改？

```js=
let obj = {
    title: '錢錢',
    amounts: 66666,
}
let objNew = obj;
objNew.amounts = 123;
console.log(obj.amounts); // 輸出結果為何？
console.log(obj === objNew); // 輸出結果為 true 還是 false？
```

(2)（陷阱題！，需要用深拷貝處理）
2-1. 請問以下的輸出結果為何？
2-2. 如果希望調整 `objNew.innerObj` 時不會影響到 obj，則可以如何修改？

```js=
let obj = {
    title: '錢錢',
    amounts: 66666,
    innerObj: {
    	title: '私房錢',
      amounts: 1000
    }
}
let objNew = {...obj};
console.log(obj === objNew); // 輸出結果為 true 還是 false？
objNew.innerObj.amounts = 2000;
console.log(obj.innerObj.amounts); // 輸出結果為何？
```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

(1)
1-1. 
console.log(obj.amounts) // 123
console.log(obj === objNew) // true

1-2.
// 淺拷貝
可以將 let objNew = obj; 修改為 
a. let objNew = {...obj}; 
b. let objNew = Object.assign({}, obj); 

// 深拷貝
let objNew = JSON.parse(JSON.stringify(obj)); 

(2)
2-1.
console.log(obj === objNew); // 結果為 false
objNew.innerObj.amounts = 2000;
console.log(obj.innerObj.amounts); // 結果為 2000

2-2.
// 深拷貝
可以將 let objNew = {...obj}; 修改為 
let objNew = JSON.parse(JSON.stringify(obj));

-->




回報區
---


|     Discord     |                                CodePen / 答案                                |
|:---------------:|:----------------------------------------------------------------------------:|
|    威0#6919     |      [codepen](https://codepen.io/n0918679182/pen/QWBjmKb?editors=0012)      |
|    冬天#5215    |              [codepen](https://codepen.io/winter_/pen/MWBaVjj)               |
|   Wendy3#5615   |              [codepen](https://codepen.io/wendy03/pen/bGjVvBb)               |
|    YC #2522     |                [CodePen](https://codepen.io/YCLu/pen/oNMjqYy)                |
|   albee#9121    |      [Codepen](https://codepen.io/albee-chang/pen/abjvYmL?editors=1111)      |
|     popeye      |             [codepen](https://codepen.io/popeye_ux/pen/WNKQzob)              |
|    薯餅#3581    |           [CodePen](https://codepen.io/ColdingPoTaTo/pen/NWBGYjP)            |
|       aki       |               [codepen](https://codepen.io/aki168/pen/NWBPdWr)               |
|   hannah#2224   |       [codepen](https://codepen.io/hangineer/pen/WNKQzOQ?editors=0011)       |
|    泊岸#3466    |      [codepen](https://codepen.io/qoq77416416/pen/oNMjqzd?editors=0011)      |
|    ㄚ翔#8126    |          [codepen](https://codepen.io/engineerjohnson/pen/KKBdoXM)           |
|    無名#6427    |              [codepen](https://codepen.io/Nomoney/pen/GRBpxMa)               |
|  AuroraC#6539   |        [codepen](https://codepen.io/AuroraC/pen/bGjVvoN?editors=1012)        |
|  DIO大人#4776   |             [codepen](https://codepen.io/oscar-2283/pen/KKBdoZg)             |
|   魚子醬#5220   |              [codepen](https://codepen.io/haihsuan/pen/jOpbzKM)              |
|  Jill Lee#0809  |            [codePen](https://codepen.io/chi-ling-lee/pen/dyjYmqw)            |
|  LinaChen#1796  |              [codePen](https://codepen.io/LinaChen/pen/zYLvWRp)              |
|   JackC#0411    |              [codepen](https://codepen.io/key0329/pen/JjBYLea)               |
|    大頭#8116    |       [codepen](https://codepen.io/d22495521/pen/mdjexzN?editors=0012)       |
|    Rena#6249    |            [Codepen](https://codepen.io/aureate0116/pen/YzjyaOg)             |
|    Chi#7605     |              [Codepen](https://codepen.io/YoChi84/pen/oNMjqPQ)               |
|   RaunJ#3480    |       [Codepen](https://codepen.io/RainJCode/pen/YzjyaMb?editors=1011)       |
|   RyanC#6960    |        [Codepen](https://codepen.io/RyanYD/pen/BaPorEj?editors=0011)         |
|    Alex#9978    | [Codepen](https://codepen.io/datsxzqg-the-selector/pen/abjvGoR?editors=0011) |
|    圈圈#4060    |         [Codepen](https://codepen.io/wjejfczn-the-bold/pen/poZjLKR)          |
|     JY#5712     |              [CodePen](https://codepen.io/judy_123/pen/rNrOdXd)              |
|   Benson#6763   |              [CodePen](https://codepen.io/kumashow/pen/oNMjGzB)              |
|  Asher Xu#9297  |             [CodePen](https://codepen.io/kirakira72/pen/BaPorgK)             |
| PeihanWang#2530 |      [CodePen](https://codepen.io/PeihanWang/pen/PoBPewZ?editors=0012)       |
|    威爾#1694    |              [CodePen](https://codepen.io/WILL_Wu/pen/XWBmqmB)               |
|  mandylai#4055  |            [CodePen](https://codepen.io/mandy-lai-2/pen/MWBaGgr)             |
|  KC_8685#9343   |             [Codepen](https://codepen.io/cathy7411/pen/RwBWMdX)              |
|   Hilda#7085    |         [Codepen](https://codepen.io/vwquikad-the-vuer/pen/VwBvxLo)          |
| LHchien33#6232  |             [Codepen](https://codepen.io/lin_chien/pen/mdjeLeJ)              |
|    Kimi#9564    |              [CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)              |
| christina#6185  |             [Codepen](https://codepen.io/chrisc0210/pen/RwBWyKW)             |
|    Wei#2330     |     [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/YzjyLNP)      |
|    int#7518     |       [Codepen](https://codepen.io/intHuang/pen/mdjeLEe?editors=0011)        |
|  Wendy77#8049   |              [Codepen](https://codepen.io/Wendy__/pen/OJwyZvm)               |
|    yuyu#6310    |       [Codepen](https://codepen.io/yuyu0905/pen/NWBGMBX?editors=0012)        |
|    Tami#6742    |         [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/rNrOvZP)          |
|   Cheryl#4007   |      [Codepen](https://codepen.io/Cheryl-Hsu/pen/vYaNrYx?editors=0010)       |
|   小木馬#8760   |              [Codepen](https://codepen.io/wmmtbcsd/pen/xxJwzZw)              |
| jimmyFang#9575  |       [Codepen](https://codepen.io/pohxiqqo/pen/JjBYZXG?editors=0011)        |
| Ron Liang#7277  |               [Codepen](https://codepen.io/ron-go/pen/LYBprpZ)               |
|    阿榮#8277    |        [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/XWBmYWv)        |
|   心幻羽#0056   |      [CodePen](https://codepen.io/linglingsyu/pen/ZEjbRpd?editors=1112)      |
|   黑白兔#0684   |             [CodePen](https://codepen.io/johnny329/pen/dyjYKON)              |
|     PH#2731     |       [CodePen](https://codepen.io/lokf9527/pen/YzjyvLE?editors=0012)        |
| Potatolee#7749  |      [CodePen](https://codepen.io/potatoleee/pen/abjvKGm?editors=1011)       |
|   Winnie#1306   |    [Codepen](https://codepen.io/WinnieWuWinnie/pen/xxJwzMq?editors=0012)     |
|    柚子#3958    |       [Codepen](https://codepen.io/as6625998/pen/ExpVRBW?editors=0011)       |
| masterYan#2480  |  [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/NWBGzZZ?editors=0011)  |
|    米米#1824    |     [CodePen](https://codepen.io/Jameshsu0407/pen/rNrOKXM?editors=0011)      |
|   粉蒸肉#6214   |               [codepen](https://codepen.io/pen/?editors=0011)                |
|   楊苡安#2752   |              [hackmd](https://hackmd.io/6LkN1kRWTNmdW-ZVWK_Fzw)              |
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/GRBpBRw?editors=0011)|
|小夜#3809|[CodePen](https://codepen.io/Naito_K/pen/NWBGzdO?editors=0011)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/mdjejmv?editors=1011)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/bGjVjoN)|
|RainLiao#2616|[Codepen](https://codepen.io/billpop741/pen/eYjprZK)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/gOjajKV?editors=1011)|
|CatBoxy#4207|[Codepen](https://codepen.io/nekoboxy/pen/dyjYeyE)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/xxJwJoy)|
|How#5806|[CodePen](https://codepen.io/howtobefine/pen/jOpbvbw?editors=1010)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/vYaNzeN?editors=1010)
|ChloeLo#4858|[CodePen](https://codepen.io/chloelo/pen/ExpVeRJ)|
|Ruby Chen#7452|[Codepen](https://codepen.io/ruby92429/pen/ExpVRLy?editors=1010)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/rNrOqpV?editors=1111)|
|shiuan#4721|[CodePen](https://codepen.io/prankaChang/pen/BaPoGPy?editors=0011)|
|yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/PoBPxBY?editors=0011)|
|Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/dyjYQQw?editors=0011)|
|Bella_#1587|[CodePen](https://codepen.io/Chen-Bella/pen/NWBGeWb)|
|老皮博士#8050|[CodePen](https://codepen.io/li0406/pen/RwBWEZW?editors=1111)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/bGjVOrW?editors=0011)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/OJwyaOK)|
| xin#1214 |[CodePen](https://codepen.io/SiaoYao/pen/gOjaqOx)|
|Fannie#7800|[Codepen](https://codepen.io/dgltu/pen/JjBYxXG?editors=1011)|
|Austyn#0949|[Codepen](https://codepen.io/fish90547/pen/VwBvgQz?editors=0012)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/MWBaLZY?editors=1011)|
Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/vYaNbqj?editors=1010)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/abjdoyd)
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/BaPjBZx?editors=1011)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/rNrOdzw)|
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/xxJZKBg?editors=1012)|
|艸良#2846|[Codepen](https://codepen.io/momoninainai/pen/WNKrNoN?editors=0010)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/wvxMBgo?editors=0010)|
|Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/rNrxaMK?editors=0010)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/ZEjQbLp)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/zYEmOqZ)                   |
| Sean#3825 | [Codepen](https://codepen.io/sean_1215/pen/NWBxKgL?editors=1111)                   |
|yoyo#1003| [Codepen](https://codepen.io/pen/bGjEEgg)|
|阿鑫#4346| [CodePen](https://codepen.io/Neil1024/pen/BaPjjMZ?editors=0011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/JjBYLNL) |
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/gOjPbew)|
|kevin #6131|[CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/mdjVEGg?editors=1010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/MWBKjKO)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/WNKrZXa?editors=0012)| 
|阿沁#8176|[CodePen](https://codepen.io/a8322342/pen/GRBoORB?editors=0012)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/zYLrPqo?editors=0010)|
|helena#8461|[CodePen](https://codepen.io/helena27/pen/GRBoyqR?editors=1012)|
|AkiHico#9239|[Codepen](https://codepen.io/akihico/pen/MWBKrPX?editors=0010)|
|     Eileen#6454     |[ Codepen ](https://codepen.io/Eileen-io/pen/dyjGevE)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/abjdjeY?editors=1111)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/dyjGqmx?editors=0011)|
|Silvialu#4521|[CodePen](https://codepen.io/Silvia091640/pen/mdjexRv)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/jOpWQxb?editors=1111)|
|sherlin#4587|[CodePen](https://codepen.io/sherlinKuo/pen/OJwMddE?editors=1111)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/eYjJXbW)|
|王老三#9340|[CodePen](https://codepen.io/flynk/pen/OJwMKGW?editors=0011)|
|Paul#7426|[Codepen](https://codepen.io/paul-1997/pen/xxJVZvN?editors=0011)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/qByZNJx?editors=1111)|
|enolachen#8031|[Codepen](https://codepen.io/Chen-Enola/pen/rNrxodr)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/MWBewXZ)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/mdjEJLR?editors=1011)|
|你看我像是會玩嗎#1866|[codepen](https://codepen.io/hasagg/pen/JjBKWWL)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/OJwRjYJ)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[codepen](https://codepen.io/sho666/pen/OJwRPKV?editors=1111)|
|Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/MWBeoMK?editors=1111)|
|Cream#3449 |[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/JjBKmeP?editors=1011)|
|YI#0863 |[Codepen](https://codepen.io/YI0305/pen/ExpNXjM?editors=0012)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/MWBbBYX?editors=0010)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/jOpyrJv?editors=1010)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/oNMBozK?editors=1112)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/mdjRjqE?editors=0010) |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/xxJqKpY?editors=0011)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/rNryWbY)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/abjJWKE)|
|   YU#0618   | [Codepen](https://codepen.io/yoken_/pen/YzjQpzZ)        |
|  Cookie SSS#6991   | [Codepen](https://codepen.io/sqhjikpa-the-selector/pen/jOpGGNY)        |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/vYaRGdw?editors=0010)|
|周周#3503|[codepen](https://codepen.io/jhoujhou-the-decoder/pen/XWBYOGM?editors=0012)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/LYBXYKd?editors=0011)|
|  cbs#9007  |[Codepen](https://codepen.io/wasdjk/pen/GRXEyvd)|
|  Eason#7884  |[Codepen](https://codepen.io/ASLEO/pen/gOdVmez)|