【Javascript】for of (keys,values,entries)ー 学習ノート2

# 初めに
for of文のkeys,values,entriesについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の関連記事：
https://qiita.com/redrabbit1104/items/40f3e2aa6cd4361150ee
https://qiita.com/redrabbit1104/items/374fc9cc0c0408f51e66
https://qiita.com/redrabbit1104/items/0874b419451ba0b99ef2

# for of文のkeys,values,entriesの練習
bookStoreというオブジェクトにmon,tue,sunというkeysとそれに対するopenとcloseを含むvaluesがあるとします。

```javascript
const bookStore = {
        mon: { open: 10, close: 20 },
        tue: { open: 11, close: 19 },
        sun: { open: 0, close: 20 },
};
```
ここでkeysを使いbookStoreのキーの値をpropsに格納し、画面に表示してみます。

```javascript
const props = Object.keys(bookStore);
console.log(props);
```
propsの中身は配列であり、mon,tue,sunが入っています。
![スクリーンショット 2021-05-31 8.09.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/4978db88-c70e-7c7c-6f18-699f5ee9c06d.png)
1週間に何日間営業しているのかは、このpropsの配列の長さで求めることができます。

```javascript
let numOpenDays = `${props.length} days`;
console.log(numOpenDays);
```
![スクリーンショット 2021-05-31 8.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/0d5ede01-fc89-17e9-3bf1-f3a136c18612.png)

propsにはbookStoreのキーの値が配列という形で入っていたので、その配列の値をfor ofを使って表示してみました。

```javascript
for (const day of props) {
        openStr += `${day}  `;
}

console.log(openStr);
```
配列の値mon, tue, sunが表示されました。
![スクリーンショット 2021-05-31 8.26.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/146e7b22-804c-c013-21f9-2d98e3faa298.png)

次にvaluesを試してみました。

```javascript
const val = Object.values(bookStore);
console.log(val);
```
今回はbookStoreのvalues(値）が配列という形で表示されます。数また、valuesはobjectの形なので{}に囲まれています。

![スクリーンショット 2021-05-31 8.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/0874e9e3-e904-a450-ba07-c9e33271fc50.png)

bookStoreをentriesを使って中身を表示してみます。

```javascript
const entries = Object.entries(bookStore);
console.log(entries);
```
配列の中にkeyとvalueがさらに配列で格納されています。

![スクリーンショット 2021-05-31 8.40.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/bf87d88e-cd9e-ba6b-8f2a-85e560615a90.png)
entriesをfor of文を使ってelementを表示してみした。

```javascript
for (const element of entries) {
     console.log(element);
}
```
mon: { open: 10, close: 20 }が[mon, {open: 10, close: 20 }]という形で配列構造になっています。
![スクリーンショット 2021-05-31 8.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/18870500-ff5c-9dad-931e-d25ec9653008.png)
"mon"はkeyであり{ open: 10, close: 20 }の部分はvalueなので、分割代入を利用して次のように表示することもできます。

```javascript
for (const [key, value] of entries) {
        console.log(`${key}, ${value}`);
}
```
valueの部分が[object object]になっています。
![スクリーンショット 2021-05-31 8.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/27a1f4a8-b9d2-f00b-aa10-64a67d239127.png)
valueを正しく表示させるために、さらにopenとcloseに分割代入してみました。

```javascript
for (const [key, {open, close}] of entries) {
        console.log(`${key}, ${open}, ${close}`);
}
```
openとcloseの値が曜日ごとに表示されました。
![スクリーンショット 2021-05-31 9.26.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/dea8a341-9ea6-a084-bada-3dfce66560c2.png)

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys