JavaScriptのfor...inループ解説
2024-08-27
JavaScriptのFor...Inループ：キーと値のペア
For...Inループは、JavaScriptのオブジェクトのすべてのプロパティを反復処理するための制御フロー文です。各反復で、プロパティのキーと値がアクセスされます。
基本的な構文
for (let key in object) {
// ここで、キーと値にアクセスできます
console.log(key, object[key]);
}
object: 反復処理するオブジェクトです。key: 現在の反復におけるオブジェクトのプロパティのキーです。
例
const person = {
name: "Alice",
age: 30,
city: "Tokyo"
};
for (let key in person) {
console.log(key, person[key]);
}
このコードは、以下の出力を生成します。
name Alice
age 30
city Tokyo
重要なポイント
- For...Inループは、オブジェクトのプロパティの順序を保証しません。
- キーは文字列です。
- 各反復で、プロパティのキーと値がアクセスされます。
- For...Inループは、オブジェクトのプロパティを反復処理するために使用されます。
他の反復処理方法との比較
- ForEachメソッド: 配列の要素を反復処理し、各要素に対してコールバック関数を呼び出します。
- For...Ofループ: 配列や文字列などのイテラブルオブジェクトの要素を反復処理します。
JavaScriptのfor...inループ解説：例
例1: オブジェクトのプロパティの出力
const person = {
name: "Alice",
age: 30,
city: "Tokyo"
};
for (let key in person) {
console.log(key, person[key]);
}
このコードは、personオブジェクトのすべてのプロパティとその値を出力します。
const car = {
make: "Toyota",
model: "Camry",
year: 2023
};
for (let key in car) {
if (key === "year") {
car[key] += 1; // 年を1年増やす
}
}
console.log(car);
このコードは、carオブジェクトのyearプロパティの値を1年増やします。
例3: オブジェクトのすべてのプロパティを削除
const animal = {
name: "Leo",
species: "Lion",
age: 5
};
for (let key in animal) {
delete animal[key];
}
console.log(animal);
例4: 配列の要素へのアクセス (注意：推奨されません)
const numbers = [1, 2, 3, 4, 5];
for (let key in numbers) {
console.log(key, numbers[key]);
}
このコードは、配列numbersの要素を出力しますが、配列のインデックスではなく、キーとして使用されます。配列の要素を反復処理する場合は、for...ofループまたはforEachメソッドを使用することを推奨します。
注意
for...inループは主にオブジェクトのプロパティを処理するために使用されます。配列の要素を反復処理する場合は、for...ofループまたはforEachメソッドを使用することを推奨します。
For...ofループ
- 構文
for (let value of iterable) { // ここで、要素の値にアクセスできます } - 用途
配列や文字列などのイテラブルオブジェクトの要素を反復処理する。
例:
const fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
console.log(fruit);
}
ForEachメソッド
- 構文
array.forEach(callbackFunction);
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number * 2);
});
いつどの方法を使うべきか
- 配列の要素を反復処理する場合
for...ofループまたはforEachメソッド - オブジェクトのプロパティを処理する場合
for...inループ
For...ofループとforEachメソッドは、配列の要素を処理する際により直感的で効率的な方法を提供します。ただし、オブジェクトのプロパティを処理する場合には、for...inループが依然として適切です。
for...ofループとforEachメソッドは、配列の要素の順序を保証します。
javascript foreach
