ECMA Script6（JavaScript）のfor-inとfor-ofとforEachの違い

2017.10.13

ECMA Script6（JavaScript）のfor-inとfor-ofとforEachの違い

ECMA Script6（JavaScript）のfor-inとfor-ofとforEachの違いについてです。

for-inで取得するのはプロパティ名になります。

以下、実行例です。

let name = 'taro';
let age = '20';
let human = {name, age};

console.log(human);

for (let val in human) {
  console.log(val);
}
for (let val in human) {
  console.log(human[val]);
}

結果は以下のようになります。

{ "name": "taro", "age": "20" }
name
age
taro
20

for-ofの使い方

for-ofはイテレータブルな値の中身を見る場合に使います。例えば配列などです。

let human = ['taro', '20'];

console.log(human);

for (let val of human) {
  console.log(val);
}

結果は以下のようになります。

[ "taro", "20" ]
taro
20

Mapなどもイテレータブルなのでfor-ofが使えます。

let map = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let val of map) {
  console.log(val);
}

結果は以下のようになります。

[ "a", 1 ]
[ "b", 2 ]
[ "c", 3 ]

forEachの使い方

配列のメソッドとしてforEachがあります。Eは大文字なので注意です。

また、forEachは同期関数です。（node.jsなどでは意識しておく必要がある）

[3, 5, 10].forEach(function(elem, i, array) {
console.log(i + ":" + elem);
});

結果は以下のようになります。

0:3
1:5
2:10

ECMA Script6（JavaScript）のfor-inとfor-ofとforEachの違い

コメント

タイトルとURLをコピーしました