---
tags: JS 直播班 - 2023 秋季班
---
>若有任何疑問請至 Discord「作業討論」頻道討論
# 物件與陣列設計
## 本章節我們要學什麼？
前面幾週練習了字串與數字，這次要來學習「物件與陣列」。在 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/2020111311/lectures/48764417)
* [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 學員回報給他，感謝他的命題，讓自己觀念更好
回報區
---
<!-- 參考答案：
https://codepen.io/jmimiding4104/pen/VwqyeVm
答案僅供參考，
答案會使用各種方式書寫(非最佳化)並加上部分解說，
適合初學者還不太會解題或者是該題卡住的同學。
-->
| Discord | LV1 答案 |LV2 自行設計題目 | LV3 做其他學員設計的題目 |
|:-:|:-:|:-:|:-:|
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/ZEwWYvy?editors=0011) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/YzBqXWz) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/LYqNVGo?editors=0011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/yLZOeGX) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/yLZOeWz)|
|xiaokui_71292|[CodePen](https://codepen.io/pen?template=PoVNZRY)|
|Ching|[CodePen](https://codepen.io/tzuchingg/pen/yLZOJJr?editors=0010)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/VwgaLxe?editors=1111)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/VwgaeJO?editors=0012)|
|ming0712|[CodePen](https://codepen.io/StevenHuang/pen/eYxZBxX?editors=0010)|
|suzi|[CodePen](https://codepen.io/midomommy/pen/VwgaWGr?editors=0012)|
|Ataraxia|[CodePen](https://codepen.io/ataraxia8888/pen/LYqNZBL)|
|Celine 510|[CodePen](https://codepen.io/Celine-510/pen/zYeqmpy)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/WNPwYja)|
| Peng |[CodePen](https://codepen.io/H-Peng/pen/rNPeeXE?editors=0010)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/eYxZJKG?editors=0011)|
| 精靈 |[CodePen](https://codepen.io/justafairy/pen/poGybLM)|
| yuan! |[CodePen](https://codepen.io/townyuan/pen/yLZOwjd)| | |
| MY |[CodePen](https://codepen.io/ahmomoz/pen/vYbGgNm?editors=1111)| | |
| SHUO |[CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/zYeBroN)| | |
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/XWOdMKR)|
| santu0868 |[CodePen]([連結](https://codepen.io/HatsumiSan/pen/ZEwOvML))| | |
| 奔跑吧(GTR150) |[CodePen](https://codepen.io/Wer-Qwe/pen/wvNGzPB?editors=1111) | | |
| Dora |[CodePen](https://codepen.io/dorayu/pen/YzBqxGO)| | |
| Ivan |[CodePen](https://codepen.io/swalok/pen/RwvRMpK?editors=0012)| | |
| Alyce |[CodePen](https://codepen.io/alycehwy/pen/ExrgaaK?editors=0010)| | |
| shiro |[CodePen](https://codepen.io/chenghsienwang/pen/jOdqGdK)| | |
| Yijing |[CodePen](https://codepen.io/Yi-Jing-71080635/pen/BaMLKYj?editors=0011)| | |
| xin |[CodePen](https://codepen.io/Estherrrrrr999/pen/ZEwWQye)| | |
| Allen |[CodePen](https://codepen.io/hlctw/pen/oNmxWmj?editors=1111)| | |
| jslong |[CodePen](https://codepen.io/art-jg/pen/PoVNVXp?editors=0010)| | |
| 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/eYxdJKd)| | |
| tanuki5863 |[CodePen](https://codepen.io/tanuki320/pen/dyaMXzW?editors=1011)| | |
| Uli |[CodePen](https://codepen.io/uli1313/pen/xxMREyq?editors=0012)| | |
| yu.t_liu |[CodePen](https://codepen.io/YuT200053/pen/WNPwXwg?editors=0012)| | |
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/eYxBdzq?editors=0012) |
| Fabio20 |[CodePen](https://codepen.io/fabio7621/pen/vYbyggO)| | |
| JasonFu |[CodePen](https://codepen.io/jie-Fu/pen/JjxRNEZ?editors=0110)| | |
| RX00 |[CodePen](https://codepen.io/llqzknqv-the-styleful/pen/PoVGyMN?editors=1011)| | |
| peggy |[CodePen](https://codepen.io/peggylai/pen/wvNgmwa?editors=0011)| | |
| shuuu |[CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/dyapXxv)| | |
| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/yLZMGPx)| | |
| 白夜 |[CodePen](https://codepen.io/Wei903/pen/wvNorVG?editors=0012)| | |
| 維哲 |[CodePen](https://codepen.io/paul-1997/pen/LYqNVGo)| | |
| JUNEW |[CodePen]([連結](https://codepen.io/June-W/pen/abXEjev))| | |
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/oNmPdPV?editors=0011)| | |
| 依依|[CodePen](https://codepen.io/Rita-Yang/pen/wvNzGVJ?editors=0011)| | |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/OJdBxNX)| | |
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/LYqMWGW?editors=0011)| | |
| kawa |[CodePen](https://codepen.io/z83xji6/pen/xxMBLgb?editors=0111)|
<!--快速複製
| Discord |[CodePen](連結)| | |
-->
Sign in with Wallet
Connect another wallet