---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 11
###### tags: `Vue 直播班 - 2022 春季班`

### 物件參考觀念 (關鍵字: JS 深拷貝、淺拷貝差異)

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

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，則可以如何修改?

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); // 輸出結果為何?

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
(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));
-->

回報區
---

| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/BawOOxO|
|2| Iris Huang | https://codepen.io/ythuang/pen/rNGZZbe |
|3| 肉鬆 | https://codepen.io/klrkicog/pen/LYzJJvj?editors=0011 |
|4| Larry | https://codepen.io/larrylinr5/pen/ZEXMMNQ?editors=1111 |
|5| Laura |https://codepen.io/minminn/pen/bGoxxyJ|
|6| Wenfish | https://codepen.io/wenfisht/pen/gOGddNB |
|7| kevin嘉軒 | https://codepen.io/kevin-chang-the-sasster/pen/ZEXMqYW |
|8| 祥last | https://codepen.io/jack206418070/pen/BawOqjE?editors=0011 |
|9| Kelvin Hsu | https://codepen.io/kelvin001/pen/MWEqPye?editors=1010 |
|10| Elaine Liu | https://codepen.io/elaine7598/pen/poWOxEg?editors=0010 |
|11|Aaron Tu|https://codepen.io/aarontu/pen/bGoxmoG|
|12|Sheep| https://codepen.io/SheepNDW/pen/RwLYeZE |
|13| Liu | https://codepen.io/feng-chi-liu/pen/wvrEYzL?editors=1112 |
|14| Yunei | https://codepen.io/Yunei/pen/mdBGzvN |
|15|Himi|https://codepen.io/Himi/pen/PoJdyMq|
|16|kevinhes|https://codepen.io/kevinhes/pen/LYzJgKM?editors=0010|
|17| POPEYE | https://codepen.io/popeye_ux/pen/MWEqzgE |
|18|我是泇吟|https://codepen.io/kljuqbxs/pen/BawOGjz|
|19|kk|https://codepen.io/potatokaka/pen/JjraeYw?editors=0011|
|20|Gill|https://codepen.io/Gill-Chin/pen/jOGvQML?editors=0011|
|21|許敏鑫|https://codepen.io/MIN-HSIN/pen/VwMGVKo?editors=1111
|22|JohnLu|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011
|23|有廖先生(Rain)|https://codepen.io/billpop741/pen/poWOQmO|
|24|Empty Wu| https://codepen.io/emptywu/pen/zYEJMVV |
|25|Arista| https://codepen.io/arista-hsieh/pen/PoJdXbE|
|26|Tim Lin|https://codepen.io/TimmyLin/pen/GRMXPEy|
|27|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/ExweGbP?editors=1111|
|28|Charlotte Lee|https://codepen.io/charlotte-lee/pen/bGoxOBK?editors=0010 |
|29|Jhen|https://codepen.io/cheng-jhen/pen/ExwpZGa |
|30| 黃士桓 | https://codepen.io/shr-huan-huang/pen/oNGPJRG?editors=0011 |
|31| hua | https://codepen.io/hahahazzz123/pen/yLzxGGL?editors=1111 |
|32| Judy ☻ | https://codepen.io/hsiaohan/pen/NWaLoXq?editors=0011 |
|33| AllenW | https://codepen.io/AllenW/pen/OJxoBqV |
|34| andersonshen | https://codepen.io/luxyenni-the-bold/pen/dyVqagQ |
|35| Henry Wu | https://codepen.io/dkcmlaww-the-flexboxer/pen/gOGdqVb |
|36| shio | https://codepen.io/shioyen/pen/BawObzz?editors=1112 |
|37| Bella Shya | https://codepen.io/BellaXie/pen/dyVqroL?editors=0010 |
|38| 陳暐中| https://codepen.io/wei-z/pen/eYGLXJM?editors=1011 |
|39| Benson | https://codepen.io/soul81624/pen/ExweMpJ |
| 40 | Sihle Huang | https://codepen.io/bugbug777/pen/zYEJXjr |
|41|威爾|https://codepen.io/WILL_Wu/pen/NWaLmoJ|
|42|dOvOb|[第一題](https://codepen.io/gezzgrwj-the-styleful/pen/GRMXaZw)and[第二題](https://codepen.io/gezzgrwj-the-styleful/pen/OJxoYmY?editors=0011)
|43|Gui|https://codepen.io/guitimliu/pen/oNGPRQa
|44|Vicky|https://codepen.io/hyxfish27/pen/PoJdvyY |
|45|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/LYzJKWo?editors=1011|
|46|Rick Tzeng|https://codepen.io/rick917jp6/pen/wvrELPJ
|47|tingyu| https://codepen.io/dgltu/pen/bGoxXrj?editors=1011 |
|48|咖咖| https://codepen.io/gon790219/pen/RwLYXLL |
|49|Otis| https://codepen.io/humming74/pen/dyVgbYd?editors=0011 |
|50|Yummyniya| https://codepen.io/yummyniya/pen/zYEmOqZ |
|51|Erin Huang| https://codepen.io/ErinHuang/pen/VwMEZjx |
|52|Terry21| https://codepen.io/feng0409/pen/PoJyYXY?editors=0012 |
|53|yu| https://codepen.io/yuu9916/pen/eYGPYgr?editors=0010 |
|54|Yof| https://codepen.io/yangyof/pen/mdBGgNj?editors=1011 |
|55|Calon|https://codepen.io/Calon0118/pen/WNZabpg|
|56|Scottie|https://codepen.io/wow767t/pen/xxXybaE?editors=1111|
|57|Mylène|https://codepen.io/hamajibashi/pen/BawOExO|
|58|柴貓|https://codepen.io/shibacat/pen/yLzRNVe|
|59|Bonnie|https://codepen.io/bonnieli1414/pen/bGomWJV |
|60|Howard|https://codepen.io/yawdnhbm/pen/yLzRXXP|
|61| Meng | https://hackmd.io/8ajLNpTwTcSWQC7JZe0T1Q?view |
|62| Karen Huang | https://codepen.io/Coding_Snorlax/pen/gOGBoyz?editors=1012 |
|63|AKI|https://codepen.io/akichen27/pen/oNGaMxJ|
|64|Jasper|https://codepen.io/li-jasper/pen/abLRjQM|
|65|Evan Chinag|https://codepen.io/piskesocute/pen/OJxaPEQ|
|66|YC|https://codepen.io/YCLu/pen/eYGQZjB|
|67|Henry|https://codepen.io/kaohenry9287/pen/RwLqjxX|
|68|Hedy|https://codepen.io/hhhsuan41/pen/poWQBNV?editors=1111|
|69|Yuan|https://codepen.io/yuanluo13542/pen/NWaeKrE?editors=1010|
|70|Leo Song|https://codepen.io/sunnylaba/pen/abLPoKp?editors=0010 |
|71|DDDDK|https://codepen.io/dkklee/pen/GRMPgzE|
|72|阿武|https://codepen.io/samwnkyat/pen/QWqzyBr
|73|Steven Chan|https://codepen.io/Steven1220/pen/RwLEGEK?editors=1011 |
|74|Jung|https://codepen.io/ROUJUNG/pen/MWEZpGP?editors=0011|
|75|William_O^2|https://codepen.io/CodingTrain_1/pen/VwMqdgy|
|76|Anna|https://codepen.io/kycrleao/pen/NWaeBQR?editors=0011|
|77|小K|https://codepen.io/kelen1995/pen/ExwryqL |
|78|Jason Chen|https://codepen.io/jason60810/pen/bGozBBM |
|79|Jordan Tseng|https://codepen.io/jordan-ttc-design/pen/LYzqwmv?editors=1011 |
|80|mei|https://codepen.io/Shila-Chen/pen/VwMgymO |
|81|FuChang|https://codepen.io/fuchang830714/pen/YzrBKdE|
|82|Abbie|https://codepen.io/Abbie0704/pen/wvrZerY|
|83|肉桂卷|https://codepen.io/ginnlee/pen/LYzoKWp?editors=0011|
|84|Jerry Yen|https://codepen.io/JerryYen/pen/wvrVqWX?editors=0011|
|85|Will|https://codepen.io/pen/?editors=0011|
|86|阿劍| https://codepen.io/seonkuraito/pen/ZEXwWNG |
|87|Burno Yu| https://codepen.io/bruno-yu/pen/mdqdboo?editors=1111 |
|88|2/WA| https://codepen.io/ldddl/pen/VwrwPBo |
|89|ShaoYu| https://codepen.io/shaoyukao/pen/LYOYaVm |
|90|Riley|https://codepen.io/jjpxbprd/pen/WNXbNVj|
|91|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/gOXamON?editors=1012|
|92|Van |https://codepen.io/fbacojji-the-selector/pen/MWOqYjp?editors=0011 |
|93|大衛|https://codepen.io/exnsrpjc/pen/VwyjymR?editors=0011 |
|94|Carol Li|https://codepen.io/carolli834/pen/vYpoLON?editors=0011|