コンテンツへスキップ

for in/ofの使い分け

by : 2018/08/10

新しく追加された構文のfor/ofですが、for/inとの違いが分かりづらく、間違えてしまう人は多いのではないでしょうか。そこで実行結果を含めて使い分ける場面を紹介します。

ハッシュの場合

ハッシュの場合、ofは使えません。そのため、inだけです。

let hash = {
a: "b", c: "d", e: "f"
};

view raw
index.javascript
hosted with ❤ by GitHub

このようにデータを取り出せます。返ってくるのはキー部分になります。

for (let i in hash) {
console.log(i);
}
// -> "a"
// -> "c"
// -> "e"

view raw
index.javascript
hosted with ❤ by GitHub

どうしても of を使いたい場合は Object.keys を使う方法があります。

for (let i of Object.keys(hash)) {
console.log(i);
}
// -> "a"
// -> "c"
// -> "e"

view raw
index.javascript
hosted with ❤ by GitHub

配列の場合

配列はin/of両方使えますが、返ってくる値が異なるので注意が必要です。

let ary = ['a', 'b', 'c'];

view raw
index.javascript
hosted with ❤ by GitHub

inだとキーが返ってきます。

for (let i in ary) {
console.log(i);
}
// -> 0
// -> 1
// -> 2

view raw
index.javascript
hosted with ❤ by GitHub

of だと値が返ってきます。

for (let i of ary) {
console.log(i);
}
// -> "a"
// -> "b"
// -> "c"

view raw
index.javascript
hosted with ❤ by GitHub

昔ながらのやり方は以下のような感じでしょう。

for (let i = 0; i < ary.length; i += 1) {
console.log(i, ary[i]);
}
// -> 0, "a"
// -> 1, "b"
// -> 2, "c"

view raw
index.javascript
hosted with ❤ by GitHub

さらに forEach も用意されています。こちらは of と同じ挙動です。

ary.forEach((i) => {
console.log(i);
});
// -> "a"
// -> "b"
// -> "c"

view raw
index.javascript
hosted with ❤ by GitHub

もしキーと値を両方取りたい時には ary.entries() が使えます。

for (let [i, v] of ary.entries()) {
console.log(i, v);
}
// -> 0, "a"
// -> 1, "b"
// -> 2, "c"

view raw
index.javascript
hosted with ❤ by GitHub


of は本来、イテレーションを順番に実行するためのものです。配列もイテレーションですが、in/ofの使い分けが難しいので使わない方が安全かも知れません。安全な使い方としては、配列もハッシュもinを使ってキーを受け取りつつ、yieldを使った明確なイテレーションのみofを使うといった使い分けになるでしょう。

for…of – JavaScript | MDN

 

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。