# 🏅 5/3 (一) 每日任務 Day 6 ###### tags: `Vue 直播班 - 2021 夏季班` 參考文章: https://wcc723.github.io/javascript/2017/06/29/es6-native-array #### filter 介紹 > 1. 為 JavaScript 的陣列方法,可以用來「篩選陣列元素」。 > 2. 不會影響原來的陣列,而是會透過函式內所回傳的值組合成一個新的陣列。 舉例: ```js= let price = [900, 1000, 400, 200, 100]; let newPrice = price.filter(item => { // 會篩選出「判斷為 true 的陣列元素」 return item > 300; }) console.log(price); // 結果為: [900, 1000, 400, 200, 100] console.log(newPrice); // 結果為: [900, 1000, 400] ``` 題目 (使用 CodePen 作答) --- 請使用 filter() 操作 array 陣列,篩選出屬性 age <= 18 的陣列元素有哪些,並指派給 newArray。 ```js= const array = [ { name: '小明', age: 18 }, { name: '小美', age: 15 }, { name: '杰倫', age: 19 }, { name: '漂亮阿姨', age: 22 }, { name: '老媽', age: 28 } ]; let newArray = []; ``` 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式如下圖,請在「回報區」使用註解回報答案 (為了統計人數,請同學依序加上「報數」) ![](https://i.imgur.com/L7kyew8.png) <!-- 解答 let newArray = array.filter(item => item.age <= 18) console.log(newArray); --> 回報區 --- <!--01:Jasmin codepen:https://codepen.io/thejasmin/pen/WNoZyZL?editors=0011 --> <!--02:陳sam codepen:https://codepen.io/euldpliv/pen/eYgqvKB?editors=1111 --> <!--03:yijun codepen:https://codepen.io/sandy3068/pen/eYgqvPg?editors=1111 --> <!--04:kevin嘉軒 codepen:https://codepen.io/kevin-chang-the-sasster/pen/rNjXyqy --> <!--05:小魚 codepen:https://codepen.io/jarvis1993/pen/xxgvqaP?editors=0011 --> <!--06:chou allen codepen: https://codepen.io/eepson123tw/pen/JjEgWmM?editors=0001 --> <!--07:Eric-小偉哥 codepen: https://codepen.io/ericLoveDesign/pen/MWJNpZb?editors=1111 --> <!--08:Ethan codepen: https://codepen.io/blazer030/pen/poRMeGb --> <!--09:LiShang codepen:https://codepen.io/li-shang/pen/vYgoxaV --> <!--10:Iven codepen:https://codepen.io/rtorihnk/pen/ZELgedK?editors=1011 --> <!--11:Amanda Chiang codepen: https://codepen.io/cym199922/pen/OJWKmLL?editors=0011 --> <!--12 tim Chou codepen:https://codepen.io/tim-chou/pen/abpeWoq?editors=1112 --> <!--13 Olga codepen:https://codepen.io/heavenbird_0221/pen/wvgVdBa?editors=1111 --> <!--14 YOYO codepen:https://codepen.io/lumedkle/pen/zYNgwvR?editors=1111 --> <!--15 youting codepen:https://codepen.io/youtingluo/pen/ZELgKQJ?editors=1012 --> <!--16:Harold Codepen: https://codepen.io/YuWin0805/pen/gOgVWrY --> <!--17: Jrhung-Tsai Codepen: https://codepen.io/Araytsai/pen/JjEgNRa?editors=0011 --> <!--18: Vic Codepen: https://codepen.io/hsuan333/pen/yLgmbMo --> <!-- 19: Sec Codepen: https://codepen.io/Sentiments/pen/JjEgNVq?editors=1111 --> <!-- 20: Chiang Codepen: https://codepen.io/ChiangJ/pen/GRrVEKj?editors=0011 --> <!-- 21: leo lee Codepen: https://codepen.io/nekorice/pen/oNBKwvN --> <!-- 22: Lina Chen Codepen: https://codepen.io/LinaChen/pen/bGgXRGr --> <!-- 23: peter.chen1024 codepen: https://codepen.io/JIAN-RONG/pen/ExZqXaJ?editors=0012 --> <!-- 24: Alysa Chan codepen: https://codepen.io/alysachan/pen/LYxwyvw?editors=0001 --> <!-- 25: Joe Kuo codepen: https://codepen.io/alertislow/pen/NWdQgdy?editors=0011 --> <!-- 26: shoppingq codepen: https://codepen.io/shoppingq/pen/ZELgyLw --> <!-- 27: Dah codepen: https://codepen.io/hua0124/pen/zYNgzEg --> <!-- 28: Wu Jung Han codepen: https://codepen.io/JungHanWu/pen/NWdQgaM?editors=0012 --> <!-- 29: JessieCheng codepen: https://codepen.io/JessieMosbi/pen/poRMwWQ?editors=0011 --> <!-- 30: Larry codepen: https://codepen.io/manpower0708/pen/KKaOqJE?editors=1011 --> <!-- 31: Alvin Chu codepen:https://codepen.io/wave99487chu/pen/XWpvaJX --> <!-- 32: Carrie codepen: https://codepen.io/echocarriet/pen/zYNgdoK --> <!-- 33: Erica Codepen: https://codepen.io/ericadu/pen/xxgvLgq --> <!-- 34: Echo Codepen: https://codepen.io/echohuiecho/pen/KKaOvvK?editors=0011--> <!-- 35: Yu Chien Codepen: https://codepen.io/yu_chien/pen/gOgVxvZ?editors=0011 --> <!-- 36: Fred Chang CodePen: https://codepen.io/fred8196/pen/ExZqvqo --> <!-- 37: 阿倫 CodePen: https://codepen.io/jason5125122/pen/RwKXLRm --> <!-- 38: 家齊 Codepen:https://codepen.io/jacky298/pen/eYgqGrr --> <!-- 39: Yi Chieh Codepen:https://codepen.io/Yi-Chieh/pen/GRrVOME?editors=1011 --> <!-- 40: Amber Codepen:https://codepen.io/amberTing/pen/bGgXYQj?editors=1011 --> <!-- 41: Alicia Lo Codepen:https://codepen.io/dkcyhyre/pen/zYNgzpO --> <!-- 42:Alpha codepen:https://codepen.io/alphatero/pen/PoWMQBN --> <!-- 43: Izumi 泉 CodePen: https://codepen.io/izumi-dev/pen/gOgEZzM --> <!-- 44: Pon Peng CodePen: https://codepen.io/pengpon77/pen/KKaORwL?editors=0011 --> <!-- 44: jimmyFang CodePen: https://codepen.io/pohxiqqo/pen/ZELgoLb?editors=0012 --> <!-- 45: Oober CodePen:https://codepen.io/travis18/pen/oNBKdze --> <!-- 46: Wendy Li CodePen: https://codepen.io/rockayumitw/pen/BapXVBB?editors=0011 --> <!-- 47: Echo CodePen: https://codepen.io/bcq65958/pen/zYNgaqp?editors=1112 --> <!-- 48: RitaHuang CodePen: https://codepen.io/Rita-Rossweisse/pen/abpeKNY?editors=0012 --> <!-- 49: Patrick CodePen: https://codepen.io/argent1027/pen/jOygpLp?editors=1011 --> <!-- 50: Ray CodePen: https://codepen.io/codeocean9/pen/PoWMdJx --> <!-- 51: Ed Huang CodePen:https://codepen.io/yide1986/pen/xxgvaRg?editors=0012 --> <!-- 52: moitw CodePen: https://codepen.io/tsuifei/pen/BapXEEg?editors=0012 --> <!-- 53: 圈圈 CodePen: https://codepen.io/wei-the-lessful/pen/dyvbPyv --> <!-- 54: Ted Kuo CodePen: https://codepen.io/TedKuo/pen/xxqKVyy --> <!-- 55: Stacey Huang Codepen: https://codepen.io/staceyhuang/pen/XWMrKwr?editors=1011 --> <!-- 56: Jack Codepen: https://codepen.io/yxzzktmb/pen/MWpgjeN?editors=1111 --> <!-- 57: 李重炫 Codepen: https://codepen.io/otherway1123/pen/ZEezeOz?editors=1011 --> <!-- 58: 涂阿銘 Codepen: https://codepen.io/asd40441/pen/oNZvZqG?editors=0011 --> <!--59: SeanLiu codepen:https://codepen.io/sandy3068/pen/GRWKYKw --> <!--60: Tori codepen:https://codepen.io/hayen/pen/poRYxEQ?editors=0012 --> <!-- 報數 61 : Valerie codepen: https://codepen.io/vicky-chang/pen/dyvbgMK?editors=1012 --> <!-- 報數62: Wei CodePen: https://codepen.io/uwhhiaxx/pen/XWMrGxQ?editors=0012 --> <!-- 報數63: Josh Fang 答案 let newArray = array.filter(item => (item.age <= 18)); --> <!-- 報數 64 : Yiren codepen: https://codepen.io/Yiren_Liou/pen/ExWaVxE?editors=0012 --> <!-- 報數 65 : Chiayu codepen: https://codepen.io/c85771029/pen/QWpwGjR --> <!-- 報數 66 : Channing codepen: https://codepen.io/Channing/pen/eYvmvBX --> <!-- 報數 67 : Tofu Tseng codepen: https://codepen.io/Tofutseng/pen/gOmbQPV?editors=0011 --> <!-- 報數 68 : twoz codepen: https://codepen.io/twoz/pen/ExWjagJ?editors=0012 --> <!-- 報數 69 : Jay codepen: https://codepen.io/jayredk/pen/PopqwgE?editors=1011 --> <!-- 報數 70 : FuChang CodePen: https://codepen.io/fuchang830714/pen/vYxYQgB --> <!-- 報數 71 : Carol CodePen: https://codepen.io/taonong/pen/zYZvZae --> <!-- 報數 72: MM codePen: https://codepen.io/MINN3/pen/JjWGmjQ --> <!-- 報數 73:田 codepen https://codepen.io/ccyy915/pen/OJpNJzr --> <!-- 報數 74: Andrew Chi codePen:https://codepen.io/wheresandrew/pen/rNyLEeb --> <!-- 報數 75:kevinhes codepen: https://codepen.io/dwpwdpad/pen/yLMavyg?editors=1011 --> <!-- 報數 75:Emily Hsi codepen: https://codepen.io/EmilyHsi/pen/QWpGqwb --> <!-- 報數 76:Butters codepen: https://codepen.io/Butterscode/pen/wvJdPBV --> <!-- 報數 77:WA codepen: https://codepen.io/ldddl/pen/WNjeXZW?editors=0010 --> <!-- 報數 78:yolala codepen: https://codepen.io/chiakilalala/pen/zYRjjmL -->