JavaScript

(初心者向け) JavaScript の for 文4種

More than 1 year has passed since last update.

概要

JavaScript では最初、C 言語風の for 文のみがサポートされていましたが、その後、for in 文が追加され、ECMAScript6 仕様で for of 文が追加され、現在では3種の for 文が利用できます。

※ for each...in 文というのもありますが、現在、使用は推奨されていません。

構文

C 言語風の for 文

昔ながらの for 文です。構文は C 言語と同じです。ただし、初期化部分で変数を初期化するとき、var を使うより let を使ったほうが、ブロック内でその変数がローカルになるので安全です。

var data = ['Apple', 'Google', 'Microsoft', 'Oracle'];
var hash = { "A": 0x41, "B": 0x42, "C": 0x43 };

/* for 文 */
console.info("-- C 言語風の for 文 --");
for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
}

for in 文

Java や C# にも for in 文がありますが、見た目が似ているだけで JavaScript のfor in 文とは動作が違います。

JavaScript の for in 文ですが、コレクションの要素そのものを一つづつ列挙するのではなく、インデックスやキーを列挙します。

var data = ['Apple', 'Google', 'Microsoft', 'Oracle'];
var hash = { "A": 0x41, "B": 0x42, "C": 0x43 };

// 配列の場合
for (let i in data) {
  console.log(data[i]);
}

// オブジェクトでも利用可能
for (let k in hash) {
  console.log(hash[k]);
}

for of 文

Java や C# の for in 文に相当するのが、この構文です。使い方もほぼ同じです。

オブジェクトを連想配列として使う場合、イテレータが実装されてないため、for of 文は使えません。そのような場合は、オブジェクトでなく ECMAScript6 でえ追加された map などを使用します。

var data = ['Apple', 'Google', 'Microsoft', 'Oracle'];
var hash = { "A": 0x41, "B": 0x42, "C": 0x43 };

// 配列はイテレータが実装されているので利用できる。
console.info("-- ECMAScript6 の for 文 --");
for (let x of data) {
  console.log(x);
}

// この構文はエラーとなる。(オブジェクトにはイテレータが実装されてないため)
/*
for (let v of hash) {
  console.log(v);
}
*/

終わり