JavaScriptでオブジェクトをループさせて「値」と「キー」を両方扱う方法

JavaScriptのループにはforやfor-in、for-of、forEachというような、複数の方法があります。

配列をループ処理させる時はどれを使ってもいいと思うんですが、オブジェクトをループさせる時には注意が必要っぽかったので、少しメモしておきます。

以下、例として以下のオブジェクトがあったとして話を進めていきます。

var obj = {
  apple:'りんご',
  banana:'ばなな',
  orange:'みかん'
};

for-ofでオブジェクトをループさせるとエラーになる

オブジェクトをループさせたい時、for-ofを使うとエラーになります。

例えば、以下はエラーになります。

for( var item of obj ) {
  //これはできない！
}

for-inでオブジェクトをループさせる時の注意点

for-inであれば、オブジェクトもループさせることができます。

for( key in obj ) {
  console.log( key + ': ' + obj[key] );
}

ただ、このfor-inは注意すべき点があって、プロトタイプ拡張で追加されたメソッドもループで回ってきてしまいます。

なので、実際に使う時は以下のようにして使う必要があります。

for( key in obj ) {
  if( obj.hasOwnProperty(key) ) {
    console.log( key + ': ' + obj[key] );
  }
}

forEachでオブジェクトをループさせる時の注意点

forEachではどうでしょうか。

配列と同じようにforEachでループさせようとすると、エラーになります。

これはエラーになる

obj.forEach(function (v,i) {
  // これはエラー！
});

じゃあforEachは使えないのか...というと、実はそうではありません。

Object.keys()メソッドを利用して、オブジェクトのキーだけを取り出した配列を作成し、それをループさせることで、オブジェクトをループ処理させることができるのです。

Object.keys(obj)を使ってforEachで処理する

Object.keys(obj).forEach(function (key) {

  console.log("キー : " + key + ", 値 : " + obj[key]);

});