ホーム » JavaScriptチュートリアル » JavaScript for…ofループ

JavaScript for…of ループ

概要: このチュートリアルでは、JavaScriptのfor...ofステートメントを使用して、反復可能なオブジェクトを反復処理する方法を学びます。

JavaScript for…of ループの紹介

ES6では、次のような反復可能なオブジェクトを反復処理する新しいステートメントfor...ofが導入されました。

以下に、for...ofの構文を示します。

for (variable of iterable) {
   // ...
}Code language: JavaScript (javascript)

変数

各反復で、反復可能なオブジェクトのプロパティが変数に割り当てられます。var、let、またはconstを使用して変数を宣言できます。

反復可能オブジェクト

反復可能オブジェクトとは、反復可能なプロパティが反復されるオブジェクトです。

JavaScript for of ループの例

for...ofループの使用例をいくつか見てみましょう。

1) 配列の反復処理

次の例は、for...ofを使用して配列の要素を反復処理する方法を示しています。

let scores = [80, 90, 70];

for (let score of scores) {
    score = score + 5;
    console.log(score);
}Code language: JavaScript (javascript)

出力

85
95
75

この例では、for...ofはscores配列のすべての要素を反復処理します。各反復で、scores配列の要素をscore変数に割り当てます。

ループ内で変数を変更しない場合は、letキーワードの代わりにconstキーワードを使用する必要があります。

let scores = [80, 90, 70];

for (const score of scores) {
    console.log(score);
}Code language: JavaScript (javascript)

出力

80
90
70

ループ内の配列要素のインデックスにアクセスするには、配列のentries()メソッドでfor...ofステートメントを使用できます。

array.entries()メソッドは、各反復で[index, element]のペアを返します。例:

let colors = ['Red', 'Green', 'Blue'];

for (const [index, color] of colors.entries()) {
    console.log(`${color} is at index ${index}`);
}Code language: JavaScript (javascript)

出力

Red is at index 0
Green is at index 1
Blue is at index 2

この例では、配列の分割代入を使用して、entries()メソッドの結果を各反復でindex変数とcolor変数に割り当てました。

const [index, color] of colors.entries()Code language: CSS (css)

2) for…ofによるインプレースオブジェクト分割代入

次の例を考えてみましょう。

const ratings = [
    {user: 'John',score: 3},
    {user: 'Jane',score: 4},
    {user: 'David',score: 5},
    {user: 'Peter',score: 2},
];

let sum = 0;
for (const {score} of ratings) {
    sum += score;
}

console.log(`Total scores: ${sum}`); // 14Code language: JavaScript (javascript)

出力

Total scores: 14

仕組み

  • ratingsはオブジェクトの配列です。各オブジェクトには、userとscoreの2つのプロパティがあります。
  • for...ofはratings配列を反復処理し、すべてのオブジェクトの合計スコアを計算します。
  • 式const {score} of ratingsは、オブジェクト分割代入を使用して、現在反復処理されている要素のscoreプロパティをscore変数に割り当てます。

3) 文字列の反復処理

次の例では、for...ofループを使用して文字列の文字を反復処理します。

let str = 'abc';
for (let c of str) {
    console.log(c);
}Code language: JavaScript (javascript)

出力

a
b
c

3) Mapオブジェクトの反復処理

次の例は、for...ofステートメントを使用してMapオブジェクトを反復処理する方法を示しています。

let colors = new Map();

colors.set('red', '#ff0000');
colors.set('green', '#00ff00');
colors.set('blue', '#0000ff');

for (let color of colors) {
    console.log(color);
}Code language: JavaScript (javascript)

出力

[ 'red', '#ff0000' ]
[ 'green', '#00ff00' ]
[ 'blue', '#0000ff' ]Code language: JSON / JSON with Comments (json)

4) Setオブジェクトの反復処理

次の例は、for...ofループを使用してsetオブジェクトを反復処理する方法を示しています。

let nums = new Set([1, 2, 3]);

for (let num of nums) {
    console.log(num);
}Code language: JavaScript (javascript)

for...of vs. for...in

for...inはオブジェクトのすべての列挙可能なプロパティを反復処理します。Array、Map、またはSetなどのコレクションを反復処理しません。

for...inループとは異なり、for...ofはオブジェクトではなくコレクションを反復処理します。実際、for...ofは、[Symbol.iterator]プロパティを持つ任意のコレクションの要素を反復処理します。

次の例は、for...ofとfor...inの違いを示しています。

let scores = [10,20,30];
scores.message = 'Hi';

console.log("for...in:");
for (let score in scores) {
  console.log(score); 
}

console.log('for...of:');
for (let score of scores) {
  console.log(score);
}
Code language: JavaScript (javascript)

出力

for...in:
0
1
2
message
for...of:
10
20
30Code language: CSS (css)

この例では、for…inステートメントはscores配列のプロパティを反復処理します

for...in:
0
1
2
messageCode language: CSS (css)

一方、for…ofは配列の要素を反復処理します

for...of:
10
20
30Code language: CSS (css)

まとめ

  • 反復可能なオブジェクトの要素を反復処理するには、for...ofループを使用します。
このチュートリアルは役に立ちましたか?
JavaScript yield
前へ
JavaScript yield
次へ
JavaScript非同期イテレータ
JavaScript Asynchronous Iterators