JavaScriptでfor〜inとfor〜ofの使い方と違い

8 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptのfor〜inとfor〜ofの使い方のメモになります。
for〜inの使い方
オブジェクトや配列のキーを取得するのに使います。
サンプルコード
まずはオブジェクトの場合で考えます。
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(`キー: ${key}, 値: ${obj[key]}`);
}
結果は下記になります。
キー: a, 値: 1
キー: b, 値: 2
キー: c, 値: 3
バリューを取得したい場合は「obj[key]」の記述をすればいいです。
次は配列の場合です。
const arr = [10, 20, 30];
for (const index in arr) {
console.log(`インデックス: ${index}, 値: ${arr[index]}`);
}
結果は下記になります。
インデックス: 0, 値: 10
インデックス: 1, 値: 20
インデックス: 2, 値: 30
バリューを取得したい場合は「arr[index]」の記述をすればいいです。
for〜ofの使い方
for〜inかキーを取得するのに対してfor〜ofは配列やオブジェクトのバリューを取得します。
まずはオブジェクトの場合です。
const obj = { a: 1, b: 2, c: 3 };
for (const value of obj) {
console.log(value);
}
結果は下記になります。
1
2
3
次は配列の場合です。
const arr = ['a', 'b', 'c'];
for (const value of arr) {
console.log(value);
}
結果は下記になります。
a
b
c
for〜inとfor〜ofの違い
for〜inがキーを取得するのに対してfor〜ofはバリューを取得します。