---
# System prepended metadata

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

---

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


