Zusammenfassung der Möglichkeiten zum Durchlaufen verschiedener Schleifen in JavaScript_Grundkenntnisse

Um die Beispielerklärung zu erleichtern, lauten die vorhandenen Arrays und JSON-Objekte wie folgt

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

für in

for(var item in arr|obj){} kann zum Durchlaufen von Arrays und Objekten verwendet werden

Beim Durchlaufen des Arrays stellt item den Indexwert dar und arr stellt das Element dar, das dem aktuellen Indexwert arr[item] entspricht
Beim Durchlaufen des Objekts stellt item den Schlüsselwert dar und arr stellt den Wert dar, der dem Schlüsselwert obj[item]
entspricht

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

In Bezug auf in sind folgende Punkte zu beachten:

In for-Schleifen und for-in-Schleifen bleibt der i-Wert nach Ende der Schleife erhalten. Um dies zu vermeiden, nutzen Sie daher selbstausführende Funktionen.
Die Verwendung von Return, Break und Continue zum Verlassen einer Schleife ist mit der for-Schleife konsistent. Sie müssen jedoch darauf achten, dass return im Funktionskörper die Beendigung der Funktionsausführung anzeigt nicht mehr weiter ausführen. Break beendet nur die Schleife und der nachfolgende Code wird weiter ausgeführt.

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) {})

Der Parameter arg stellt das Element jedes Elements im Array dar. Das Beispiel sieht wie folgt aus

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

Im Folgenden sind die spezifischen Punkte aufgeführt, die Aufmerksamkeit erfordern

• forEach kann das Objekt nicht durchlaufen
• forEach kann nicht im IE verwendet werden, Firefox und Chrome implementieren diese Methode
• forEach kann break und continue nicht verwenden, um aus der Schleife zu springen. Bei Verwendung von return ist der Effekt derselbe wie bei Verwendung von continue in einer for-Schleife

tun/während

Die spezifische Implementierung der Funktion ist wie folgt. Beachten Sie jedoch, dass sich der Wert von i bei Verwendung von continue nie ändert und schließlich in eine Endlosschleife gerät, wenn Sie i am Ende einfügen. Daher müssen Sie bei der Verwendung von do/while vorsichtig sein.

Es wird nicht empfohlen, do/while zum Durchlaufen von Arrays zu verwenden

// 直接使用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))

kann zum Durchlaufen von Arrays und Objekten verwendet werden, wobei e den Indexwert oder Schlüsselwert darstellt und ele den Wert

darstellt

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

Die Ausgabe ist

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

Hier gibt es viele Dinge zu beachten

• Verwenden Sie „return“ oder „return true“, um eine Schleife zu überspringen und mit der Ausführung der nachfolgenden Schleife fortzufahren
• Verwenden Sie return false, um die Ausführung der Schleife zu beenden, aber nicht die Funktionsausführung zu beenden
• Pause und Continue können nicht verwendet werden, um Schleifen zu überspringen

Die Ausgabe dieses Werts in der Schleife ähnelt der folgenden

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

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

Lassen Sie uns den obigen Wert durchlaufen

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

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

Warum werden Länge und [[PrimitiveValue]] nicht durchlaufen? Plötzlich hatte ich eine Idee und fand die Antwort in „Javascript Advanced Programming“. Es bedeutet wahrscheinlich, dass in den internen Eigenschaften von JavaScript das Enumerable im Objektdatenattribut auf „false“ gesetzt wird

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

$(selecter).each

Wird speziell zum Durchlaufen von DOMList verwendet

$('.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: Sequenzwert ele: nur das aktuell durchlaufene DOM-Element

Dies ist das DOM-Element, das gerade durchlaufen wird. jQuery-Methoden können nicht
aufgerufen werden $(this) == $(ele) Das JQuery-Objekt des aktuell durchlaufenen Elements. Sie können die JQuery-Methode aufrufen, um Dom-Operationen auszuführen

Verwenden Sie for in, um DOMList zu durchlaufen

Weil domList kein Array, sondern ein Objekt ist, nur weil seine Schlüsselwerte 0, 1, 2 sind ... fühlt es sich ähnlich an wie ein Array, aber das Ergebnis der direkten Durchquerung ist wie folgt

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() {}

Wenn wir also for in verwenden, um die domList zu durchlaufen, müssen wir die domList in ein Array konvertieren

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

Objekte wie dieses haben auch Eigenschaftsargumente von Objekten von Funktionen. Natürlich können auch Zeichenfolgen durchlaufen werden, aber da die Aufzählung anderer Eigenschaften der Zeichenfolge auf „false“ gesetzt ist, ist das Ergebnis der Durchquerung dasselbe wie das Array. Das heißt, machen Sie sich über dieses Problem keine Sorgen mehr.

Kleine Ergänzung

Wenn Sie feststellen, dass manche Leute solche Funktionen schreiben, geraten Sie nicht in Panik und denken Sie nicht, dass sie zu hochgesinnt sind, um sich einen Vogel leisten zu können

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

()(), !function() {}() function() {}() Drei Möglichkeiten der Selbstausführung von Funktionen^_^