for-in

オブジェクトの列挙可能プロパティに対して、順不同で反復処理を行う。オブジェクトの中身を取得するのに使用する。

forInTest.html

<!DOCTYPE html>
<html>
  <head>
    <script>
     var string1 = "";
      var object1 = {a: 1, b: 2, c: 3};

      for (var property1 in object1) {
        string1 += object1[property1];
      }

      alert(string1);
      // 123と表示される
    </script>
  </head>
  <body></body>
</html>

for-of

iterableオブジェクトの個々のプロパティに対して反復処理を行う。(iterableオブジェクトにはArray,NodeList,Mapなどが含まれる)

forOfTest.html

<!DOCTYPE html>
<html>
  <head>
    <script>
      function* foo(){
          yield 1;
          yield 2;
      }

      for (let o of foo()) {
        //1 -> 2 と表示される
        alert(o);
      }
    </script>
  </head>
  <body></body>
</html>

JavaScriptのfor-inとfor-ofの違い

for-in

for-of