JavaScriptの各種ループを使ったトラバース方法まとめ_基礎知識

例の説明を容易にするために、既存の配列と json オブジェクトは次のとおりです

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
  aaa: 'Javascript',
  bbb: 'Gulp',
  ccc: 'CSS3',
  ddd: 'Grunt',
  eee: 'jQuery',
  fff: 'angular'
};

のため

for(var item in arr|obj){} は配列とオブジェクトを走査するために使用できます

配列を走査する場合、item はインデックス値を表し、arr は現在のインデックス値に対応する要素を表します arr[item]
オブジェクトをトラバースするとき、 item はキー値を表し、 arr はキー値 obj[item]
に対応する値を表します。

(function() {
  for(var i in demoArr) {
    if (i == 2) {
      return; // 函数执行被终止
      // break; // 循环被终止
      // continue; // 循环被跳过
    };
    console.log('demoArr['+ i +']:' + demoArr[i]);
  }
  console.log('-------------');
})();

for in に関しては以下の注意点があります。

for ループと for in ループでは、ループ終了後も i の値が保持されます。したがって、これを回避するには、自己実行関数を使用してください。
return、break、および continue を使用してループから抜け出すことは、for ループと一貫しています。ただし、関数本体では、return はループの外側のコードでも関数の実行の終了を示すことに注意する必要があります。実行を継続しなくなりました。 Break はループを終了するだけであり、後続のコードは引き続き実行されます。

function res() {
  var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];

  for(var item in demoArr) {
    if (item == 2) {
      return;
    };
    console.log(item, demoArr[item]);
  }
  console.log('desc', 'function res'); //不会执行
}
forEach

demoArr.forEach(function(arg) {})

パラメータ arg は、配列内の各項目の要素を表します。例は次のとおりです。

demoArr.forEach(function(e) {
  if (e == 'CSS3') {
    return; // 循环被跳过
    // break;  // 报错
    // continue;// 报错
  };
  console.log(e);
})

具体的に注意が必要な点は以下の通りです

• forEach はオブジェクトをトラバースできません
• forEach は IE では使用できません。Firefox と Chrome ではこのメソッドが実装されています
• forEach では、break を使用してループから抜け出すことはできません。return を使用する場合、効果は for ループ内で continue を使用するのと同じです。

する/しながら

関数の具体的な実装は以下の通りですが、注意すべき点は、 continue を使用する場合、最後に i を置くと i の値が変化せず、最終的には無限ループに陥ることです。したがって、do/while を使用する場合は注意が必要です。

配列を走査するために do/while を使用することは推奨されません

// 直接使用while
(function() {
  var i = 0,
    len = demoArr.length;
  while(i < len) {
    if (i == 2) {
      // return; // 函数执行被终止
      // break; // 循环被终止
      // continue; // 循环将被跳过，因为后边的代码无法执行，i的值没有改变，因此循环会一直卡在这里，慎用！！
    };
    console.log('demoArr['+ i +']:' + demoArr[i]);
    i ++;
  }
  console.log('------------------------');
})();

// do while
(function() {
  var i = 0,
    len = demo3Arr.length;
  do {
    if (i == 2) {
      break; // 循环被终止
    };
    console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
    i++;
  } while(i<len);
})();

$.each

$.each(demoArr|demoObj, function(e, ele))

は配列とオブジェクトを走査するために使用できます。ここで、e はインデックス値またはキー値を表し、ele は値

を表します。

$.each(demoArr, function(e, ele) {
  console.log(e, ele);
})

出力は

です

0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"

ここでは注意すべきことがたくさんあります

• ループをスキップし、後続のループの実行を続けるには、return または return true を使用します
• ループの実行を終了するには return false を使用しますが、関数の実行は終了しません
• ブレークを使用してループをスキップし続けることはできません

ループ内のこの値の出力は次のようになります

console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

上記の this 値について、トラバースしてみましょう

$.each(this, function(e, ele) {
  console.log(e, ele);
})

// 0 c
// 1 s
// 2 s
// 4 3

長さと [[PrimitiveValue]] が走査されないのはなぜですか?ふと思いついて、その答えを「JavaScript 高度なプログラミング」で見つけました。おそらく JavaScript の内部プロパティで、オブジェクトのデータ属性の Enumerable を false に設定するということです
。

// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}
$.each 中的 $(this) 与this有所不同，不过遍历结果却是一样，你可以在测试代码中打印出来看看

$(セレクター).each

DOMList を走査するために特別に使用されます

$('.list li').each(function(i, ele) {
  console.log(i, ele);
  // console.log(this == ele); // true
  $(this).html(i);
  if ($(this).attr('data-item') == 'do') {
    $(this).html('data-item: do');
  };
})

i: シーケンス値 ele: 現在走査されている DOM 要素のみ
これは現在トラバースされている DOM 要素です。jQuery メソッドを呼び出すことはできません
$(this) == $(ele) 現在トラバースされている要素の jquery オブジェクト。jquery メソッドを呼び出して dom 操作を実行できます
DOMList をトラバースするには for in を使用します

domList は配列ではなくオブジェクトなので、キーの値が 0、1、2... であるだけで配列に似ていますが、直接走査した結果は次のようになります

var domList = document.getElementsByClassName('its');
for(var item in domList) {
  console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
//  ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}

したがって、for in を使用して domList を走査するときは、domList を配列に変換する必要があります

var res = [].slice.call(domList);
for(var item in res) {}

このようなオブジェクトには関数のプロパティ引数オブジェクトもあります。もちろん、文字列も走査できますが、文字列の他のプロパティの列挙可能値が false に設定されているため、走査の結果は配列と同じになります。つまり、この問題についてはもう心配しないでください。
ちょっとした追加

このような関数を書いている人がいると知っても、パニックにならないでください。また、彼らは鳥を飼う余裕がないなど高尚な考えを持っているとは考えないでください。

+function(ROOT, Struct, undefined) {
  ... 
}(window, function() {
  function Person() {}
})

()(), !function() {}() function() {}() 関数の自己実行の 3 つの方法^_^