JavaScript配列遍歴:for、foreach、for in、for of、$.each、$().eachの違い

一、for
Javascriptのforループで、配列を巡る

var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
    console.log(arr[i])
}
//1,2,3,4

九九乗算表:

for ( var x = 1; x <= 9; x++) {
    var str="";
    for ( var y = 1; y <= x; y++) {
    str+=x + "*" + y + " = " + (x * y)+"  ";         
    }
    console.log(str);
}

二、foreach
forEachサイクルでは、要素を直接取り出すことができ、index値も取ることができます.しかしforEachにはいくつかの限界があり、continueがスキップしたりbreakがループを終了したりすることはできません.

let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, index, arr) {
    console.log('index:'+index+','+'val:'+val) // val     ，index      ，arr  
    console.log(arr)
})
//index:0,val:a
//["a", "b", "c", "d"]0: "a"1: "b"2: "c"3: "d"
//index:1,val:b
//["a", "b", "c", "d"]
//index:2,val:c
//["a", "b", "c", "d"]
//index:3,val:d
//["a", "b", "c", "d"]

[].forEach(function(value,index,array){     
　　　　//do something     
　　});          
    ：
 $.each([],function(index,value,array){     
　　　//do something     
　})

三、for in
for(var item in arr|obj){}配列とオブジェクトの配列を巡回する場合に使用できます.itemはインデックス値を表し、arrは現在のインデックス値に対応する要素arr[item]がオブジェクトを巡回する場合、itemはkey値を表し、arrはkey値に対応するvalue値obj[item]for inは一般的にオブジェクトの属性を巡回し、オブジェクト自体のすべての列挙可能な属性を巡回します.オブジェクトがコンストラクション関数のプロトタイプから継承するプロパティ

var obj = {a:1, b:2, c:3};    
for (let item in obj) {
  console.log("obj." + item + " = " + obj[item]);
}
// obj.a = 1
// obj.b = 2
// obj.c = 3
var arr = ['a','b','c'];
for (var item in arr) {
    console.log(item) //0 1 2
    console.log(arr[item]) //a b c
}

四、for of
ES 6で新しく追加された構文for of文は、反復可能なオブジェクトを反復するためのループを作成します.ES 6に導入されたfor ofループは、for inおよびforEach()の代わりになり、新しい反復プロトコルをサポートする.for ofでは、Arrays(配列)、Strings(文字列)、Maps(マッピング)、Sets(集合)などの反復可能なデータ構造などを巡回できます.配列をループします.

let arr = ['A', 'B', 'C']
for (let val of arr) {
    console.log(val) 
}
// A B C

文字列を繰り返します.

let iterable = "abc";

for (let value of iterable) {
  console.log(value);
}
// "a"
// "b"
// "c"

次のようにループします.

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

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

次のようにループします.

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

enumerable属性を持つオブジェクトfor ofループをループ通常のオブジェクトに直接使用することはできませんが、オブジェクトが持つ属性別にループする場合は、組み込まれたObjectを使用します.keys()メソッド:

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

ジェネレータ(generators):

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

五、jQueryの中の$each
$.each(arr|obj,function(k,v))は、kがインデックス値またはkey値、vがvalue値を表す配列およびオブジェクトを巡回するために使用できます.

var arr = ['a','b','c']
$.each(arr, function(key, val) {
    console.log(key, val);
})
//0 a
//1 b
//2 c

六、jQueryの中の$().each()
\$().each()はdom処理に多く用いられ,主にDOMListを遍歴するために用いられる.ページに複数のinputラベルタイプがcheckboxである場合、この場合は$()を用いる.each()は、複数のcheckboxを処理します.たとえば、次のようにします.

$(“input[name=’checkbox’]”).each(function(i){
if($(this).attr(‘checked’)==true){
//    
}

結論:
オブジェクト属性をループするときにfor inを使用し、配列をループするときにfor ofを使用することをお勧めします.for inはkeyを循環し、for ofはvalueを循環する.for ofはES 6が新たに導入した特性である.ES 5のfor inの不足を修復しました;for ofは通常のオブジェクトを循環することができず、Objectと通過する必要がある.keys()を組み合わせて使用します.
ループから飛び出す方法は以下の通りである:return関数の実行が終了する;breakサイクルが終了する.continueループはスキップされます.