【JavaScript】for-of文の使い方と、for-in文との違い・使い分けについて。

本記事の目次

初めに
for-of文について
for-in文について
for-of と for-in の違いと使い分け方

初めに

JavaScriptでは、繰り返し処理を行う方法がたくさん用意されています。

その中でも、個人的によく使う for-of文の使い方と、for-of文に似た for-in 文との違いや使い分けについてまとめました。

わかりやすい通常のfor文を使ってもいいのですが、for-of文などを使いこなしているとかっこいいと思いませんか？（個人的感想）

他にも繰り返し処理を行いたい時には map( ) や filter( ) 、 forEach( ) もよく使いますが、それらはメソッドなのでまた別の機会に。

for-of文について

for-of文の特徴

JavaScriptの for-of文では、配列などの iterable なオブジェクトをループすることができます。

const array = [1, 2, 3, 4];

for(let value of array) {
  console.log(value);
}
// 1
// 2
// 3
// 4

for-of文には、以下のような特徴があります。

ES6で追加された構文である
変数にvalueを代入する
IEでは未対応
配列から文字列、NodeList、HTMLCollectionなど、様々なものをループ処理できる
オブジェクトをループするとエラーになる

for-of文は、変数にvalueが代入されるため使いやすく、ループ処理できるものも多いため使い勝手抜群です。

for-of文で配列の index を取得する方法

entries()メソッドを利用することで、for-of文で配列のindexを取得することができます。

const array ['one', 'two', 'three', 'four'];

for(let [index, value] of array.entries()) {
  console.log(`index: ${index}, value: ${value}`);
}
// 'index: 1, value: one'
// 'index: 2, value: two'
// 'index: 3, value: three'
// 'index: 4, value: four'

取得したHTML要素（NodeList）に対してループする

JavaScriptの querySelectorAll()メソッドなどで取得してくるHTML要素（NodeList）に対してもfor-of文を利用することができます。

// HTML
<ul id="list">
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
</ul>

// JavaScript
const lists = document.querySelectorAll('#list > li');
for(let list of lists) {
  console.log(list);
}

NodeListに対して、entries()メソッドを使用することで index を取得することも可能です。

取得したHTML要素（HTMLCollection）に対してループする

getElementByClassName()メソッドなどで取得してくるHTML要素（NodeList）に対しても for-of文を利用することができます。

// HTML
<ul>
 <li class="list">リスト1</li>
 <li class="list">リスト2</li>
 <li class="list">リスト3</li>
</ul>

// JavaScript
const lists = document.getElementByClassName('list');
for(let list of lists) {
  console.log(list);
}

文字列を1文字ずつ取得する

JavaScriptの文字列に対して for-of文を用いることで、一文字ずつ取得することも可能です。

const text = 'for';

for(let char of text) {
  console.log(char);
}
// 'f'
// 'o'
// 'r'

for-ofではオブジェクトに対してループができない

オブジェクトに対してfor-of文を使用するとエラーとなるので注意が必要です。

const object = {
  key1 : 'value1',
  key2 : 'value2',
  key3 : 'value3',
}

for(let value of object) {
  console.log(`value : ${value}`); // TypeError: object is not iterable
}

オブジェクトに対してfor-of文で直接ループすることはできませんが、keys()メソッドやvalues()メソッドを利用することで、擬似的にオブジェクトのfor-of文でループすることもできます。

const object = {
  key1 : 'value1',
  key2 : 'value2',
  key3 : 'value3',
}

for(let key of object.keys()) {
  console.log(`key : ${key}`); // オブジェクトのkeyをループでで出力する
}

for(let value of object.values()) {
  console.log(`value : ${value}`); // オブジェクトのvalueをループで出力する
}

for-in文について

for-in文の特徴

JavaScriptの for-in文には、以下のような特徴があります。

オブジェクトをループ処理できる
変数にkeyを代入する
順番通りに繰り返すわけではない
配列をfor-in文でループ処理するのはやめておいた方が良い

オブジェクトに対してループする

for-in文では、主にオブジェクトに対するループで使用することが多いです。

const object = {
  key1 : 'value1',
  key2 : 'value2',
  key3 : 'value3',
}

for(let key in object) {
  console.log(`key : ${key}`); // オブジェクトのkeyを出力する
  console.log(`value : ${object[key]}`); // オブジェクトのvalueを出力する
}

上の例では、for-in文でkey変数に入れたオブジェクトのkeyをindex番号に指定することで、オブジェクトのvalueを出力しています。

配列をループ処理する

構文的には、配列に対してfor-in文を使用することができます。

const numbers = ['one', 'two', 'three'];

for(let key in numbers) {
  console.log(key); // 配列のkey(= index)を出力する
  // 1
  // 2
  // 3
}

ただし、Arrayをprototypeで拡張した場合、拡張したものまでループ処理してしまい不具合に繋がりかねません。また、繰り返す順番が一定でないため、配列に対してfor-in文の使用は推奨されません。

const numbers = ['one', 'two', 'three'];

Array.prototype.hoge = function(){};

for(let key in numbers) {
  console.log(key);
  // 1
  // 3 （順不同）
  // 2 （順不同）
  // ƒ(){} （余計なもの）
}

for-of と for-in の違いと使い分け方

for-of文と for-in文の違いは以下の通りです。

–	for-of	for-in
変数に代入されるもの	value	key
オブジェクトのループ	×	○
繰り返す順番	順番にループ	順不同
使いやすさ	○	×