11670


下記を「for … of」でループするには、どうすれば良いでしょうか？  
・配列でないと無理？

[code]

     var hoge = {"area23": "東京", "area47": "沖縄"};
    
[/code]


CC BY-SA 3.0
2015-06-24T03:26:05.350
11660
2015-06-24T06:21:19.487
7886
question
javascript ecmascript-6
配列ではなくオブジェクトを「for … of」でループするにはどうすれば良いでしょうか？


これですかね？

[code]

    for (var k in hoge) {
        console.log(k + ' = ' + hoge[k]);
    }
    
[/code]


CC BY-SA 3.0
2015-06-24T04:35:58.743
11664
2015-06-24T04:35:58.743
845
11660
answer


ofはECMAScript6の書き方なので今はまだinで逃げるべきかと…  
余分なプロトタイプチェーンのプロパティが出てくる場合はtypeofの判定を追加で。  
if (typeof(hoge[i]) !== 'function') {～～～}

[code]

    var hoge = {"area23": "東京", "area47": "沖縄"};
    for (var i in hoge){
      alert(i+':'+hoge[i]);
    }
[/code]

<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of>  
同じことをofでやる場合は下記のようですが・・・  
自分の環境では確認できなかったり＾＾；

[code]

    let hoge = {"area23": "東京", "area47": "沖縄"};
    for (let i of hoge){
      alert(i);
    }
    
[/code]


CC BY-SA 3.0
2015-06-24T04:45:25.600
11665
2015-06-24T04:45:25.600
9262
11660
answer


`for..of` は Iterator と組み合わせるものであり、 **プロパティ名の列挙にはこれまで通り`for..in` を使う必要があります。**
Array や Map は Iterator を提供している（Iterable）ので `for...of` が使えます。

これまでプロパティの列挙が `for..in` でできていた一方で、 arguments のような配列モドキや独自のコレクションを
`Array.prototype.forEach` のように反復処理する方法はありませんでした。一部の処理系では `Array.forEach`
などの一般化した実装も提供していましたが、これは配列のように `length` プロパティとインデックスアクセスを用いるものですから、ES6 で登場する
Generator のように要素数がわからないオブジェクトでは利用できません。

そこで、「次の要素に進む」「現在の値」「続きがあるかどうか」のみを使った Iterator が生まれ、それを用いた foreach のようなものが
`for...of` 、ということになります。

ちなみに、ES6 の `for..in` は[「プロパティ名を列挙するイテレータ」](http://www.ecma-
international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-
internal-slots-enumerate)を生成し、それを反復する、といった書き方になっていました。

参考

  * [for...of - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
  * [Iteration protocols - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
  * [ES6のイテレータについて調べた - ひよこ3分07秒のTechブログ](http://tech.chick307.com/2014/05/09/es6-iterator/)


CC BY-SA 3.0
2015-06-24T06:21:19.487
11670
2015-06-24T06:21:19.487
8000
11660
answer