for.in for.of.

for.inは不思議な方法です.
https://blog.csdn.net/u013594477/article/details/79608730
 
for of
原文:https://www.cnblogs.com/m2maomao/p/7743143.html
for.of...反復可能なオブジェクトを循環させるオブジェクトを作成し、ES 6に導入された  for...of 代わりに  for...in 和  forEach() ,また、新しい反復プロトコルをサポートします.for...of Arays、Strings、Maps(マッピング)、Sets(セット)などの反復可能なデータ構造を巡回することができます.
構文:

for (variable of iterable) {
    statement
}
//variable：               。
//iterable：                  。

用例:
Araysはクラスリストの対象です.配列の原型には様々な方法があり、修正やエルゴードなどの操作が可能です.次の配列で行います.  for...of 操作:

// array-example.js
const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}
 
// Output:
// mini
// mani
// mo

Maps(マッピング)
Mapオブジェクトはkey-valueのペアを保存します.オブジェクトおよび元の値は、key(キー)またはvalue(値)として使用することができる.Mapオブジェクトは、挿入に従って要素を反復します.言いかえれば  for...of ループは、キーの配列を毎回繰り返すことになります.

// map-example.js
const iterable = new Map([['one', 1], ['two', 2]]);
 
for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}
 
// Output:
// Key: one and Value: 1
// Key: two and Value: 2

セット
Set(セット)オブジェクトは、任意のタイプの一意の値を格納することができます.これらの値は元の値またはオブジェクトとすることができます.Set(セット)オブジェクトは値のセットだけです.Set(セット)要素の反復は、その挿入順序に基づいている.セットの値は一回だけ発生します.同じ要素が複数あるセットを作成すると、依然として単一の要素として認識されます.

// set-example.js
const iterable = new Set([1, 1, 2, 2, 1]);
 
for (const value of iterable) {
  console.log(value);
}
// Output:
// 1
// 2

String(文字列)
文字列はテキストとしてデータを格納するために使用されます.

// string-example.js
const iterable = 'javascript';
 
for (const value of iterable) {
  console.log(value); //  ，        ，            。
}
 
// Output:
// "j"
// "a"
// "v"
// "a"
// "s"
// "c"
// "r"
// "i"
// "p"
// "t"

Agments Object(パラメータオブジェクト)
一つのパラメータオブジェクトをクラス配列オブジェクトとして扱い、関数に渡すパラメータに対応します.これは一つの用例です.

// arguments-example.js
function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
 
args('a', 'b', 'c');
// Output:
// a
// b
// c

何かあったと思いますか?前述のように、関数を呼び出したときarguments 着信を受信します  args() 関数の任意のパラメータ.ですから、もし私達が20個のパラメータを渡すと  args() 関数を使用して、20のパラメータを印刷します.
Generators(生成器)
ジェネレータは関数です.関数を終了して、後で関数に入ります.

// generator-example.js
function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 
 
for (const g of generator()) { 
  console.log(g); 
}
 
// Output:
// 1
// 2
// 3

function* ジェネレータオブジェクトに戻るジェネレータ関数を定義します.ジェネレータに関する詳細はここをクリックしてください.
反復を終了
JavaScriptは既知の4つの循環終了の方法を提供しています.breakcontinue 和  return.例を見てみましょう.

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
  break;
}
 
// Output:
// mini

この例では、私達は使っています.  throw キーワードは一回実行したらループが終了します.  break 印刷されます
通常のオブジェクトは反復できません.mini サイクルは反復のみに適用されます.通常のオブジェクトは反復できません.ちょっと見てみます.

const obj = { fname: 'foo', lname: 'bar' };
 
for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

ここでは普通のオブジェクトを定義します.  for...of ,そして試してみたら  obj これを操作すると、エラーが発生します.for...of.
クラス配列のオブジェクトを配列に変換することにより、回り道ができます.このオブジェクトは一つを持っています.  TypeError: obj[Symbol.iterator] is not a function 属性は、要素が索引される必要があります.例を見てみます.

// object-example.js
const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };
//     ，        ，         length  ，  length，         。
 
const array = Array.from(obj);  //es6    
for (const value of array) { 
    console.log(value);
}
// Output:
// foo
// bar
// baz

length 方法は、クラス配列または反復可能なオブジェクトを通して、新しいAray(配列)の例を作成することを可能にする.
For…of vs For…inArray.from() オブジェクトのすべてのエニュメレート・プロパティーを巡回します.

//for-in-example.js
Array.prototype.newArr = () => {};
Array.prototype.anotherNewArr = () => {};
//Array.prototype       Array        ，       Array           。
const array = ['foo', 'bar', 'baz'];
 
for (const value in array) { 
  console.log(value);
}
// Outcome:
// 0
// 1
// 2
// newArr
// anotherNewArr

for...in 上記の配列宣言を列挙するだけでなく、構造関数の原型から継承された非列挙属性を検索します.この例では、for...in 和  newArr プリントアウトもします.anotherNewArr 配列やオブジェクトなどのセットに対してより多く使用されますが、すべてのオブジェクトは含まれません.
注意:任意のもの  for...of 属性の要素はすべて反復可能です.

Array.prototype.newArr = () => {};
const array = ['foo', 'bar', 'baz'];
 
for (const value of array) { 
  console.log(value);
}
// Outcome:
// foo
// bar
// baz