配列や反復可能オブジェクトの操作 | for…of | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

for…ofとは?

for…ofは、JavaScriptにおいて配列や反復可能なオブジェクト(iterable)を繰り返し処理するためのループ構文です。for…ofは、配列やSetMap、文字列などの反復可能オブジェクトの各要素を1つずつ処理します。

for…ofの基本構造

for…ofの基本的な構造は次のようになります。

for (let 値 of 配列または反復可能オブジェクト) {
    // 各要素に対する処理
}

この構造では、指定された配列や反復可能オブジェクトの各要素が順に取り出され、処理が行われます。

配列を繰り返すfor…ofの使用例

次に、for…ofを使って配列の要素を繰り返し処理する基本的な例を見てみましょう。

const fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
    console.log(fruit);
}

この例では、配列fruitsの各要素(applebananaorange)が順に取り出され、それぞれconsole.logで出力されます。

文字列を繰り返すfor…ofの例

文字列も反復可能オブジェクトの一種であり、for…ofで各文字を繰り返し処理することができます。

const text = "hello";

for (let char of text) {
    console.log(char);
}

この例では、文字列textの各文字(hello)が順に取り出され、console.logで出力されます。

MapやSetを繰り返すfor…ofの使用例

JavaScriptのMapSetオブジェクトも反復可能であり、for…ofを使ってその要素を繰り返し処理することができます。

Mapオブジェクトの例

const userMap = new Map();
userMap.set("name", "Taro");
userMap.set("age", 25);

for (let [key, value] of userMap) {
    console.log(key + ": " + value);
}

この例では、MapオブジェクトuserMapの各キーと値をfor...ofで取り出し、console.logで出力しています。

Setオブジェクトの例

const uniqueNumbers = new Set([1, 2, 3, 4, 5]);

for (let number of uniqueNumbers) {
    console.log(number);
}

この例では、SetオブジェクトuniqueNumbersの各値が順に取り出され、console.logで出力されています。

反復可能オブジェクトとは?

反復可能オブジェクト(iterable)とは、Symbol.iteratorというメソッドを持つオブジェクトのことを指します。配列や文字列、MapSetなどがこれに該当します。これらのオブジェクトはfor...of構文を使って繰り返し処理を行うことができます。

まとめ

JavaScriptのfor...of構文は、配列や反復可能オブジェクトの各要素を繰り返し処理するのに便利な方法です。配列や文字列、MapSetなどの反復可能オブジェクトに対して簡単にループ処理を行うことができます。for...ofは、要素の値にアクセスしたい場合に適しており、for...inとは異なる使い方が求められます。