---
# System prepended metadata

title: "\U0001F3C5 Day 11 - 物件參考"
tags: [JS 直播班 - 2023 秋季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 / 答案                                |
|:-----------:|:----------------------------------------------------------------------------:|
|   Moreene   |              [CodePen](https://codepen.io/Moreene/pen/vYPNyEj)               |
|   銀光菇    |     [CodePen](https://codepen.io/genesynthesis/pen/rNROWVL?editors=1010)     |
|  FangFang   |             [CodePen](https://codepen.io/FangFang09/pen/vYPNyOj)             |
|     py      |         [CodePen](https://codepen.io/Wpypy/pen/JjzYbXy?editors=1011)         |
|    Emily    |             [CodePen](https://codepen.io/Emily2089/pen/OJqybpG)              |
|   Winnie    |   [CodePen](https://codepen.io/codepen-io-winnie/pen/BaboQRe?editors=0012)   |
|    Helen    |    [CodePen](https://codepen.io/milkteamonster/pen/poYjNWy?editors=0010)     |
|  Chia Pin   |             [CodePen](https://codepen.io/joker-cat/pen/dyrYOKq)              |
| cest_jessie |           [CodePen](https://codepen.io/itsjessiechen/pen/vYPNyWV)            |
|    Tippy    |            [CodePen](https://codepen.io/Ektodor-Wang/pen/qBvOqLy)            |
|    dora     |               [CodePen](https://codepen.io/dorayu/pen/BaboQav)               |
|    KUN.     |      [CodePen](https://codepen.io/barry91205/pen/RwdWomm?editors=1111)       |
|    精靈     |             [CodePen](https://codepen.io/justafairy/pen/Yzgypog)             |
| Celine 510  |             [CodePen](https://codepen.io/Celine-510/pen/jOJbVgV)             |
|  Ataraxia   |            [CodePen](https://codepen.io/ataraxia8888/pen/zYbvNOW)            |
| celinelinnn |            [CodePen](https://codepen.io/celinephoebe/pen/LYapxZq)            |
|     Uli     |        [CodePen](https://codepen.io/uli1313/pen/VwRvPBY?editors=1011)        |
|   ⭐️小正   |      [CodePen](https://codepen.io/colorgolden/pen/RwdWKyW?editors=1111)      |
|    kawa     |        [CodePen](https://codepen.io/z83xji6/pen/wvOKgZq?editors=1011)        |
|    XinYu    |       [CodePen](https://codepen.io/HsuXinYu/pen/XWGmMrQ?editors=0012)        |
|     kj      |             [CodePen](https://codepen.io/Eero-Chiao/pen/oNVjZLx)             |
|    風羽     |       [CodePen](https://codepen.io/Joy-Huang/pen/bGZVqrK?editors=0011)       |
|   ann6212   | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/RwdWpQL?editors=1011) |
|     MY      |        [CodePen](https://codepen.io/ahmomoz/pen/gOEaLvy?editors=1011)        |
|    Nelly    |       [CodePen](https://codepen.io/Nelly-Guo/pen/ExMVWqg?editors=1011)       |
|    Eden     |               [Codepen](https://codepen.io/iseden/pen/xxBwdwd)               |
|    Neil     |       [CodePen](https://codepen.io/Neil1024/pen/YzgyVZv?editors=0012)        |
|   Fabio20   |       [CodePen](https://codepen.io/fabio7621/pen/jOJbmLP?editors=1010)       |
|   Yijing    |   [CodePen](https://codepen.io/Yi-Jing-71080635/pen/OJqymxY?editors=0010)    |
|  yu.t_liu   |             [CodePen](https://codepen.io/YuT200053/pen/PoLPmLY)              |
|    Iris     |             [CodePen](https://codepen.io/iris831206/pen/zYbvzOW)             |
|   Wei_Rio   |        [CodePen](https://codepen.io/wei_wu/pen/XWGmRQz?editors=1011)         |
|    小夏     |            [CodePen]( https://codepen.io/michaelhsia/pen/qBvOjEJ)            |
|    SHUO     | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/wvOKeMG?editors=1012)  |
|   Antonio   |        [CodePen](https://codepen.io/gwhvusel-the-builder/pen/ExMVXNe)        |
|    Yang     |        [CodePen](https://codepen.io/Yang-J/pen/eYXpEOx?editors=0011)         |
|   MikeLin   |            [CodePen](https://codepen.io/MikeLin0701/pen/ExMVvjq)             |
|   bf_tsai   |        [CodePen](https://codepen.io/BF-Tsai/pen/rNROYLd?editors=1111)        |
|  ryan.chou  |              [CodePen](https://codepen.io/csw8524/pen/eYXpRpy)               |
|    PoRay    |       [CodePen](https://codepen.io/raycheng/pen/LYapeGp?editors=0011)        |
|    Hedy     |               [CodePen](https://codepen.io/pen/?editors=1012)                |
|    熊大     |              [CodePen](https://codepen.io/asiating/pen/xxBwpQO)              |
|    依依     |       [CodePen](https://codepen.io/Rita-Yang/pen/NWJGXoe?editors=1011)       |
|    Peng     |               [CodePen](https://codepen.io/pen/?editors=0010)                |
|     Tom     |             [CodePen](https://codepen.io/sp1daTomm/pen/BaboJgq)              |
|   Yuetin    |        [CodePen](https://codepen.io/Yue9527/pen/eYXpyQY?editors=0011)        |
|     Leo     |             [CodePen](https://codepen.io/Aruminiya/pen/NWJGyxV)              |
|  貢波波夫   |        [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/GRepQza)        |
|   RayRay    |              [CodePen](https://codepen.io/CityRay/pen/RwdWQdd)               |
|  stone4584  |       [CodePen](https://codepen.io/Royen0506/pen/qBvOobQ?editors=1011)       |
| fanshu0303  |    [CodePen](https://codepen.io/JuiHsuanLee0303/pen/PoLPRpP?editors=1111)    |
|    Enzo     |        [CodePen](https://codepen.io/Enzo-Lo/pen/VwRvxmK?editors=1111)        |
| jeremyChan  |      [CodePen](https://codepen.io/nudieisgood/pen/JjzYZxv?editors=1112)  |
 | Ariel  | [CodePen](https://codepen.io/ariel0510/pen/QWojxeE)  |
 | Eazy  | [CodePen](https://codepen.io/Eazychen/pen/poYjKMR?editors=1111) |
 |smalljie|[CodePen](https://codepen.io/smalljie/pen/QWojBrM)|
 | elena  | [CodePen](https://codepen.io/elena0127abc/pen/mdoeGPR)  |
  | nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/jOJbvYQ?editors=1011)  |
   | Chris  | [CodePen](https://codepen.io/cjtseng07/pen/zYbvJmG)  |
 | macihuang  | [CodePen](https://codepen.io/macy1215/pen/oNVjage)  |
 | .zack_p  | [CodePen](https://codepen.io/Designer-PH/pen/LYapvbp?editors=1011)  |
  | peggy  | [CodePen](https://codepen.io/peggylai/pen/XWGmQjw?editors=1011)  |
  | 保羅  | [CodePen](https://codepen.io/paul-1997/pen/oNVjRvw?editors=0010)  |
|　Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/abMvrBJ)|
| PayRoom |[CodePen](https://codepen.io/water38198/pen/JjzYqVL)
| Nielsen |[CodePen](https://codepen.io/nielsen_dch/pen/abMvrBJ)|
| PoWei#8484 |[CodePen](https://codepen.io/harrison-wei-lai/pen/QWojepx?editors=1010)|
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/LYaGPZj?editors=0012) |
| chihyang  | [CodePen](https://codepen.io/hike1707/pen/rNRxayb)  |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/NWJxqdm?editors=0012)  |
| _amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/LYaGyYx)  |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/wvOMdVw)  |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/zYbrzMJ?editors=1111)  |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/zYbrzMJ?editors=1111)  |
|MDFK|[CodePen](https://codepen.io/maywang/pen/BabjZPz?editors=0011)     |
 | Rock  | [CodePen](https://codepen.io/xiu43317/pen/abMdKLp)  |
| Jason | [CodePen](https://codepen.io/bfnrjakt/pen/NWJxeWg) |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/yLweGxG) |
|  jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/dyrGLzY?editors=0011)  |
|  WEI | [CodePen](https://codepen.io/wei-z/pen/mdoPrBr?editors=0010)  |
|  MDFK | [CodePen](https://codepen.io/maywang/pen/BabjZPz?editors=0012)  |
|  skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/NWJNajE)  |
|  JING | [CodePen](https://codepen.io/HSUANIN0327/pen/RwdaLxQ)  |
|yuling| [Codepen](https://codepen.io/igzdflpu/pen/gOErEGJ)|
|xuan| [Codepen](https://codepen.io/xuan0915/pen/yLwJBKd?editors=1010)|
|  cbs  |[Codepen](https://codepen.io/wasdjk/pen/gOEaQGa?editors=1111)|
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/zYbBozY?editors=1011)  |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/oNVzxPz?editors=0010)  |
 | runweiting | [CodePen](https://codepen.io/weiting14/pen/xxBEdWb)  |
 | hua | [CodePen](https://codepen.io/LHua/pen/dyrpEEO?editors=1111)  |
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/VwRPvjm) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/bGZgQqv) |
|  shuuu | [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/XWGpOqP?editors=1011)  |
|  翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/RwdVmWY?editors=0011)  |
|  關關 | [CodePen](https://codepen.io/ashkuan/pen/xxBXPWz)  |
| Ting | [CodePen](https://codepen.io/liara/pen/rNRKeyz) |
| WA | [CodePen](https://codepen.io/ldddl/pen/RwdmgGr) |
|yuan!|[CodePen](https://codepen.io/townyuan/pen/OJGyXzE)|

<!-- 快速複製
祝大家新年快樂唷！by 同學
新年快樂唷！！ bY 另一個同學
祝大家新年快樂，2024事事順利✧◝(⁰▿⁰)◜✧
看到大家的小彩蛋心情好好>< 大家新年快樂 2024天天開心 (●'◡'●)


 |   | [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/XWGpOqP?editors=1011)  |

-->
