こんにちはkentaです。
最近JavaScriptの勉強をしていてfor…inとfor…ofがいまいち分からなくて壁にぶつかりました笑
そこで今回は自分の中で理解できるように解説記事を書きたいと思います。
今ここを書いている時点では自信ないけど頑張ります、、笑

forinとforofの違い

簡単に言うとfor…in文は取得しているのに対しfor…of文は値を取得しています

なのでfor…in文はオブジェク(キーを必要としているやつ)に重宝されてfor…of文は配列(値しか入っていないやつに使います！)

let meet2 = {
    beef:'牛肉',
    chicken:'鶏肉',
    pork:'豚肉'
}
for(key in meet2){
    console.log(key)
}
//イメージは関数の実行(イメージの話をしているのでこのコードは関係ない)
mee(meet2);

function mee(key){
console.log(key)
}

こっちがオブジェクト(キーを必要としているやつ)です。

for…in文を使うとmeet2を参照してキー(今回の場合beefとかchicken)をkeyに入れます。
勝手に解釈しているのですが関数の引数みたいなイメージです。実行するときにmeet2を引数として持っていって定義先をkeyとして扱うってイメージです。

上手く伝わってるかわかないけどそんな感じです。

let meet =[
   'beef',
   'chicken',
   'pork'
];
for(val of meet){
    console.log(val)
}

こっちがfor…of文で使うやつ、配列(値しか入っていないやつ)です。

関数のイメージはfor…in文と同じで考えてもらって大丈夫だと思います。

console.logでvalを表示させると値が順番に表示されます。

ちなみにfor…inを配列でやってみると配列の添字が表示されます。
添字がキーの扱いになるんですかね？？
まぁあながち間違っていない気がしますけど。

あとfor…inで配列を使用すると順番を保証しないらしいので順番が必要な配列にはあまり使用しないようにしましょう。

応用してみる

これを上手に使うと配列の中に入っているオブジェクトにも使用できます。

const npb = [
        {"team": "広島東洋カープ", "win": 12, "lose": 6, "rate": .667},
        {"team": "讀売ジャイアンツ", "win": 13, "lose": 7, "rate": .650},
        {"team": "中日ドラゴンズ", "win": 10, "lose": 7, "rate": .588},
        {"team": "東京ヤクルトスワローズ", "win": 10, "lose": 9, "rate": .526},
        {"team": "横浜DeNAベイスターズ", "win": 6, "lose": 9, "rate": .400},
        {"team": "阪神タイガーズ", "win": 3, "lose": 16, "rate": .158}
];
for(val of npb){
    console.log(val)
    for(key in val){
        console.log(val[key])
    }
}

この場合まずfor…of文で配列の1つ目(広島のデータが入っているオブジェクト)を取得してその後for…in文でオブジェクトのキーを取得しています。console.logで表示させています。

最初見たときは全然分からなかったけどなんとなく理解することができました。多分()

まとめ

今回はfor…inとfor…ofの違いについて書きました！

まぁ簡単に言うと

オブジェクトにはfor…in

配列にはfor…of

を使うのがおススメってことですね。

組み合わせたりすると難しくなりそうなのでこれから使える機会があったら有効活用していきたいですね。