---
tags: 直播班
---
# 💪 每日任務題目列表
## 7/15：Day 21
上回回顧：面臨真心鎮警衛隊追殺之際，小明與小美即將離開真心鎮，重新過上新的生活。
離開前，小明希望可以留給漂亮阿姨一些話，同時解決這段時間所產生的誤會。突然一個陌生的圓手，拿出了 Vue 傳呼機。
小明：J 個是...
陌生的圓手：這是 Vue 的傳呼機，可以用來遠距離通訊使用，不過有點故障，就送給你吧。
說完，這隻手就消失在這個故事裡，並找劇組領了便當回家用餐。
透過小明的研究，了解到這個傳呼機與最近研究的 Vue 是屬於同一個技術，覺得花些時間修正錯誤，將心裡的訊息傳遞給漂亮阿姨知道。
任務：
- 參考第四週[課程介紹](https://hackmd.io/@hexschool/HJDbvkFqU/%2FzYR8Trb-RYO0gctZWFpD4Q)、直播錄影、共筆文件，了解 Props 的運作
- 修正範例中的錯誤（三題，只需要調整 HTML）
[https://codepen.io/Wcc723/pen/eYJjgag?editors=1010](https://codepen.io/Wcc723/pen/eYJjgag?editors=1010)
#### 繳交作業說明：
請 fork 課程中所提供的 Codepen，並以 iframe 的方式內嵌於團隊內的 HackMD
iframe 範例（同上，選擇右下方的 Embed 的 iframe 選項）
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/jOWLdeZ?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Wcc723/pen/jOWLdeZ'>Vue 將資料呈現於畫面上</a> by Wcc723
(<a href='https://codepen.io/Wcc723'>@Wcc723</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
---
## 7/3：Day 20
小美與小明在真心鎮的郊外，深知此地不能久留，所以決定使用 Vue 的能力創建個人資料表單，並打算使用新的身份離開這個傷心地...
小明：漂亮阿姨，相信我們還會再相見...
任務：
- 閱讀 v-model 表單的課前[預習章節](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fjum_IOrASCWevidlnIAsOg)
- 完成表單功能並將小明賦予上新的身份吧
測驗：https://codepen.io/Wcc723/pen/xxZLBMR?editors=1010
## 7/2：Day 19
透過幾個英雄卡片的協助，小明與小美終於擺脫了真心鎮警力的追捕，不過謹慎的小美決定在家裡的周圍擺上陷阱，避免夜間時遭受偷襲。
任務：
- 閱讀 v-on 的課前[預習章節](https://hackmd.io/@hexschool/S1DJeKTdL/%2FvMG7FM1GSBafDKCZXuylCw)
- 將陷阱事件綁定於 button 標籤上（可使用縮寫的形式）
測驗：https://codepen.io/Wcc723/pen/WNrEmqW?editors=1010
## 7/1：Day 18
在越過幾個路口後，警力居然還可以不斷的出現，區區一個亂匯款應不會造成這麼麻煩的結果，但在危機時刻，小美已經沒辦法思考這麼複雜的問題。
小美：你的手遊抽卡運氣如何？
小明：非洲人是我
小美：不管了，非洲過去就是歐洲，試著將抽出的卡片釋放出來吧
#### 任務：
- 閱讀 v-for 的[課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FKWXW13ewTaq2M_svlEAYXA)：
- 將 data 內的英雄卡片呈現於畫面上（請一定要加入 :key 才算完成任務）
測驗：https://codepen.io/Wcc723/pen/KKVvExY?editors=1010
## 6/30：Day 17
簡單的幾個術式雖可以阻擋一些前來的警力，但小美預先準備的大括號 `{{ }}` 數量不夠，所以接下來難以用相同方式產生阻礙。
小美：接下來需要就地取材了...
小明：就地取材!?
#### 任務：
- 閱讀 [v-bind](https://hackmd.io/@hexschool/S1DJeKTdL/%2FdxbCu6YTTh2q-Z0p1vWSjw) 的章節
- 將資料中的圖片網址加入到 img 標籤，圖片 imgAlt 則加入到 alt 屬性上（可使用縮寫 `:` 的形式）
- 將內層的 div 標籤加上動態切換的 class 屬性，條件為 `isChecked` ，className 為 .river
測驗：https://codepen.io/Wcc723/pen/QWyMYza
#### 繳交作業說明：
請 fork 課程中所提供的 Codepen，並以 iframe 的方式內嵌於團隊內的 HackMD
iframe 範例（同上，選擇右下方的 Embed 的 iframe 選項）
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/jOWLdeZ?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Wcc723/pen/jOWLdeZ'>Vue 將資料呈現於畫面上</a> by Wcc723
(<a href='https://codepen.io/Wcc723'>@Wcc723</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
#### 學習重點
- 著重在 Vue 的 **語法認識**
- 運作的觀念會在直播課程中做介紹
## 6/29：Day 16
真心鎮的警備隊在小明進入城鎮時，就開始部署大量的警力，準備抓捕小明。小明雖然很快速地搭上小美的卡車，但後方的警力依然不斷的追上，就算是掌握 ES6 技能的小美也難以應對這麼大量的警力...
小美：沒辦法了，只好用出這招（從背後拿出大捲軸攤開）
小明：J 格是....
小美：這是基於 JS 能力所封印的捲軸，解開以後可以快速的運用各種術
小美：你來開車，我來阻止他們！
小明：可是我沒駕照啊～～～
小美拍了小明肩膀說：「沒關係，我也沒有」，說完話後立刻轉身後飛躍到卡車後方，開始進行 Vue 的術式。
#### 任務
- 閱讀[課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA)
- 測驗 1：將小美所準備好的 Vue 資料呈現於畫面上（只能操作 HTML）
https://codepen.io/Wcc723/pen/jOWLdeZ
- 測驗 2：小明也要玩玩看：前方已經有小美所準備好的 {{ }}，請試著把 data 補上，讓畫面可運作
https://codepen.io/Wcc723/pen/OJMjdap
---
## 6/26：Day 15
來到鎮上的小明忘了自己被通緝的身份，傻傻的到在市集內採買所需要的蔬果，當採買完畢以後發現有幾位警察正在跟蹤他，小明想趁著到暗巷內結印準備施展開溜之術時，但越緊張的情況下越容易施展失敗（字數太多惹）。
在危急時刻，小美快速駕駛卡車出現，準備載走逃跑中的小明...
ES6 新增的縮寫方式，可以在運行結果相同的情況下，大幅減少程式碼的撰寫，可參考：
[https://wcc723.github.io/javascript/2017/12/23/javascript-short-hand/](https://wcc723.github.io/javascript/2017/12/23/javascript-short-hand/)
任務：
- 將以下的函式進行縮寫
- 將水果、剩餘的零錢及小明，透過縮寫加入到小美的卡車上
```js
const fruits = {
watermelon: 10,
lemon: 3
};
const myMoney = 40;
const person = {
name: '小明',
run: function() {
console.log('拔腿跑')
}
}
const truck = {
driver: '小美',
drive: function () {
console.log('快溜喔');
},
};
```
## 6/25：Day 14
平常都是小美到鎮上採買，今天小美想將採買的工作交給小明處理。
小美：等等回到鎮上，幫忙看到賣檸檬的買三顆、西瓜買一顆、如果看到賣奇異果的買 10 顆，桌上的錢可以直接拿去用。
小明（建構函式中...）
小明：所以桌上有多少錢呢？
小美：你就拿去就對了
小明（苦惱中，不知如何建立此函式，但還是默默地準備出門）
小明出門前，發現了地上居然有一本 ES6 秘笈，打開後看到左上角標註著 "MDN" Logo，又恰巧是參數的那一頁...
（小美欣慰著看著小明點點頭，小明卻苦惱著不知道該怎麼辦）
參數預設值：[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters)
其餘參數：[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters)
任務：
- 以下程式碼中僅能調整**函式所設置的參數**
- 試著透過參數預設值及其餘參數的方式完成此範例
```js
var myMoney = 0;
// money 需要給予預設值 500
function getMoney(money) {
myMoney = money;
}
getMoney();
// fruits 是一個陣列
function buySomething(fruits) {
fruits.forEach((item) => {
if ('lemon' === item) {
console.log('買 3 個檸檬');
myMoney -= 60;
} else if ('watermelon' === item && !'賣奇異果的') {
console.log('買 1 個西瓜');
myMoney -= 40;
} else if ('watermelon' === item && '賣奇異果的') {
console.log('買 10 個西瓜');
myMoney -= 400;
}
});
console.log(`小明剩下 ${myMoney} 元`)
}
buySomething('lemon', 'watermelon', 'kiwi');
```
## 6/24：Day 13
小美家無論是外觀或內部擺設都是一致的簡潔，如果一張椅子就足夠使用，家中絕不會出現第二張椅子，所以東西的數量都是剛剛好的狀態。看起來小美一個人在這邊住了一段時間，但小明的加入好像又剛剛好讓房子內有了第二份一樣，有了第二張椅子、第二張床、第二間房間、甚至是第二份餐點。
白吃白住的小明也常常感到疑惑，採買的食材明明只有一人份，小美卻能生出第二人份的餐點。這天，小明決定偷偷的看小美做了什麼事，讓小明也能一起享受這份美食。
小美將處理的食材細心排成一列，接下來列的另一個空間排好了牌子，碰的一聲！食材就變成了兩份。
小明！！
小美：不用偷偷看，這也是 ES6 的技巧
小明：你怎麼還沒教我
小美：因為一般人學會，會無視等價交換的法則
小明：那餐點一份變兩份，算等價交換嗎？
小美：不算
小明：...，那可以教我了嗎？
小美：可以
參考：
- 解構文章：[https://wcc723.github.io/javascript/2017/12/25/javascript-destructuring/](https://wcc723.github.io/javascript/2017/12/25/javascript-destructuring/)
- 解構 MDN：[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
任務：
- 依據提示將以下程式碼用解構方式達成目標
```js
// 請使用解構組合使 arr2 變成為 [1, 2, 3, 4, 5, 6] 的結果
var arr = [1, 2, 3];
var arr2 = [？, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
console.log(arr2);
// 請使用解構組合以下兩個陣列為 [1, 2, 3, 4, 5, 6] 的結果
var nums1 = [1, 2, 3];
var nums2 = [4, 5, 6];
var nums3 = ...
console.log(nums3);
// 請使用解構，取出 name 及 age 的變數
const person = {
name: '小明',
age: 16
}
// 請使用解構，將以下陣列分別取出為獨立變數 Ming, Auntie, Jay, Mei
var people = ['小明', '漂亮阿姨', '杰倫', '小美'];
```
## 6/23：Day 12
透過 Let, Const 穩定自己的思緒後，小明開始體驗更為強力的 ES6 JS 語法，小美提到可以試著將複雜的 JavaScript 函式透過箭頭的方式進行簡化。
小明：什麼！箭頭也能當函式？
小美：沒錯，正確的運用下可以省略相當多的符號，將其濃縮成一行
小美：箭頭函式的運用技巧如下：
```js
// 傳統函式
function saySomething(string) {
return '接招 ' + string;
}
// 轉成箭頭函式
const saySomething = (string) => {
return '接招 ' + string;
}
// 當只有單行表達式時，可同時省略 return 及 {}
// 省略後依然保有回傳的特質
const saySomething = (string) => '接招 ' + string;
console.log(saySomething('Go Go Power Ranger'));
// 當只有單一個參數時，可以省略參數外部的 ()
// 沒有參數、兩個以上都不能省略
const saySomething = string => '接招 ' + string;
console.log(saySomething('Go Go Power Ranger'));
```
> 箭頭函式也可參考課程提供的[影音教學](https://courses.hexschool.com/courses/670037/lectures/12364949)
任務：將以下的函式簡化（不影響結果的情況下進行最大簡化）
```js
// 題目：1
function sum(a, b) {
var c = a + b;
return c;
}
console.log(sum(5, 6));
// 題目：2
function square(num) {
return num * num;
}1
var d = square(5);
console.log(d);
// 題目：3
setTimeout(function() {
console.log('延遲 10 毫秒');
}, 10);
// 題目：4
var arr = [1, 2, 3];
var arr2 = arr.map(function(item, i) {
return item * 2;
});
console.log(arr2);
// 題目：5
var obj = {
fn: function fn2(a) {
return a * a;
}
}
console.log(obj.fn(10));
```
## 6/22：Day 11
暫時失去了 JavaScript 能力的小明，流落到了真心鎮的郊外，在好心女孩的幫助下獲得些許的休息，也為幾小時沒有進食的胃得到了飽足。
經過介紹，這名女孩叫做小美，是少見未接受訓練就掌握 JS ES6 技能的神童，小美發現小明心煩意亂，雖然具有不錯的 JS 基礎，但是在煩躁的情況下沒有辦法輕鬆運用所學技巧。
ES6 的能力是屬於 JavaScript 升級版，能夠使用簡短的語法達到相同的功能，甚至更能夠減少原本 JavaScript 所發生的問題。因此，善良的小美決定傳授 ES6 的技巧給予小明，讓小明可以渡過這次的難關。
難過的小明也在小美家白吃白住了下來，並且開始學習 ES6 的技巧
第一關：透過 ES6 中的 let、const 穩固心境。
任務：
- 觀看影音課程中的「Let, Const」兩個相關章節
- 將以下的**變數改為使用 let, const 宣告**，以符合後方的修改條件（不可都使用 let）
```js
// 請將此段 var 宣告改為 let, const
var Ming = '小明';
var MingAge = 16;
var MingLocation = '真心鎮';
var person = {
name: '小明',
location: '真心鎮'
}
var wallet = {
money: 1000
}
// 需修改程式碼的結尾
// 後續程式碼，請藉此判斷使用 Let or Const
MingLocation = '真心鎮郊外';
person.location = '真心鎮郊外';
wallet = {};
```
## 6/19：Day 10
小明再怎麼樣隱匿，還是躲不過警方的搜查，在警方發現小明就是匯款者前，小明也先找到空檔逃離了真心鎮，傷心、難過的小明也因此一無所有。
離開真心鎮的小明在郊區遊蕩，身無分文、沒有求生技能的他，在六小時沒吃東西的情況下終於支撐不住，來到了一戶人家尋求協助，希望能夠填飽空腹已久的肚子，敲了敲門以後：
- 一位年輕的女孩：請問是哪裡找呢？
- 小明：...
- 一位年輕的女孩：請問有什麼事嗎？
- 小明：...
小明突然發現自己不能說話了！！沒有辦法跟女孩說到自己需要什麼，請協助小明說出自己的需求。
任務：
- 請修正以下程式碼錯誤，並執行 console 的內容
- 請嘗試說明以下程式碼錯誤的原因
```js
var saySomething = '小姐我好餓啊～～～'
(function() {
console.log(saySomething)
})
```
## 6/18：Day 9
漂亮阿姨收到轉帳資料後並不清楚是小明所轉帳的，除了對於來路不明的費用感到困擾，也想找出究竟是誰匯款給她，因此報警處理此事件。
小明在家中準備打電話跟漂亮阿姨說明此事時，門外卻來了正準備打聽「漂亮阿姨不明款項案件」的警察...。
警察：「請問小明先生在家嗎？」
小明：「我是小明」
警察：「漂亮阿姨最近有不明的款項，請問你知道是誰匯的呢？」
小明一心想要親自告訴漂亮阿姨，因此沒有承認卻激動的回覆：「不明款項！？那才不是不明款項勒！！」
警察：「為什麼你一口咬定不是不明款項呢？」
小明：「說不是就不是！」
警察：「看來你最可疑，搜！」
心想不妙的小明，一定要避免這件事情曝光，但匯款紀錄就在家中遲早會被搜出，請協助小明度過這次難關。
物件、陣列有傳遞參考的特性，因此兩個相同參考的物件、陣列最後比對時會完全相等，請查看影音課程中的「物件的參考特性」相關章節解決此問題：
### 任務
- 僅能調整 `var MingMoneyTransferRecord = ...` 後方的賦予方法，使兩個變數的參考不同
- 使最後的 `MingMoneyTransferRecord === Auntie.depositRecord` 的結果為 false
- `MingMoneyTransferRecord` 格式必須不變
### 挑戰項目：
- 組員間的方法盡可能都不同
```js
var Auntie = {
name: '漂亮阿姨',
age: 21,
deposit: 10000,
depositRecord: [
{
title: '小明匯款紀錄',
amounts: 77777
}
]
};
var MingMoneyTransferRecord = Auntie.depositRecord;
console.log(MingMoneyTransferRecord);
console.log(MingMoneyTransferRecord === Auntie.depositRecord);
```
重點觀念：
- 物件參考觀念
- 物件解除參考運用
## 6/17：Day 8
終於搞懂回覆的小明相當難過，認為是自己沒有付出**誠意**，所以才會被漂亮阿姨拒絕，因此決定匯款給予漂亮阿姨，以示自己的真心。
匯款的費用小明打算加總為 77777，用此幸運數字希望漂亮阿姨開心。
（註：小明的錢是哪來的？請參考新手篇）
### 任務
- 將 MingMoneyTransfer 的資料依序加入於 Auntie 的 depositRecord 內
- 加總 depositRecord 內的數值
- 將加總的數值加入至 deposit 上
``` js
var Auntie = {
name: '漂亮阿姨',
age: 21,
deposit: 10000,
depositRecord: [
{
title: '開戶',
amounts: 10000
}
]
};
var MingMoneyTransfer = [
{
title: '漂亮姨姨',
amounts: 777
},
{
title: '我是',
amounts: 7000
},
{
title: '真心的',
amounts: 70000
}
]
```
練習重點：
- 迴圈技巧
- 陣列、物件控制
## 6/16：Day 7
漂亮阿姨接收到小明的 "520" 訊息以後，嘗試把 "我只是把你當朋友" 回覆給小明知道，但神邏輯的小明一直誤解這段話的意思：
- 漂亮阿姨回訊：你是一個善良的好人，但我們只是朋友
- 小明解讀：你愛我的善，我喜歡你的良
- 漂亮阿姨回訊：你和我永遠都不會交錯
- 小明解讀：你愛我不會錯，我也會愛你到永遠
雖然很殘忍，但請協助小明理解這段話的意思：
JS 是屬於弱型別的的程式語言，也因為如此在開發上很容易遇到誤會。請撰寫一段 JS 並完成以下條件：
### 任務
1. 取得範例中的 input DOM 元素，並且取得其中的值
2. 將值定義成變數命名為 value
3. 使以下判斷式驗證執行 else 的結果
```js
if (value !== 520) {
console.log('漂亮阿姨喜歡小明')
} else {
console.log('漂亮阿姨只是小明的普通朋友')
}
```
```html
<div id="app">
<input type="text" value="520" class="a">
<div class="a"></div>
</div>
```
範例程式碼：[https://jsbin.com/kucugonuzu/2/edit?html,js](https://jsbin.com/kucugonuzu/2/edit?html,js)
練習重點：
- 取得畫面上的 dom（DOM 結構上取得的都是字串）
- 將字串轉型
## 6/15：Day 6
小明在傳送 520 給漂亮阿姨後，漂亮阿姨沒有任何回應，且對小明見面一如過往，像是沒有發生任何事一樣。小明因此與朋友「阿群」討教，解釋一番來龍去脈以後詢問為什麼會這樣？
阿群回應說：你的表達是不是出了問題？
小明思考著：表達是不是出了問題？表達是出了問題？表達式出了問題！！
因此小明道別了阿群，立馬再去研究表達式的運作。
JS 運作中可以見到許多都是表達式，包含函式的呼叫也都是表達式，最大的特點就是表達式會「回傳一個值」（詳細可見課前影音教學「陳述式與表達式」）。因為這樣的特點，表達式可以用在任何需要帶上值的程式碼片段，例如條件判斷、值的賦予、結果取得等等。
今天的任務，同學們就來幫小明找找，有哪些表達式的運作範例吧
任務：
- 尋找 MDN 或任何框架中**可插入表達式的片段**（關鍵字：expression）
- 將 `sayYouLoveMe()` 的函式呼叫置入於該片段中，並簡短描述運作概念
- 提交**文件連結及程式碼片段**（或者使用 Codepen 提交），並與同組成員分享
`sayYouLoveMe` 函式，回傳值可自行調整。
```
function sayYouLoveMe() {
return true;
}
```
範例 1：
if 判斷式：[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else#語法](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else#%E8%AA%9E%E6%B3%95)
```
function sayYouLoveMe() {
return true;
}
if (sayYouLoveMe()) { console.log('說你愛我') };
// 當判斷式接收到 sayYouLoveMe() 回傳 true 的結果時，則會運行接下來的陳述片段
```
範例 2：
三元運算子：[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
```
function sayYouLoveMe() {
return true;
}
console.log(sayYouLoveMe() ? '愛我' : '不愛我');
// sayYouLoveMe() 執行後回傳 true，接下來則會執行前者 '愛我' 的結果
```
測驗目標：
- 認識表達式
- 了解表達式可運作情境
## 6/12：Day 5
情境：小明默默的喜歡大他五歲的漂亮阿姨，但小明膽子很小不敢直接說，因此想要透過暗號的方式傳遞訊息給漂亮阿姨。
- 小明建立了一個暗號函式，傳入了一堆多餘的陣列，在解析後可以得到 '520' 的結果。
#### 初心者任務（完成此階段即算過關）：
- 僅能修改以下 `/* */` 片段，並使回傳的值為 "520"（不需理會陣列內的值）
#### 英雄任務：
- 僅能修改以下 `/* */` 片段
- 使用迴圈手法取出陣列內的 5, 2, 0 三個數值
- 使用陣列內的 5, 2, 0 組成一個新字串並回傳
#### 團隊遊戲：
已完成者，試著透過圖示說明這段函式及參數的**傳遞流程**，並分享給同組的成員。
```js
var arr = [{
using: true,
number: 5,
},{
using: false,
number: 4,
},{
using: false,
number: 3,
},{
using: true,
number: 2,
},{
using: false,
number: 1,
},{
using: true,
number: 0,
}];
function saySomething(cb, a) {
return cb(a);
}
var result = saySomething(/* 只能在此插入程式碼 */, arr);
console.log(result); // 結果必須為 520
```
這題因為比較難大家可以花些時間時間研究下 callback 的運作概念，如果不熟悉可不用急著今日回覆，試著閱讀以下文章並挑戰看看。
學習重點：
- callback function：[https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function](https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function)
- 迴圈取值：[https://wcc723.github.io/javascript/2017/06/29/es6-native-array/](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
下期預告：漂亮阿姨接收到訊息後有什麼回覆呢！？
解答（請盡可能不要看解答回覆）：[參數及函式的運作圖](https://firebasestorage.googleapis.com/v0/b/casper-de5d5.appspot.com/o/images%2Fblog%2F202006%2F%E8%B2%BC%E4%B8%8A%E7%9A%84%E5%BD%B1%E5%83%8F_2020_6_12_%E4%B8%8A%E5%8D%8810_30.png?alt=media&token=a4e0b030-9fab-4e2b-993b-5c73f43b4cf6)
```javascript=
var result = saySomething(() => {
var str = '';
arr.forEach((item) => {
if(item.using) {
str += item.number;
}
})
return str;
}, arr);
```
## 6/11：Day 4
真心鎮有一位 “小明”，是本系列故事的主角，生性害羞的他暗戀著大他五歲的 “漂亮阿姨”，在這個系列故事中就來看看 “小明” 能不能順利與 “漂亮阿姨” 表達愛慕之意，並且獲得正面的回覆喔 :D
任務：
- 認識居民
- 在新建居民的函式內調整程式碼，使其回傳一個完整的物件資料
- 條件：
- 不可操作全域的 town 變數
- 必須回傳一個結果
- 結果的 townData 必須與 town 相同（最後的相等）
- 使用 Codepen、JSBin 等服務繳交任務
```
var town = {
name: '真心鎮',
resident: []
}
var townData = {};
var Ming = { name: '小明', age: 16 };
var Auntie = { name: '漂亮阿姨', age: 21 };
function addResident(t, res1, res2) {
// 可以修改的片段
}
townData = addResident(town, Ming, Auntie);
console.log(townData === town);
console.log(townData.resident); // 包含真心鎮的居民陣列資料
```
測驗目標：
- 瞭解參數、回傳等技巧
- 熟悉物件參考的特性
- 觀念在影音課程中的物件、函式章節內
- 如果遇到任何問題，試著透過團隊的形式討論
結果範例：
解答：
```javascript=
function addResident(t, res1, res2) {
//方法一：
t.resident.push(res1)
t.resident.push(res2)
return t;
//方法二：
t.resident.push(res1, res2) // push 可推入多個值
return t;
}
```
## 6/10：Day 3
接續前一日的概念，請使用迴圈搭配陣列的方式，依序列出物件內所有的值。
1. 建立一個陣列，其中包含所有的屬性名稱
2. 使用 for 迴圈或 forEach 依序陳列出結果為 'a' ~ 'e' 的值
迴圈參考：[https://wcc723.github.io/javascript/2017/06/29/es6-native-array/](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
```js
var obj = {
a: 'a',
1: 'b',
'這是中文字': 'c',
'b': 'd',
'--some data': 'e'
}
var arr = ['a', '1', '這是中文字', 'b', '--some data'];
// 使用迴圈方法
console.log(...); // 請依序呈現出 “物件” 內的 a, b, c, d, e
```
提示：
1. 物件屬性都是字串
2. 使用 forEach 依序執行，並帶出物件內的值
答題重點：必須帶出 `obj` 物件內的值
解答：
```javascript=
//方法一：
var arr = ['a', '1', '這是中文字', 'b', '--some data'];
arr.forEach(item => {
console.log(obj[item]);
})
//方法二：
var arr = [];
// Object.values 可以直接撈出所有屬性並使用 sort 排序
Object.values(obj).sort().forEach(function(item) {
arr.push(item);
})
arr.forEach(function(item) {
console.log(item);
})
```
## 6/9：Day 2
物件中分為屬性及值，屬性可作為物件中的欄位名稱，而值是該屬性所代表的實際數值。其中 “屬性名稱” 在運作上都是以字串的形式儲存，因此只要是純文字，不管有沒有特殊符號都是可以運作的。
而物件中在取值時，最常使用的方式是點記號，不過點記號在存取時會有一些限制，當屬性名稱帶有特殊符號或數值時，就無法正確運作，所以除了點記號外還會利用變數、字串的方式取得值，概念如下：
```
var a = 'a';
var obj = {
a: 'value A',
}
// 以下三種可取得相同值
console.log(obj.a); // 點記號
console.log(obj['a']); // 使用字串
console.log(obj[a]); // 使用變數
```
請依照作業需求，使用不同的方式取得特定的值
```
var b = '這是中文字';
var arr = {
a: 'a',
1: 'b',
'這是中文字': 'c',
'b': 'd',
'--some data': 'e'
}
console.log(arr.a); // 'a'
console.log(); // 請取得結果為 b 的值
console.log(); // 請取得結果為 c 的值，必須使用變數
console.log(); // 請取得結果為 d 的值，必須使用點記號
console.log(); // 請取得結果為 e 的值
```
解答：
```javascript=
1) console.log(arr.a); // 'a'
2) console.log(arr['1']);
console.log(arr[1]); // 請取得結果為 b 的值
3) console.log(arr[b]); // 請取得結果為 c 的值，必須使用變數
4) console.log(arr.b); // 請取得結果為 d 的值，必須使用點記號
5) console.log(arr['--some data']); // 請取得結果為 e 的值
```
## 6/8：Day 1
在 JavaScript 中命名規範中，會建議使用駝峰式的命名，駝峰式的命名又分為大駝峰與小駝峰，可參考「[Wiki 上的介紹](https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB)」。大多數的情況來說，我們都會使用小駝峰來進行 JS 變數的命名。
如 **我的名字**可以使用 `myName` 的方式進行命名。另外，如果是函式時則會以動詞的方式作為開頭，如：**繪製圖表**使用 `renderChart` 的名稱。
以下請同學：
1. 宣告變數、函式，變數請給予值
2. 變數名稱請用小駝峰的方式定義，並以非動詞作為開頭
3. 函式請用動詞作為開頭
#### 題目：
```
變數：
1. 我的車子
2. 註冊時間
3. 清醒狀態
4. 家裡的啤酒
5. 啤酒品牌
函式：
1. 取得資料
2. 上傳圖片
3. 更新畫面
4. 喝酒
```
繳交範例：
```js
var myCar = '卡斯伯的車';
```
解答：
```javascript=
//變數：
1) var myCar= "Maserati"; //我的車子
2) var registrationTime = "20200615"; //註冊時間
3) var soberStatus = true; //清醒狀態
4) var beerAtHome = 20; //家裡的啤酒
5) var beerBrand = "Corona" //啤酒品牌
//函式：
1) function getData(){...}; //取得資料
2) function uploadImg(){...}; //上傳圖片
3) function reloadScreen(){...}; //更新畫面
4) function drinkBeer(){...}; //喝酒
```
Sign in with Wallet
Connect another wallet