---
# System prepended metadata

title: "\U0001F3C5 4/29 (四) 每日任務 Day 4"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 4/29 (四) 每日任務 Day 4
###### tags: `Vue 直播班 - 2021 夏季班`

教學
---
這題需要額外理解的知識點為「[callback 函式](https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function)」，可以簡單的理解為:「把函式作為參數調用」。
舉例: 
```js=
function greeting(arr) {
  alert('Hello ' + arr.name);
}
// callback 函式
function processUserInput(callback, arr) {
  callback(arr);
}

let arr = {name: "Jordan"};
// 在 callback 函式中調用 greeting 函式，並把 arr 也一併代入
processUserInput(greeting, arr);
```



題目 (使用 CodePen 作答)
---
以下 crowdAge 為部分民眾的年紀資料，請修改程式碼、篩選出屬性 age > 18 的陣列元素，並將它們一一加入 filterResult 這個陣列中。**(可以使用 [push()](https://wcc723.github.io/development/2020/10/04/js-array-methods/#Array-prototype-push) 或是 [filter() 函式](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/))**


```js=
let crowdAge = [
  {
    name: 'Rick',
    age: 17
  },
  {
    name: 'Jane',
    age: 25
  },
  {
    name: 'Jordan',
    age: 19
  },
  {
    name: 'Jack',
    age: 7
  },
  {
    name: 'Reol',
    age: 27
  }
]

// callback 函式
function ageFilterCB(cb, arr) {
  return cb(arr);
}

function ageFilter(arr) {
  /* 只能在此插入程式碼 */
}

let filterResult = [];
filterResult = ageFilterCB(ageFilter, crowdAge);
console.log(filterResult); /* 為陣列，內容包含屬性 age > 18 的 crowdAge 元素 */
```

回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

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

<!-- 解法一
function ageFilter(arr) {
  let target = arr.filter(item => item.age > 18);
  return target;
}
-->

<!-- 解法二
function ageFilter(arr) {
  let target = [];
  arr.forEach(item => {
  	if(item.age > 18) {
    	target.push(item);
    }
  })
  return target;
}
-->

回報區
---
<!--1:alpha
codepen:https://codepen.io/alphatero/pen/abprNqe
-->

<!-- 2: Vic
codepen: https://codepen.io/hsuan333/pen/zYNQqWV
-->

<!--3:Jasmin
codepen:https://codepen.io/thejasmin/pen/gOLaQva?editors=0011
-->
<!-- 4: 小魚
codepen: https://codepen.io/jarvis1993/pen/ExZzKOY?editors=0011
-->

<!-- 5: Alysa Chan 
codepen: https://codepen.io/alysachan/pen/wvgbWwX?editors=0011
-->

<!-- 6: Jrhung-Tsai
codepen: https://codepen.io/Araytsai/pen/MWJdeKN?editors=0001
-->

<!-- 7: Chou Allen
codepen: https://codepen.io/eepson123tw/pen/jOyorMR?editors=1112
-->

<!-- 8: Yiren
codepen: https://codepen.io/Yiren_Liou/pen/BapeKEr?editors=0011
-->

<!-- 9: kevin嘉軒
codepen: https://codepen.io/kevin-chang-the-sasster/pen/vYgwKZp
-->

<!-- 10: tim Chou
codepen: https://codepen.io/tim-chou/pen/XWpwKgX?editors=1012
-->

<!-- 11: Harold
Codepen: https://codepen.io/YuWin0805/pen/VwPOjMr
-->

<!-- 11: Tori
Codepen: https://codepen.io/hayen/pen/poRYxEQ?editors=0011
-->

<!-- 12: leolee
Codepen: https://codepen.io/nekorice/pen/yLgWOpR
-->

<!--13: yijun
CodePen:
https://codepen.io/sandy3068/pen/KKaLMjd?editors=1111
-->

<!--14:Eva lin
CodePen:
https://codepen.io/evalin0316/pen/WNRBGbb?editors=1111
-->

<!--15: Yi Chieh
CodePen:
https://codepen.io/Yi-Chieh/pen/OJWYRye
-->

<!-- 16: Ethan
Codepen: https://codepen.io/blazer030/pen/QWdRKdN
-->

<!-- 17: youting
Codepen: https://codepen.io/youtingluo/pen/PoWvGjY?editors=0012
-->

<!-- 18: Chiang
Codepen: https://codepen.io/ChiangJ/pen/dyNEpEB?editors=1011
-->

<!-- 19: Echo Hui
Codepen: https://codepen.io/echohuiecho/pen/NWdVbqg-->

<!-- 20: shoppingq
Codepen: https://codepen.io/shoppingq/pen/qBRGqjW-->

<!-- 21: Iven
有些問題留在註解裡面，再麻煩助教幫我解答，謝謝。
Codepen: https://codepen.io/rtorihnk/pen/JjEqbJg?editors=0011-->

<!-- 22: Larry
Codepen: 
https://codepen.io/manpower0708/pen/mdRYOqO?editors=0011 -->



<!-- 23: Ray
Codepen: 
https://codepen.io/posidomcode/pen/zYNQojV -->

<!-- 24: Erica
Codepen: https://codepen.io/ericadu/pen/YzNbpJp -->

<!-- 25: Oober
Codepen: https://codepen.io/travis18/pen/PoWvbpW?editors=1112
-->

<!-- 26: Ted Kuo
Codepen: https://codepen.io/TedKuo/pen/BapepwG
-->

<!-- 27: Eric-小偉哥
Codepen: https://codepen.io/ericLoveDesign/pen/zYNQNmN?editors=1111
-->

<!--28: Joe Kuo
codepen: https://codepen.io/alertislow/pen/dyNEvNg?editors=0011
-->

<!--29: Alvin_Chu
CodePen:https://codepen.io/wave99487chu/pen/MWJdmaG
-->

<!-- 30:peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/wvgbevX?editors=0012
-->

<!-- 31: Izumi 泉
CodePen: https://codepen.io/izumi-dev/pen/bGgyRZP
-->

<!-- 32: Sec
CodePen: https://codepen.io/Sentiments/pen/rNjgGGo?editors=1111
-->

<!-- 33: Alicia Lo
CodePen: https://codepen.io/dkcyhyre/pen/BapedRa
-->

<!-- 34: Amanda Chiang
CodePen: https://codepen.io/cym199922/pen/jOyoYow?editors=0011
-->

<!-- 34: jimmyfang
CodePen: https://codepen.io/pohxiqqo/pen/RwKmQxR?editors=0001
-->

<!-- 35: Lina Chen
CodePen: https://codepen.io/LinaChen/pen/bGgyLLY
-->

<!-- 36: Jessie Cheng
CodePen: https://codepen.io/JessieMosbi/pen/bGgyvyP?editors=1111
-->

<!-- 37: YOYO
CodePen: https://codepen.io/lumedkle/pen/ExZzLoQ?editors=1111
-->

<!-- 38: Ed Huang
CodePen: https://codepen.io/yide1986/pen/eYgarLe?editors=0012
-->

<!-- 39: Pon Peng
CodePen: https://codepen.io/pengpon77/pen/MWJdXLZ?editors=0012
-->

<!-- 40: 圈圈
CodePen: https://codepen.io/wei-the-lessful/pen/NWdVmdP?editors=0011
-->

<!-- 41: Wendy Li
CodePen: https://codepen.io/rockayumitw/pen/rNjgEWB?editors=0011
-->

<!--42:Wu Jung Han
codepen: https://codepen.io/JungHanWu/pen/JjEqgPy?editors=0012
-->

<!--43: Fred Chang
Codepen:https://codepen.io/fred8196/pen/ExZzqeE?editors=0010
-->
<!--44: 班尼
Codepen:https://codepen.io/fttp0165/pen/oNBrNwB?editors=1112
-->


<!--45: Jemma
Codepen:https://codepen.io/Jemma9/pen/eYgawPp?editors=0010
-->

<!--46： RitaHunag
Codepen： https://codepen.io/Rita-Rossweisse/pen/jOyopjO?editors=0011
-->

<!--47: 阿倫
Codepen:https://codepen.io/jason5125122/pen/KKajQqX
-->

<!--48: Carrie
Codepen:https://codepen.io/echocarriet/pen/JjEQLrX
-->

<!--49: Amber
Codepen:https://codepen.io/amberTing/pen/poRXxPW?editors=0011
-->
<!--50:陳sam
Codepen:https://codepen.io/euldpliv/pen/oNBKXxJ?editors=1111
-->


<!-- 51: Stacey Huang
Codepen:https://codepen.io/staceyhuang/pen/MWJNyJE?editors=0001
-->
<!-- 52: Li Shang
Codepen:https://codepen.io/li-shang/pen/mdRNmdY
-->
<!--53: Olga
Codepen:https://codepen.io/heavenbird_0221/pen/GRrVmoV?editors=1111
-->

<!--54: Dah
Codepen:https://codepen.io/hua0124/pen/KKaOvPL
-->

<!--55:家齊
Codepen:https://codepen.io/jacky298/pen/wvgVqQV
-->

<!--56:Jordan Tseng
Codepen:https://codepen.io/jordan-ttc-design/pen/MWJNErr?editors=1012
-->
<!--報數 57:Jack
Codepen:https://codepen.io/yxzzktmb/pen/VwPoyoE
-->

<!--報數 58:Echo
Codepen:
https://codepen.io/pen/?editors=1112
-->

<!--報數 59:Patrick
Codepen:
https://codepen.io/argent1027/pen/GRrVGXp?editors=0011
-->

<!--報數 60:moitw
Codepen:
https://codepen.io/tsuifei/pen/xxgveaL?editors=1111
-->

<!-- 報數61: Wei 
CodePen: https://codepen.io/uwhhiaxx/pen/xxgvPMV?editors=0012
-->

<!--62:李重炫
codepen:https://codepen.io/otherway1123/pen/bGqbgyK?editors=1011
-->

<!--63:涂阿銘
codepen:https://codepen.io/asd40441/pen/xxqKqgE?editors=0011
-->

<!-- 64: Sean Liu
codepen: https://codepen.io/LuckyTiger/pen/PopYBgJ
-->

<!--
報數 65 : Valerie
codepen: https://codepen.io/vicky-chang/pen/LYWPJbb?editors=1012
-->

<!--
報數 66 : Eyan
codepen: https://codepen.io/somebody1997/pen/OJpJQmG?editors=1011
-->
<!-- 報數 67: Josh Fang
function ageFilter(arr) {
  let result = arr.filter(item => item.age > 18);
  
  return result;
}
codepen:
https://codepen.io/joshfang-the-encoder/pen/abJbqdW?editors=1113
-->
<!--
報數 68 : Chiayu
codepen: https://codepen.io/alphatero/pen/abprNqe?editors=0011
-->

<!--
報數 69 : Channing
codepen: https://codepen.io/Channing/pen/VwpYPNY
-->

<!--
報數 70 : twoz
codepen: https://codepen.io/twoz/pen/oNZgqwm?editors=0012
-->


<!--
報數 71 : Tofu Tseng
codepen: https://codepen.io/Tofutseng/pen/YzZPRKR?editors=0001
-->

<!--
報數 72 : Jay
codepen: https://codepen.io/jayredk/pen/jOBPEQe?editors=1012
-->

<!--
報數 73 : FuChang
CodePen: https://codepen.io/fuchang830714/pen/yLgmGEY
-->

<!--
報數 74 : Carol
CodePen: https://codepen.io/taonong/pen/XWMmMbq
-->

<!--
報數 75: MM
codePen: https://codepen.io/MINN3/pen/JjWGmjQ
-->

<!-- 報數 76： 田
codepen: https://codepen.io/ccyy915/pen/eYvZYJm
-->

<!-- 報數 77： Eason
codepen: https://codepen.io/alanwu0828/pen/poezQeL?editors=0012
-->

<!-- 報數 78: Andrew Chi
codePen:
https://codepen.io/wheresandrew/pen/yLMJwgZ
-->

<!-- 報數 79: kevinhes
codepen:
https://codepen.io/dwpwdpad/pen/dyvXxyV?editors=1011
-->

<!-- 報數 80: Emily Hsi
codepen:
https://codepen.io/EmilyHsi/pen/NWpbvOZ
-->

<!-- 報數 81: Butters
codepen:
https://codepen.io/Butterscode/pen/abJWLQW
-->

<!-- 報數 82: Shino
codepen:
https://codepen.io/shiiinnooo/pen/poeyprR
-->

<!-- 報數 83: WA
codepen:
https://codepen.io/ldddl/pen/ZEKzabz?editors=0010
-->
<!-- 報數 84: yolala
codepen:

https://codepen.io/chiakilalala/pen/qBxxoOV?editors=1011
-->
