# 🏅 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 -->