こんにちはフロントエンドエンジニアのまさにょんです!
今回は、JavaScriptのループ構文である「for-in-文」と「for-of-文」の違いと使い分けについて解説していきます。
目次
for-in の使い方
for-in-文は、指定された連想配列(Object)から「key」を取り出して処理をするループ構文(Loop-Syntax)です。
for-in-文は、処理の順序が保証されていないことなどから、Object専用のkey取り出しループ構文として使用することをおすすめします。
基本構文や特徴、注意点は、次のとおりです。
[ for-in-基本構文 ]
for( 仮変数 in 連想配列(オブジェクト) ) {
// 処理
}
[ 特徴 ]
1. for-in-文は、指定された連想配列(Object)から「key」を取り出して処理をする!
2. 列挙可能であれば、何でもループできる!
[ 注意点 ]
1. 取り出し順が、順不同であることに注意!
2. for-in-文は、処理の順序が保証されていないから、普通の配列のループには、不向き。
[ Point ]
1. Objectのループ専用として使った方がいい!
それでは、実際にSample-Codeを見ていきましょう!
// < for-in-文 >
// for-in-文は、指定された連想配列(Object)から「key」を取り出して処理をする!
const robotamaInstance = {
value: 'ロボ玉試作1号機',
group_name: 'ロボ玉組',
from: 'グンマー帝国',
like: 'ひまたね',
age: 1,
robotama_flag: true,
};
// 1. Object に対して「for-in-文」を使用する!
for (const key in robotamaInstance) {
console.log({key});
}
// < 出力結果 >
// {key: 'value'}
// {key: 'group_name'}
// {key: 'from'}
// {key: 'like'}
// {key: 'age'}
// {key: 'robotama_flag'}
// 2. Object の value を1つずつ取り出して処理をしたい場合
for (const key in robotamaInstance) {
const val = robotamaInstance[key];
console.log({val});
}
// < 出力結果 >
// {val: 'ロボ玉試作1号機'}
// {val: 'ロボ玉組'}
// {val: 'グンマー帝国'}
// {val: 'ひまたね'}
// {val: 1}
// {val: true}
const devRobotama = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];
// 3. Array に対して「for-in」を使用する!
for (const key in devRobotama) {
console.log({key});
}
// < 出力結果 >
// {key: '0'}
// {key: '1'}
// {key: '2'}
// {key: '3'}
for-of の使い方
for-of-文は、指定された列挙可能なオブジェクト(Array, Map など)から「value」を(先頭から)順に取り出して処理をします。
「for-of-文」は「for-in-文」と違い、先頭から順に取り出して処理をすることと、「for-in-文は、keyを取り出す」のに対して「for-of-文は、valueを取り出す」ことの2点がPointです。
また、単体である Object に対して通常「for-of-文」は使えないので注意しましょう!
Objectに対して「for-of-文」を使いたい場合は、Object.keys や Object.values などの Object-Method を使って「Array」(列挙可能なObject)に変換して使いましょう。
基本構文や特徴、注意点は、次のとおりです。
[ for-of-基本構文 ]
for( 仮変数 of 列挙可能なオブジェクト(ListであるArrayなど) ) {
// 処理
}
[ 特徴 ]
1. for-of-文は、指定された列挙可能なオブジェクト(Array, Map, String, NodeList など)から「value」を(先頭から)順に取り出して処理をする!
2. 反復可能な要素をループできる!
3. String, Array, Map, NodeList, HTMLCollection など様々なものをループできる!
[ 注意点 ]
1. Object のループはできない! => Objectは、単体だから!
[ Point ]
1. Objectに対して、「for-of-文」を使いたい場合は、Object-Method を使って「Array」(列挙可能なObject)に変換する!
それでは、実際にSample-Codeを見ていきましょう!
// < for-of-文 >
// for-of-文は、指定された列挙可能なオブジェクト(Array, Map など)から
// 「value」を(先頭から)順に取り出して処理をする!
const devRobotama2 = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];
// 1. Array に対して「for-of」を使用する!
for (const val of devRobotama2) {
console.log({val});
}
// < 出力結果 >
// {val: 'ロボ玉'}
// {val: 'ロボ玉試作1号機'}
// {val: 'ロボ玉試作2号機'}
// {val: 'ロボ玉試作3号機'}
const robotamaInstance2 = {
value: 'ロボ玉試作1号機',
group_name: 'ロボ玉組',
from: 'グンマー帝国',
like: 'ひまたね',
age: 1,
robotama_flag: true,
};
// 単体である Object に対して通常「for-of-文」は使えない!
// 2. Objectに対して、「for-of文」を使いたい場合は、、、
// Object-Method を使って「Array」(列挙可能なObject)に変換する!
for (const val of Object.values(robotamaInstance2)) {
console.log({val});
}
// < 出力結果 >
// {val: 'ロボ玉試作1号機'}
// {val: 'ロボ玉組'}
// {val: 'グンマー帝国'}
// {val: 'ひまたね'}
// {val: 1}
// {val: true}
Object の操作をする Object-Method
以前の記事で、Object.keys()とObject.values()、Object.entries() について解説しています。
ここでも軽くObject-Methodたちの紹介をしますが、詳細は次の記事にてCheckをお願いします。
// < Object の操作をする Object-Method たち >
const robotamaInstance3 = {
value: 'ロボ玉試作1号機',
group_name: 'ロボ玉組',
from: 'グンマー帝国',
like: 'ひまたね',
age: 1,
robotama_flag: true,
};
// 1. Object.keys()は、key-Array を作成できる!
const ObjectKeys = Object.keys(robotamaInstance3);
console.log({ObjectKeys});
// ObjectKeys: (6) ['value', 'group_name', 'from', 'like', 'age', 'robotama_flag']
// 2. Object.values()は、value-Array を作成できる!
const ObjectValues = Object.values(robotamaInstance3);
console.log({ObjectValues});
// ObjectValues: (6) ['ロボ玉試作1号機', 'ロボ玉組', 'グンマー帝国', 'ひまたね', 1, true]
// 3. Object.entries()は、key-value-Array を作成できる!
const ObjectKeyValues = Object.entries(robotamaInstance3);
console.log({ObjectKeyValues});
// < 出力結果 >
// ObjectKeyValues: Array(6)
// 0: (2) ['value', 'ロボ玉試作1号機']
// 1: (2) ['group_name', 'ロボ玉組']
// 2: (2) ['from', 'グンマー帝国']
// 3: (2) ['like', 'ひまたね']
// 4: (2) ['age', 1]
// 5: (2) ['robotama_flag', true]
// length: 6