---
tags: JS 直播班 - 2022 秋季班
---
###### tags: `簡單`
# 物件與陣列設計
## 本章節我們要學什麼？
前面幾週練習了字串與數字，這次要來學習「物件與陣列」。在 Javascript 中，**陣列是一種具有特殊方法與屬性的物件**，可以把陣列視作「特別用於存儲有序列狀的資料」的資料型態。
* 物件：一個物體，由鍵與值構成與描述。
* 陣列：一個清單，由元素和索引構成。
參考文件：[MDN陣列](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array)、[MDN物件](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/)
## 題目一：創建陣列與物件
請分別創建一個陣列與物件用於存儲以下資訊並在瀏覽器的 Console 中打印出來：
* **待買備忘錄 (用陣列表示)**
* 牛奶
* 酪梨
* 咖啡粉
* 咖啡粉
* 蘋果麵包
* **用戶的資訊 (用物件表示)**
* 年紀： 20
* 名稱： 小明
* 生理性別： 男
* 興趣： 前端開發、讀書、跑步
* 喜歡的食物： 滷肉飯
* 吃素： 否
``` =JavaScrip
// 附註：同學可嘗試放入任何自訂內容，著重在練習語法操作。
// Todo 待修改
const toBuyList = []
const userInfo = {}
console.log(toBuyList)
console.log(userInfo)
// Output 輸出
["牛奶", "酪梨", "咖啡粉", "蘋果麵包"]
{
age: 20,
name: "小明",
sex: "男",
hobby: ["前端開發", "讀書", "跑步"],
favoriteFood: "滷肉飯",
isVegetarian: false
}
```
## 題目二：獲取陣列與物件長度
接續第一題，請修改以下程式使其打印出陣列或物件的長度。
參考文件：[MDN Array.length](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/length)、[MDN Object Keys](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
``` =JavaScrip
// Todo 待修改
console.log(toBuyList)
console.log(userInfo)
// Output 輸出
4
6
```
## 題目三：獲取陣列或物件內容
接續第一題，請將備忘錄與用戶資訊的**第一筆與最後一筆資料**給打印出來，如果是物件，須將 key 與 value 用以下範例格式打印出來。
參考文件：[MDN Object Keys](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)、[MDN Object Values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
``` =JavaScrip
// Todo 待修改
console.log(toBuyList)
console.log(userInfo)
// Output 輸出
"牛奶","蘋果麵包"
"age: 20 / isVegetarian: false"
```
## 題目四：複製陣列或物件(淺拷貝)
:::info
如果還沒有概念如何操作，可參考以下文檔。
* [ES6 展開語法：Spread syntax (...)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
* [物件複製：Object.assign()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
:::
JavaScript 在創建變數、賦值後除了基本型態外都是以傳址(call by refence)來去記載內容位置，雖然可以節省記憶體使用但也會造成「改 A 更動到 B」的問題。
參考資料：[Pass by value, or Pass by reference？](https://ithelp.ithome.com.tw/articles/10209104)
接續第一題，請複製一份相同的內容(使用淺拷貝的方式)到全新的陣列、物件之中。
``` =JavaScrip
// Todo 待修改
const newToBuyList = []
const newUserInfo = {}
console.log(newToBuyList)
console.log(newUserInfo)
// Output 輸出
["牛奶", "酪梨", "咖啡粉", "蘋果麵包"]
{
age: 20,
name: "小明",
sex: "男",
hobby: ["前端開發", "讀書", "健身"],
favoriteFood: "滷肉飯",
isVegetarian: false
}
```
## 題目五：修改陣列與物件(增、刪、改)
:::info
增、刪、改陣列或物件的方式有很多種，如還沒有概念如何操作可以參考以下文章。
* [(Ray) 關於 JavaScript 陣列 20 種操作的方法](https://israynotarray.com/javascript/20190421/1216566123/)
* [(卡斯伯) JavaScript 陣列處理方法](https://www.casper.tw/javascript/2017/06/29/es6-native-array/)
:::
接續第四題，在淺複製完 ToBuyList、UserInfo 後對陣列與物件做以下的更動，並打印出來。
**陣列：**
* 刪除陣列中的 "咖啡粉"
* 新增 "布丁" 為陣列的首筆資料
* 刪除陣列中的最後一筆資料("蘋果麵包")
**物件：**
* 將小明的年齡 +1
* 將小明是否吃素改為 true
* 新增 key 為 "hasDriverLiscense"，value 為 true
* 刪除 key "favoriteFood"
``` =JavaScrip
// Todo 待編輯
//
// 請在此對新物件與陣列做更動。
//
console.log(newToBuyList)
console.log(newUserInfo)
// Output 輸出
["布丁", "牛奶", "酪梨"]
{
age: 21,
name: "小明",
sex: "男",
hobby: ["前端開發", "讀書", "健身"],
isVegetarian: true
hasDriverLiscense: true
}
```
## 題目六：複製陣列或物件(深拷貝)
:::info
關鍵字與參考資料：
* [MDN Json.prase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
* [JSON.stringify()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
* Array Deep Clone
:::
``` =JavaScrip
// Input 輸入
const nestedNumbers = [[1], [2]];
const numbersCopy = [...nestedNumbers];
numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// Output 輸出
// 兩個變數都被更改了，因為他們共享相同的記憶體位址來存儲資料。
[[1, 300], [2]]
[[1, 300], [2]]
```
**(請先參考以上代碼了解問題點)**
在大多情況下使用淺層拷貝就足矣，但當情況稍微複雜一點(嵌套的陣列或物件)，在第二層還是會出現共享記憶體位址來存儲資料的問題，造成：「更動 A 陣列也跟著改動到 B 陣列」的問題。
請創造 nestedNumbers 並深層複製出 deepCloneNestedNumbers，使其各自有獨立的記憶體位置存放資料。
``` =JavaScrip
// Todo 待編輯
const nestedNumbers = [[1], [2]];
const deepCloneNestedNumbers = []
deepCloneNestedNumbers[0].push(300)
console.log(nestedNumbers, deepCloneNestedNumbers)
// Output 輸出
[[1], [2]]
[[1, 300], [2]]
```
## 題目七：月有陰晴圓缺🌚🌝
:::success
先喘一口氣，接著挑戰如何使用原生方法處理陣列。通常會建議同學基本了解以下最常用的方法，就足夠應付大多場合：
* [為什麼要學陣列資料處理？](https://courses.hexschool.com/courses/202011131/lectures/42391273)
* [forEach](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
* [map](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Map)
* [filter](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
* [reduce](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
:::
請製作一個函式可以回傳出月亮一周期的過程，並且在"滿月 🌕"時加上"月餅 🥮"字串。
``` =JavaScrip
// Todo 待編輯
function moonCakeTime(planetPhase) {
}
const moonPhase = ["🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘"]
console.log(moonCakeTime(moonPhase))
// Output 輸出
["🌑","🌒","🌓","🌔","🌕 + 🥮","🌖","🌗","🌘"]
```
## 題目八：組合 HTML 標籤
在後續幾週的章節我們會學到如何操作網頁上的 DOM 元素，不過在此只需要先練習組合 HTML 標籤字串即可。
``` =JavaScrip
// Todo 待編輯
const cardData = [{
url: "https://www.hexschool.com/",
content: "六角學院"
}, {
url: "https://www.heptagonschool.com/",
content: "七角學院"
}, {
url: "https://www.Octagonschool.com/",
content: "八角學院"
}]
const cardStructure = `
<li>
<a href="#">Content</a>
<li>
`
const cardHTML = []
console.log(cardHTML)
// Output 輸出
["
<li>
<a href='https://www.hexschool.com/'>六角學院</a>
<li>
","
<li>
<a href='https://www.heptagonschool.com/'>七角學院</a>
<li>
","
<li>
<a href='https://www.Octagonschool.com/'>八角學院</a>
<li>
"]
```
## 題目九：小餐館訂單顯示
小餐館到了中午暴增許多外送訂單，請回傳一個物件，幫助廚師紀錄目前有多少種類的食物與數量要製作。
``` =JavaScrip
// Todo 待編輯
const orders = ["🍔","🍜","🍕","🍜","🍔"];
function countOrders(orders) {
// ...
}
console.log(countOrders(orders))
// Output 輸出
{
🍔 : 2,
🍜 : 2,
🍕 : 1
}
```
## 題目十：代辦事項
請同學綜合以上練習，在終端中創造一個代辦事項，分別具有以下功能：
* 新增事項
* 刪除事項
* 切換事項完成狀態
* 渲染事項
預期每筆事項的架構如下：
``` =JavaScrip
{
id: 0, // 自行決定方便的數值，有獨一無二的 ID 最好。
name: "事項名稱",
isCompleted: false,
}
```
``` =JavaScrip
// Todo 待編輯
let tasks = [];
function addTask(task) {
}
function removeTask(targetId) {
}
function toggleTask(targetId) {
}
function renderTasks(tasks) {
}
addTask("A");
addTask("B");
addTask("C");
toggleTask(2);
removeTask(1); // 可以輸入 ID 去刪除事項
renderTasks(tasks);
// 輸出
[
{
"id": 2,
"name": "B",
"isCompleted": true
},
{
"id": 3,
"name": "C",
"isCompleted": false
}
]
```
## 回報流程
1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）
## 作業提交等級
* LV1：解出 10 題，並提交 Codepen
* LV2：設計一個 hackmd，嘗試自己設計 10 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好
回報區
---
| Discord | LV | CodePen / 答案 |
|:-----------------------:|:---:|:--------------------------------------------------------------------------------------------------------------------------------------:|
| Iris Huang#6727（範例） | LV1 | [CodePen](https://codepen.io/ythuang/pen/GRxejgE) |
| Rice#8043 | LV1 | [CodePen](https://codepen.io/riecball/pen/wvjNXrq?editors=0011) |
| Ayre#0016 | LV1 | [CodePen](https://codepen.io/yichunlin09/pen/BaVBmjB?editors=0010) |
| Tuhacrt#0008 | LV1 | [codepen](https://codepen.io/Tuhacrt/pen/jOKNapB) |
| RJRS#9430 | LV1 | [CodePen](https://codepen.io/RJRS/pen/BaVBmKB) |
| Benson#6763 | LV1 | [Codepen](https://codepen.io/kumashow/pen/poKzdNN) |
| VT#0895 | LV1 | [CodePen](https://codepen.io/vt197/pen/ZERzryY) |
| YC#2522 | LV1 | [CodePen](https://codepen.io/YCLu/pen/eYKOGjz) |
| 柔柔#1716 | LV1 | [Codepen](https://codepen.io/rouchen/pen/OJELQrq?editors=0011) |
| hsiung阿熊#4079 | LV1 | [Codepen](https://codepen.io/hsiungchi/pen/OJELOoM) |
| 威爾#1694 | LV1 | [CodePen](https://codepen.io/WILL_Wu/pen/eYKOyJL) |
| yawun#0042 | LV1 | [CodePen](https://codepen.io/monicalin/pen/mdKbqgJ) |
| Mylène#2481 | Lv1 | [CodePen](https://codepen.io/hamajibashi/pen/rNKBpzP) |
| 無名#6427 | Lv1 | [CodePen](https://codepen.io/Nomoney/pen/WNyeXjw?editors=0011) |
| Cliff#4606 | LV1 | [Codepen](https://codepen.io/Cliff_hex/pen/VwdZyKL) |
| Sentiments#4883 | Lv1 | [codepen](https://codepen.io/Sentiments/pen/PoaYeGb?editors=0011) |
| SASIMI#5099 | Lv1 | [Codepen](https://codepen.io/sashimi1327/pen/MWXgGQz) |
| 法希娜#3206 | Lv1 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/WNyeZqN?editors=0012) |
| jacky010080#0880 | Lv1 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/MWXgrWV?editors=0011) |
| Ohno#1144 | Lv1 | [Codepen](https://codepen.io/mmaa7850/pen/OJELZBO?editors=0011) |
| Paul#7426 | Lv1 | [CodePen](https://codepen.io/paul-1997/pen/ExRYRog?editors=0011) |
| Amberhh#2465 | Lv1 | [Codepen](https://codepen.io/Amberhh/pen/OJELONK?editors=0011) |
| jackson204#6363 | Lv1 | [Codepen](https://codepen.io/jackson204/pen/poKzOpZ?editors=1111) |
| AuroraC#6539 | LV1 | [codepen](https://codepen.io/AuroraC/pen/GRGKQOG?editors=1012) |
| 圈圈#4060 | LV2 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/PoaYeWW?editors=1012)/[HackMD](https://hackmd.io/@j6ccRYgTTEiVcfMfmAELcw/B1ROauSVi) |
| 出事了阿伯#9923 | Lv1 | [Codepen](https://codepen.io/BradpittLai/pen/bGKbLJX?editors=1011) |
| jimmyFang#9575 | Lv1 | [Codepen](https://codepen.io/pohxiqqo/pen/dyKbwLp?editors=0011) |
| 黃士桓#7654 | Lv1 | [codePen](https://codepen.io/shr-huan-huang/pen/rNKBPmV?editors=0012) |
| RyanTsai#8906 | Lv1 | [CodePen](https://codepen.io/linlaose/pen/yLEBvVm) |
| 威0#6919 | LV1 | [Codepen](https://codepen.io/n0918679182/pen/GRGKOap?editors=0012) |
| PayRoom#8328 | LV1 | [CodePen](https://codepen.io/water38198/pen/rNKBGZM) |
| yumy#1940 | LV1 | [CodePen](https://codepen.io/yumy_yamg/pen/gOKYoOr) |
| JackC#0411 | LV1 | [CodePen](https://codepen.io/key0329/pen/QWxLQwz) |
| mandylai#4055 | LV1 | [CodePen](https://codepen.io/mandy-lai-2/pen/rNKBdyG) |
| mandylai#4055 | LV1 | [CodePen](https://codepen.io/mandy-lai-2/pen/rNKBdyG) |
| William Lai#0196 | LV1 | [CodePen](https://codepen.io/lai-weihan/pen/WNyeJOd) |
| Kimi #9564 | LV1 | [CodePen](https://codepen.io/kimihu91/pen/KKePRGG) |
| albee#9121 | LV1 | [Codepen](https://codepen.io/albee-chang/pen/xxzKNRO?editors=1012) |
| hannahTW#2224 | LV3 | [Codepen](https://codepen.io/hangineer/pen/xxzKeVB?editors=0011)/[HackMd](https://hackmd.io/@XuLchNweTiC4s2NZlAlQDw/H169I-nNo) |
| suihsilan#9485 | LV1 | [Codepen](https://codepen.io/suihsilan/pen/XWYWBpM?editors=0010) |
| yoshidc#0455 | LV1 | [Codepen](https://codepen.io/yoshiyyc/pen/GRGRoLm) |
| kenki100#0068 | LV1 | [Codepen](https://codepen.io/ken100/pen/vYrYgxQ) |
| 黑白兔#0684 | LV1 | [Codepen](https://codepen.io/johnny329/pen/poKoWPB) |
| Ron Liang#7277 | LV1 | [Codepen](https://codepen.io/ron-go/pen/bGKNwjW) |
| CloThEs#7837 | LV1 | [Codepen](https://codepen.io/CloThEsZ/pen/gOKbvPm) |
| Rena#6249 | LV1 | [Codepen](https://codepen.io/aureate0116/pen/XWYryBE?editors=0012) |
| charlottelee849#0366 | LV1 | [Codepen](https://codepen.io/charlotte-lee/pen/dyKPmde?editors=0010) |
| 萱仔#0781 | LV1 | [Codepen](https://codepen.io/ting-hsuan/pen/RwJbeMy?editors=0011) |
| LHchien33#6232 | LV1 | [Codepen](https://codepen.io/lin_chien/pen/vYrBdRR?editors=0012) |
| amy芳#1385 | LV1 | [Codepen](https://codepen.io/amy-chieng/pen/NWzPLxN) |
| KuoMin#4931 | LV1 | [Codepen](https://codepen.io/KuoMin/pen/vYrOXZw) |
| Yiru#0236 | LV1 | [Codepen](https://codepen.io/yiru94/pen/bGKNLKj?editors=0011) |
| Kevin#6131 | LV1 | [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/OJEJRGx) |
| 薯餅#3581 | LV1 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/dyKbLqG) |
| Lucie#3831 | LV1 | [Codepen](https://codepen.io/bisespei/pen/abKbvvy) |
yoyo#1003 | LV1 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/yLENWzq)
| 蓁心#6229 | LV1 | [Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/ZERzwNO?editors=0011)
| 雷雷#7844 | LV1 | [Codepen](https://codepen.io/lei-yi-jie/pen/poKJmOO?editors=0010)
| JustinLiu#9699 | LV1 | [CodePen](https://codepen.io/justin0227/pen/OJEPPwW?editors=0011)
| WEI_RIO#9342 | LV1 | [codepen](https://codepen.io/wei_wu/pen/bGKbYOB?editors=0011)
| Winnie#1306 | LV1 | [codepen](https://codepen.io/WinnieWuWinnie/pen/wvXwXbL)
| 安o #2448 | LV1 | [codepen](https://codepen.io/JzhenAn/pen/LYrpEbm?editors=1011)
| YU#0618 | LV1 | [Codepen](https://codepen.io/yoken_/pen/zYaOLaj) | |
| cotton#7163 | LV1 | [Codepen](https://codepen.io/cottonT/pen/bGKbvzB) | |
| 艸良#2846 | LV1 | [Codepen](https://codepen.io/momoninainai/pen/ExRVLzL?editors=1111) | |
| Greta#0837 | LV1 | [CodePen](https://codepen.io/gretali/pen/ExRxywo)|
| 心幻羽#0056 | LV1 | [CodePen](https://codepen.io/linglingsyu/pen/wvXwmaw?editors=1011) | |
| sophiee#7015 | LV1 | [codepen](https://codepen.io/sophiee2727/pen/MWXazVN) | |
| IreneY#0086 | LV1 | [codepen](https://codepen.io/HalfPlannedJourney/pen/MWXaxJR) | |
| Eileen#6454 | LV1 | [codepen](https://codepen.io/Eileen-io/pen/qBKdGoB) | |
| hungya#0773 | LV1 | [codepen](https://codepen.io/hungya777/pen/abKdpOe?editors=0011) |
| yen#5757 | LV1 | [codepen](https://codepen.io/TZU-HUANG-YEN/pen/zYaOmQZ?editors=1111) | |
| Clara#1275 | LV1 | [codepen](https://codepen.io/bsupixqu/pen/KKePJxP?editors=0011) | |
| Chloe#5422 | LV1 | [CodePen](https://codepen.io/Ironchloe/pen/XWYJxVv?editors=0011) |
| yaru#6308 | LV1 | [CodePen](https://codepen.io/lszaietc/pen/OJENJPp?editors=0010) | |
| 三隻小貓#1905 | LV1 | [CodePen](https://codepen.io/bagelover/pen/dyKPgXY) | |
| FiReBrO#0557 | LV1 | [CodePen](https://codepen.io/firebro42/pen/ZERWzEK?editors=0011) | |
| Rr#2215 | LV1 | [Codepen](https://codepen.io/rufangcheng/pen/GRGJbwX) |
| Hilda#7085 | LV1 | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/PoaoNdd) |
| Vera#5592 | LV1 | [CodePen](https://codepen.io/skvera/pen/qBKWzmK) |
| 大大#5164 | LV1 | [CodePen](https://codepen.io/gzonothk-the-looper/pen/wvXMGgW?editors=0011) |
|我是泇吟#5189|LV1|[CodePen](https://codepen.io/kljuqbxs/pen/dyKMKYj)|
|ssozr#4680|LV1|[codepen](https://codepen.io/ssozr/pen/bGKbKOy?editors=0011)|
|Data#9297|LV1|[codepen](https://codepen.io/kirakira72/pen/qBKWPLV)|
|Yuna Huang#2692|LV1|[codepen](https://codepen.io/Yuna1002/pen/JjZYbQd?editors=0011)|
| m_m#5493 | LV1 | [CodePen](https://codepen.io/minnn7716/pen/GRGNOoL) |
|軟綿綿 (๑•ᴗ•๑) ♡#3627|LV1|[CodePen](https://codepen.io/Connie-Chien/pen/mdKOpvw?editors=0012)|
|王懷英#7271|LV1|[CodePen](https://codepen.io/huaiying/pen/qBKZYPm)
|Hazel.#6020|LV1|[CodePen](https://codepen.io/Hazelhsieh/pen/MWXgErw?editors=1011)|
|Ryan Chiang#6649|LV1|[Codepen](https://codepen.io/ryanchiang/pen/qBKXZBJ?editors=0012)|
|kuku#3118|LV1|[Codepen](https://codepen.io/mengting-ku/pen/ExRwoBv)
| Tami#6742 | LV1 | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/abRKPOG) |
Sign in with Wallet
Connect another wallet