for...of ループ
for...of と for...in ループは、JavaScriptで配列の要素やオブジェクトのプロパティを繰り返し処理するのに便利な方法を提供するよ。どっちも繰り返しに使うけど、それぞれ異なる状況で使われるんだ。
for...of ループ
for...of ループは、反復可能なオブジェクト（配列や文字列、Set や Map オブジェクトなど）を処理するためのものだよ。コレクションの要素を簡単に繰り返せるんだ。
構文:
for (let variable of iterable) {
// 各要素のために実行されるコード
}
例:
JavaScript
let array = [1, 2, 3, 4, 5];
for (let value of array) {
console.log(value);
}
// 出力: 1 2 3 4 5
配列への適用
for...of ループは、配列の要素を繰り返し処理するのに便利だよ。各要素の値にアクセスできるからね:
JavaScript
let fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
console.log(fruit);
}
// 出力: apple banana cherry
文字列への適用
for...of ループは、文字列の文字を繰り返し処理するのにも使えるよ:
JavaScript
let str = 'Hello';
for (let char of str) {
console.log(char);
}
// 出力: H e l l o
9.2 for...in ループ
for...in ループは、オブジェクトの列挙可能なプロパティを繰り返し処理するために使うよ。
各プロパティのキーを繰り返し処理するんだ。
構文:
for (let key in object) {
// 各要素のために実行されるコード
}
例:
JavaScript
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
console.log(key + ': ' + obj[key]);
}
// 出力: a: 1 b: 2 c: 3
オブジェクトへの適用
for...in ループは、オブジェクトのプロパティを繰り返し処理するのに便利だよ。各プロパティのキーと値にアクセスできるからね:
JavaScript
let user = {
name: 'John',
age: 30,
isAdmin: true
};
for (let key in user) {
console.log(key + ': ' + user[key]);
}
// 出力: name: John age: 30 isAdmin: true
配列への適用
for...in ループは、配列のインデックスを繰り返し処理するのに使えるけど、プロトタイプからのプロパティも含まれるから、あまりおすすめできない:
JavaScript
let array = ['apple', 'banana', 'cherry'];
for (let index in array) {
console.log(index + ': ' + array[index]);
}
// 出力: 0: apple 1: banana 2: cherry
9.3 for...of と for...in ループの比較
for...of と for...in ループの比較:
| 説明 | for...of | for...in |
|---|---|---|
| 適用 | 反復可能なオブジェクト（配列、文字列、Set、Map） | オブジェクト |
| 特徴 | 値を反復処理する | キーを反復処理する |
| 配列での使用法 | for (let value of array) { ... } |
for (let index in array) { ... } |
| オブジェクトでの使用法 | for (let value of Object.values(obj)) { ... } |
for (let key in obj) { ... } |
GO TO FULL VERSION