実例解析forEach、for…inとfor…of

開発の過程では常に循環遍歴やオブジェクトが必要です.jsも多くの方法を提供してくれました.その中には3人兄弟のforEach、for…in、for…ofがあります.この3つの方法は使用頻度が一番高いはずですが、多くの人が値がばかで分かりません.これらの機能と注意点を混同しました.今日に限って、大別してあげます.ω< ).
forEach
forEach()法は配列の各要素に対して一度に提供する関数を実行する.
ES 5から始まって、JavascriptはforEach方法を内蔵して、配列を巡回するために用います. .

var arr = ['a', 'b', 'c', 'd', 'e'];

arr.forEach(function(item) {
  console.log(item); // a,b,c,d,e
});

!注意:forEach方法は使えません.  break ステートメントがサイクルから飛び出すか、または関数からreturnを使用して戻ります.
 
for…in
for...inステートメントは、オブジェクトのエニュメレート・属性を任意の順序で巡回します.属性ごとにステートメントが実行されます.
文法:

for (variable in object) {...}

variableは、反復ごとに異なる属性名を変数に割り当てます.
object 属性のオブジェクトを繰り返し列挙します.

//    
let obj = {a: '1', b: '2', c: '3', d: '4'};
for (let o in obj) {
    console.log(o)    //                a,b,c,d
    console.log(obj[o])  //           1，2，3，4
}


//    
Object.prototype.objName = 'objName '; 
var obj = {a: '1', b: '2', c: '3', d: '4'};
for (let o in obj) {
    console.log(o)    // a,b,c,d,objName 
}

for...inサイクルは、エニュメレート・属性のみを巡回します.ArayとObjectのように、内蔵構造関数を使用して作成されたオブジェクトは、Object.prototypeとString.prototypeからエニュメレート・属性を継承します.例えば、StringのindexOf() 方法またはObjectのtoString()方法.オブジェクト自体のエニュメレート・属性、オブジェクトがその構造関数のプロトタイプから継承される属性を巡回します. 
注意:for...inを使用せずにArayを反復することを提案します.設計の最初は、配列ではなく通常の文字列の値をkeyとするオブジェクトに使用されます.
配列インデックスは整数名のエニュメレート・プロパティーだけで、一般的なオブジェクト属性と同じです.forは保証されません.inは任意の特定の順序でインデックスに戻ります.反復の順序は実行環境に依存しているので、配列遍歴は必ずしも順序で要素にアクセスするとは限りません.したがって、反復アクセス順序が重要な配列を使用する場合は、整数インデックスでforループしたほうがいいです.環(またはAray.prototype.forEach()またはfor...ofサイクルを使用します.for...inのサイクルは、break，throwによって終了することができる.

var obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
	if(o=='c'){
        break;
    }
    console.log(o);
}

//   ： a,b

 
for…of.
for...ofステートメントは、反復可能なオブジェクト(Aray,Map,Set,String,TypedAray,argmentsオブジェクトなどを含む)上で反復ループを作成し、ユーザー定義の反復フックを呼び出し、各属性の値についてステートメントを実行します.
構文:

for (variable of iterable) {
  //statements
}

variableは、反復ごとに異なる属性の値を変数に割り当てます.
iterable 属性のオブジェクトを繰り返し列挙します.
反復配列Aray

let iterable = [10, 20, 30];
for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

反復文字列String

let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

反復Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

 繰り返しSet

let iterable = new Set([1, 1, 2, 2, 3, 3]);

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

for...ofのサイクルについては、breakによって、  throw またはreturnで終了します.このような場合には、シーケンサは終了します.

function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (let o of foo()) { 
  console.log(o); 
  break; // closes iterator, triggers return
}

 
for…ofとfor…inの違い  for...inであろうと、for...ofであろうと、語句は反復的なものであり、それらの間の主な違いは反復的な方式にある.
for...in文は、元の挿入順序で反復オブジェクトのエニュメレート・プロパティーを表します.
for...ofステートメントは、反復可能なオブジェクトを巡回して、反復するデータを定義します.
以下の例は、Arayと一緒に使用する場合、for...ofサイクルとfor...inサイクルの違いを示しています.

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};


//        objCustom  ，    Array        arrCustom  ，
//           Object.prototype Array.prototype。
//         ，  iterable    objCustom arrCustom。
let iterable = [3, 5, 7];
iterable.foo = 'hello world';


//              iterable        。
//         3, 5, 7  hello，          。 
//             arrCustom objCustom。
//     ，     for...in    ，           ，    
for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}


//           ，     hasOwnProperty()    ，
//                （     ）。   ，      。
//       0, 1, 2 foo，          （     ）。
//   arrCustom objCustom     ，        。
for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}


//         iterable             ，        3, 5, 7，          。
for (let i of iterable) {
  console.log(i); // 3, 5, 7
}

上でざっと見られますが、for...inは対象のキー(key)、for...ofは対象の値です.
これ以外に、for...ofはiterableオブジェクトを循環できません.

let newObj = {a: '1', b: '2', c: '3', d: '4'};
for (let o of newObj) {
    console.log(o);    // Uncaught TypeError: newObj is not iterable
}