# 🏅 4/28 (三) 每日任務 Day 3 ###### tags: `Vue 直播班 - 2021 夏季班` 小教學 --- #### Object.keys(), Object.values() 介紹 * Object.keys() 可以取得指定物件的所有 key 值,並回傳一個陣列。 * Object.values() 可以取得指定物件的所有 value 值,並回傳一個陣列。 ```js= const object1 = { a: "字串", b: 42, c: false }; console.log(Object.keys(object1)); // 結果: ["a", "b", "c"] console.log(Object.values(object1)); // 結果: ["字串", 42, false] ``` 題目 (使用 CodePen 作答) --- 接續 Day2 的每日任務,請同學透過以下物件執行題目要求: 1. 建立一個陣列,其中包含所有的屬性名稱 (需使用 Object.keys)。 2. 建立一個陣列,其中包含所有的屬性值 (需使用 Object.values)。 3. 承接第 1 題,透過 forEach、使用 console.log 輸出陣列的所有屬性名稱。 4. 承接第 2 題,透過 for 迴圈、使用 console.log 輸出陣列的所有屬性值。 迴圈參考: https://wcc723.github.io/javascript/2017/06/29/es6-native-array/ ```js= let obj = { a: 'a', 1: 'b', '這是中文字': 'c', 'b': 'd', '--some data': 'e' } ``` 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式如下圖,請在「回報區」使用註解回報答案 (為了統計人數,請同學依序加上「報數」) ![](https://i.imgur.com/L7kyew8.png) <!-- 解答 // 1 let objKeys = Object.keys(obj); // 2 // 補充: 可以用 sort() 針對陣列內容進行排序 let objValues = Object.values(obj).sort(); // 3 objKeys.forEach((item) => { console.log(item); }) // 4 for (let i = 0; i < objValues.length; i++) { console.log(objValues[i]); } --> 回報區 --- <!-- 1: alpha codepen: https://codepen.io/alphatero/pen/mdRgMvV --> <!-- 2: youting codepen: https://codepen.io/youtingluo/pen/eYgoEqP?editors=0012 --> <!-- 3: jasmin codepen: https://codepen.io/thejasmin/pen/abmrKyd?editors=0011 --> <!-- 4: kevin嘉軒 codepen: https://codepen.io/kevin-chang-the-sasster/pen/eYgoGZb --> <!-- 3. 家齊 codepen:https://codepen.io/jacky298/pen/eYgoEoL --> <!-- 5: Alysa Chan codepen: https://codepen.io/alysachan/pen/qBRwPaB?editors=0011 --> <!-- 6: Li Shang codepen: https://codepen.io/li-shang/pen/OJWGxPp --> <!-- 7: Vic codepen: https://codepen.io/hsuan333/pen/abpxyQP?editors=1112 --> <!-- 8: Ethan codepen: https://codepen.io/blazer030/pen/BapEwGx --> <!-- 9: Lina Chen https://codepen.io/LinaChen/pen/qBRwPJN --> <!-- 10: Jemma https://codepen.io/Jemma9/pen/JjEVrvY?editors=0010 --> <!-- 11: Amanda Chiang https://codepen.io/cym199922/pen/WNRWZyg?editors=0011 --> <!-- 12: Yiren https://codepen.io/Yiren_Liou/pen/JjEVrmX?editors=0012 --> <!-- 13: WA codepen: https://codepen.io/ldddl/pen/WNRWXrm?editors=0010 --> <!-- 14: Chiayu codepen: https://codepen.io/c85771029/pen/PoWgOqB --> <!-- 15: 全職鬥士 / Tori codepen: https://codepen.io/hayen/pen/poRYxEQ?editors=1011 --> <!-- 16: chou Allen codepen: https://codepen.io/eepson123tw/pen/ZELZaYE?editors=1111 --> <!-- 17:Eva lin codepen:https://codepen.io/evalin0316/pen/yLgrpLg?editors=1111 --> <!-- 18:Wu Jung Han codepen:https://codepen.io/JungHanWu/pen/NWdmXrN?editors=0012 --> <!-- 19:Joe Kuo codepen:https://codepen.io/alertislow/pen/JjEVMEa?editors=1011 --> <!-- 20:shoppingq codepen:https://codepen.io/shoppingq/pen/MWJRrQO --> <!-- 21: Erica codepen: https://codepen.io/ericadu/pen/jOyRYmy --> <!-- 22: Yu Chien Codepen: https://codepen.io/ABURA/pen/yLgrvVx?editors=0011 --> <!-- 23: Izumi 泉 Codepen: https://codepen.io/izumi-dev/pen/gOgEZzM --> <!-- 24: Sec Codepen: https://codepen.io/Sentiments/pen/poRBaNZ --> <!-- 25: Iven Codepen: https://codepen.io/rtorihnk/pen/zYNXPGq?editors=0011 --> <!-- 26: 小魚 Codepen: https://codepen.io/jarvis1993/pen/xxgeWPr?editors=0010 --> <!-- 27: zhfino Codepen: https://codepen.io/zhfino/pen/qBRwooV --> <!-- 28: Larry Codepen: https://codepen.io/manpower0708/pen/jOyRYWM?editors=1112 --> <!-- 29: peter.chen1024 Codepen: https://codepen.io/JIAN-RONG/pen/yLgrKLm?editors=0012 --> <!-- 30: peter.chen1024 Codepen: https://codepen.io/JIAN-RONG/pen/yLgrKLm?editors=0012 --> <!-- 31: peter.chen1024 Codepen: https://codepen.io/JIAN-RONG/pen/yLgrKLm?editors=0012 --> <!-- 32: Dah Codepen: https://codepen.io/hua0124/pen/RwKOyWO --> <!-- 33: Jordan Tseng Codepen: https://codepen.io/jordan-ttc-design/pen/MWJRGvE?editors=0001 --> <!-- 34: Chiang Codepen: https://codepen.io/ChiangJ/pen/RwKOyeN?editors=1011 --> <!-- 35: Eason Codepen: https://codepen.io/alanwu0828/pen/YzNMLwB?editors=0012 --> <!-- 36: Carrie codepen: https://codepen.io/echocarriet/pen/qBRwyER --> <!-- 37: Yi Chieh Codepen: https://codepen.io/Yi-Chieh/pen/WNRWdmE --> <!-- 38: Alvin_Chu CodePen:https://codepen.io/wave99487chu/pen/BapEOKy --> <!-- 39: 圈圈 CodePen:https://codepen.io/wei-the-lessful/pen/GRrLXmK --> <!-- 40: Eric-小偉哥 CodePen:https://codepen.io/ericLoveDesign/pen/vYgMzrB?editors=1111 --> <!-- 41: Alicia Lo CodePen:https://codepen.io/dkcyhyre/pen/JjEVBvr --> <!--42:yijun CodePen:https://codepen.io/sandy3068/pen/jOyRQOJ --> <!--43: Echo CodePen: https://codepen.io/echohuiecho/pen/rNjbqQX --> <!--44: leolee CodePen: https://codepen.io/nekorice/pen/mdRgQwK --> <!--45: Wendy Li CodePen: https://codepen.io/rockayumitw/pen/QWdPzxp?editors=0011--> <!--46: Harold CodePen: https://codepen.io/YuWin0805/pen/mdRgoKG --> <!--46: jimmyFang CodePen: https://codepen.io/pohxiqqo/pen/wvgZOOV?editors=0010 --> <!--48: 班尼 CodePen: https://codepen.io/fttp0165/pen/BapEbeg?editors=1111 --> <!--49: JessieCheng CodePen: https://codepen.io/JessieMosbi/pen/xxgeexY?editors=0011 --> <!--50: Jrhung-Tsai CodePen: https://codepen.io/Araytsai/pen/yLgrryV?editors=0011 --> <!--51: Ed Huang CodePen: https://codepen.io/yide1986/pen/PoWggRq?editors=0012 --> <!--52: YOYO CodePen: https://codepen.io/lumedkle/pen/bGgJJop?editors=1111 --> <!--53: RitaHauang CodePen: https://codepen.io/Rita-Rossweisse/pen/ZELZZwx?editors=1011 --> <!--54: Stacey Huang CodePen: https://codepen.io/staceyhuang/pen/GRrLVjb?editors=1111 --> <!--55: Oober CodePen: https://codepen.io/travis18/pen/ExZzxKK?editors=1111 --> <!--55: tim Chou CodePen: https://codepen.io/tim-chou/pen/NWdVrrE?editors=1112 --> <!--55: Ray CodePen: https://codepen.io/posidomcode/pen/RwKmogR --> <!-- 56: Ted Kuo CodePen: https://codepen.io/TedKuo/pen/NWdVdGO --> <!-- 57: Pon Peng CodePen: https://codepen.io/pengpon77/pen/jOyoKQp?editors=0011 --> <!-- 58: Fred Chang https://codepen.io/fred8196/pen/XWpwBXW?editors=0012 --> <!-- 59: 阿倫 codepen:https://codepen.io/jason5125122/pen/poRXpMP --> <!-- 60: FuChang CodePen: https://codepen.io/fuchang830714/pen/oNBrprJ --> <!-- 61: Amber CodePen: https://codepen.io/amberTing/pen/zYNVmrj?editors=0001 --> <!-- 62: 楊凱傑 CodePen: https://codepen.io/kj25940858/pen/gOgNMXe --> <!-- 63: 陳sam CodePen:https://codepen.io/euldpliv/pen/NWdQqgb?editors=1111 --> <!-- 報數64: Wei CodePen: https://codepen.io/uwhhiaxx/pen/BapXmwJ?editors=0012 --> <!-- 報數65: Jack CodePen: https://codepen.io/yxzzktmb/pen/VwPoyxx?editors=0011 --> <!-- 報數66: 涂阿銘 CodePen: https://codepen.io/asd40441/pen/jOygzLp?editors=0011 --> <!-- 報數67:Ecjo CodePen: https://codepen.io/pen/?editors=1112 --> <!-- 報數68:Patrick CodePen: https://codepen.io/argent1027/pen/VwPodXJ?editors=1011 --> <!-- 報數69:moitw CodePen: https://codepen.io/tsuifei/pen/XWpvxQx?editors=0012 --> <!-- 報數70:李重炫 CodePen: https://codepen.io/otherway1123/pen/XWMrpZQ?editors=1011 --> <!-- 報數71: Sean Liu codepen: https://codepen.io/LuckyTiger/pen/NWpKBBy --> <!-- 報數 72 : Valerie codepen: https://codepen.io/vicky-chang/pen/RwpbYNg?editors=1012 --> <!-- 報數 73 : Eyan codepen: https://codepen.io/somebody1997/pen/mdWdpMB?editors=1011 --> <!-- 報數 74: Josh Fang // 1 let objKeys = Object.keys(obj); // 2 let objValues = Object.values(obj); // 3 objKeys.forEach(item => console.log(item)); // 4 for (let i = 0, item; item = objValues[i]; i += 1) { console.log(item); } codepen: https://codepen.io/joshfang-the-encoder/pen/abJbqdW?editors=1112 --> <!-- 報數75: ted31539 codepen: https://codepen.io/Ted31539/pen/BaWaEOP --> <!-- 報數76: twoz codepen: https://codepen.io/twoz/pen/mdWdgzp?editors=0012 --> <!-- 報數77: channing codepen: https://codepen.io/Channing/pen/Rwpwdva --> <!-- 報數78: Tofu Tseng codepen: https://codepen.io/Tofutseng/pen/dyvPJBW?editors=0011 --> <!-- 報數 79: Jay codepen: https://codepen.io/jayredk/pen/vYxOEjy?editors=1111 --> <!-- 報數 79: Carol codepen: https://codepen.io/taonong/pen/eYvpgeW --> <!-- 報數 80: 田 codePen: https://codepen.io/ccyy915/pen/QWpybEx --> <!-- 報數 81: MM codePen: https://codepen.io/MINN3/pen/JjWGmjQ --> <!-- 報數 82 : Shino codePen: https://codepen.io/shiiinnooo/pen/vYxGeqm?editors=0012 --> <!-- 報數 83: Andrew Chi codePen: https://codepen.io/wheresandrew/pen/QWpEyrN --> <!-- 報數 84:kevinhes codePen: https://codepen.io/dwpwdpad/pen/QWpEXqZ?editors=1011 --> <!-- 報數 85:Emily Hsi codePen: https://codepen.io/EmilyHsi/pen/wvJoqmN --> <!-- 報數 86:yolala codePen: https://codepen.io/chiakilalala/pen/ZErrObB?editors=0001 -->