# 🏅 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'
}
```
回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

<!-- 解答
// 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
-->