---
# System prepended metadata

title: "\U0001F4AA 每日任務題目列表"
tags: [直播班]

---

---
tags: 直播班
---

# 💪 每日任務題目列表

## 7/15：Day 21

上回回顧：面臨真心鎮警衛隊追殺之際，小明與小美即將離開真心鎮，重新過上新的生活。

離開前，小明希望可以留給漂亮阿姨一些話，同時解決這段時間所產生的誤會。突然一個陌生的圓手，拿出了 Vue 傳呼機。

小明：J 個是...

陌生的圓手：這是 Vue 的傳呼機，可以用來遠距離通訊使用，不過有點故障，就送給你吧。

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/381a57b6-04a6-4bf9-aee3-8d68b0bcbe42/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/381a57b6-04a6-4bf9-aee3-8d68b0bcbe42/Untitled.png)

說完，這隻手就消失在這個故事裡，並找劇組領了便當回家用餐。

透過小明的研究，了解到這個傳呼機與最近研究的 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

![](https://i.imgur.com/uD7iszx.png)

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

![](https://i.imgur.com/uD7iszx.png)

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 技能的小美也難以應對這麼大量的警力...

小美：沒辦法了，只好用出這招（從背後拿出大捲軸攤開）

![](https://i.imgur.com/R6EGW8Y.png)

小明：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
小明再怎麼樣隱匿，還是躲不過警方的搜查，在警方發現小明就是匯款者前，小明也先找到空檔逃離了真心鎮，傷心、難過的小明也因此一無所有。

![](https://i.imgur.com/mcjuVUW.png)

離開真心鎮的小明在郊區遊蕩，身無分文、沒有求生技能的他，在六小時沒吃東西的情況下終於支撐不住，來到了一戶人家尋求協助，希望能夠填飽空腹已久的肚子，敲了敲門以後：

- 一位年輕的女孩：請問是哪裡找呢？
- 小明：...
- 一位年輕的女孩：請問有什麼事嗎？
- 小明：...

小明突然發現自己不能說話了！！沒有辦法跟女孩說到自己需要什麼，請協助小明說出自己的需求。

任務：
- 請修正以下程式碼錯誤，並執行 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); // 包含真心鎮的居民陣列資料
```

測驗目標：

- 瞭解參數、回傳等技巧
- 熟悉物件參考的特性
- 觀念在影音課程中的物件、函式章節內
- 如果遇到任何問題，試著透過團隊的形式討論

結果範例：
![](https://i.imgur.com/GAVpyNW.png)

解答：

```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` 物件內的值
![](https://i.imgur.com/oZ6AQJL.png)

解答：

```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(){...}; //喝酒
```
