for in/ofの使い分け
新しく追加された構文のfor/ofですが、for/inとの違いが分かりづらく、間違えてしまう人は多いのではないでしょうか。そこで実行結果を含めて使い分ける場面を紹介します。
ハッシュの場合
ハッシュの場合、ofは使えません。そのため、inだけです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let hash = { | |
| a: "b", c: "d", e: "f" | |
| }; |
このようにデータを取り出せます。返ってくるのはキー部分になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| for (let i in hash) { | |
| console.log(i); | |
| } | |
| // -> "a" | |
| // -> "c" | |
| // -> "e" |
どうしても of を使いたい場合は Object.keys を使う方法があります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| for (let i of Object.keys(hash)) { | |
| console.log(i); | |
| } | |
| // -> "a" | |
| // -> "c" | |
| // -> "e" |
配列の場合
配列はin/of両方使えますが、返ってくる値が異なるので注意が必要です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let ary = ['a', 'b', 'c']; |
inだとキーが返ってきます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| for (let i in ary) { | |
| console.log(i); | |
| } | |
| // -> 0 | |
| // -> 1 | |
| // -> 2 |
of だと値が返ってきます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| for (let i of ary) { | |
| console.log(i); | |
| } | |
| // -> "a" | |
| // -> "b" | |
| // -> "c" |
昔ながらのやり方は以下のような感じでしょう。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| for (let i = 0; i < ary.length; i += 1) { | |
| console.log(i, ary[i]); | |
| } | |
| // -> 0, "a" | |
| // -> 1, "b" | |
| // -> 2, "c" |
さらに forEach も用意されています。こちらは of と同じ挙動です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ary.forEach((i) => { | |
| console.log(i); | |
| }); | |
| // -> "a" | |
| // -> "b" | |
| // -> "c" |
もしキーと値を両方取りたい時には ary.entries() が使えます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| for (let [i, v] of ary.entries()) { | |
| console.log(i, v); | |
| } | |
| // -> 0, "a" | |
| // -> 1, "b" | |
| // -> 2, "c" |
of は本来、イテレーションを順番に実行するためのものです。配列もイテレーションですが、in/ofの使い分けが難しいので使わない方が安全かも知れません。安全な使い方としては、配列もハッシュもinを使ってキーを受け取りつつ、yieldを使った明確なイテレーションのみofを使うといった使い分けになるでしょう。
hifive開発者ブログ 
コメントは受け付けていません。