for…inとfor…ofを使ってみる

ループ処理を行うfor…inとfor…ofについて、それぞれ簡単に試してみます。

for…in

for…inはオブジェクトをループする際に使用します。
主要なブラウザで特に問題なくサポートされています。

for (variable in object)
  statement

objectにオブジェクトを指定してvariableでキーを受け取り、ループ中に実行する文のstatement内でvariableを使用できます。
variableで受け取れるのはキーのみで、バリューは含まれません。

const object = {
	name: '黒川あかね',
	height: 163,
	cv: '石見舞菜香'
};

for(const property in object) {
  console.log(property);
}
// name
// height
// cv

for…inのデモページ

バリューを使用する場合、キーを使って取得します。

const object = {
	name: '黒川あかね',
	height: 163,
	cv: '石見舞菜香'
};

for(const property in object) {
  console.log(object[property]);
}
// 黒川あかね
// 163
// 石見舞菜香

for…inのデモページ2

for…of

for…inは配列やNodeListなど、反復可能オブジェクトをループする際に使用します。
IEで非対応ですが、それ以外の主要なブラウザで特に問題なくサポートされています。

for (variable of iterable)
  statement

iterableに反復可能オブジェクトを指定してvariableで値を受け取り、ループ中に実行する文のstatement内でvariableを使用できます。

const array = ['a', 'b', 'c'];

for (const element of array) {
  console.log(element);
}
// a
// b
// c

for…ofのデモページ

NodeListに対しても使用可能です。

<ul>
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
</ul>

const items = document.querySelectorAll('.item');

for (const element of items) {
  console.log(element.textContent);
}
// A
// B
// C

for…ofのデモページ2

argumentsオブジェクトなどにも使用できます。

function arr() {
  for (const value of arguments) {
    console.log(value);
  }
}

arr(1, 2, 3);
// 1
// 2
// 3

for…ofのデモページ3

for…of内ではbreakやcontinueを使用することもできます。

const array = ['a', 'b', 'c'];

for (const element of array) {
  console.log(element);
  if(element === 'b') break;
}
// a
// b

for (const element of array) {
  if(element === 'b') continue;
  console.log(element);
}
// a
// c

for…ofのデモページ4