JavaScriptのfor…ofの使い方！繰り返しサンプル4選！

JavaScriptのfor…ofの使い方について書いています。
for…ofを使うことで、指定した要素でループ処理することができます。

簡単に解説した後に、いろんな要素をループするサンプルコードを書いてみました。

for…ofの使い方

for…ofを使うと、配列などの要素を要素がある分、繰り返すことができます。
例えば、配列をループするには下記のようにします。

const fruits = ['apple', 'banana', 'lemon', 'orange']

for(const fruit of fruits) {
  console.log(fruit)
}

最初にfruits変数に、果物名の文字列を代入した配列を作成しています。
その次の処理で、for...ofを使って配列の要素がある分、繰り返しています。

ofの左側が配列要素が入る変数で、右側にループしたい配列を書きます。
ループするたびに、fruit変数にひとつひとつの要素が代入されます。

ループ処理の中では、fruit変数の内容をconsole.logで出力しているだけです。
プログラムを実行すると、下記のようになります。

apple
banana
lemon
orange

配列の全ての要素がひとつずつ取り出されて出力されました。

for…ofを使ったサンプルコード

for...ofを使って、下記の要素をループしてみています。

配列をループする

for...ofで配列要素を繰り返しています。
最初のプログラムと同じ配列ですが、今回は数値を繰り返して平均を求めるようにしてみました。

const scores = [80, 50, 60, 70, 90]

let total = 0
for (const score of scores) {
  total += score
}
const result = total / scores.length
console.log(result) // 70

scores変数に数値を5つ並べた配列を作成しました。

次に全部を足した合計を格納するtotal変数を定義しています。
そして、for...ofで処理しています。

scores変数に入っている要素をひとつずつscore変数に取り出しています。
取り出した内容をtotal変数に足し込んでいきます。

ループを抜けたら、合計を要素数で割って、平均値を出しています。
result変数に格納して、console.logで出力しました。

結果、平均値の「70」が出力されて、全部たされて平均が出力されたことが確認できました。

文字列をループする

for...ofで文字列を繰り返すこともできます。
例えば、下記のようにすると、1文字ずつ出力されます。

const hello = 'hello!!'

for(const char of hello) {
  console.log(char)
}

最初にhello変数に文字列の「hello!!」を代入しました。

その次の処理で、hello変数を元にしてfor...ofでループしています。
ループするたびにchar変数にhello変数の文字がひとつずつ設定されます。

console.logでchar変数の内容を出力しています。
実行して確認すると、下記のように一文字ずつ出力されました。

h
e
l
l
o
!
!

辞書(Map)をループする

for...ofでMapオブジェクトを繰り返すこともできます。
例えば、下記のようにしてMapオブジェクトをループ処理します。

const fruitMap = new Map()
fruitMap.set('red', 'apple')
fruitMap.set('pink', 'peach')
fruitMap.set('banana', 'yellow')

for (const [color, fruit] of fruitMap) {
  console.log(`色：${color} 果物：${fruit}`)
}

最初にMapオブジェクトをfruitMap変数に作りました。
その後に、キーと値をsetメソッドで設定しています。

そして、for...ofを使って、作ったMapオブジェクトを繰り返し処理しています。
ofの右側にMapのfruitMap変数を設定して、左側にcolor変数とfruit変数を用意しています。
color変数にMapオブジェクトのキーが代入されて、fruit変数に値が代入されます。

console.logで出力すると、下記のようにキーと値が出力されていることが確認できました。

色：red 果物：apple
色：pink 果物：peach
色：banana 果物：yellow

集合(Set)をループする

for...ofでSetオブジェクトも繰り返すことができます。
例えば、下記のようにしてSetオブジェクトをループ処理します。

const fruits = new Set()
fruits.add('apple')
fruits.add('orange')
fruits.add('banana')

for (const fruit of fruits) {
  console.log(fruit)
}

最初にfruits変数にSetオブジェクトを作りました。
次の3行で、作ったfruits変数に値を代入しています。

そして、for...ofを使ってループしています。
ofの右側がSetのfruits変数で、左側に要素がひとつずつ取り出されます。
ループ内では、取り出した要素をconsole.logで出力しました。

実行すると下記のように、ひとつずつ要素が取り出せました。

apple
orange
banana

終わりに

今回はfor...ofで要素をループする方法について書いてみました。

まとめると、下記になります。