Detaillierte Erläuterung der Javascript-Traversal-Methode_Javascript-Fähigkeiten

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

Sie können sich einfach das Beispiel ansehen, es wird zu oft verwendet, es ist sehr einfach

(function() {
 for(var i=0, len=demoArr.length; i<len; i++) {
 if (i == 2) {
 // return; // 函数执行被终止
 // break; // 循环被终止
 continue; // 循环被跳过
 };
 console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
 }
})();
关于for循环，有一下几

Bezüglich der for-Schleife sind die folgenden Punkte zu beachten

• i in der for-Schleife existiert nach dem Ende der Schleife noch im Gültigkeitsbereich. Um andere Variablen im Gültigkeitsbereich nicht zu beeinträchtigen, wird es durch die Selbstausführung der Funktion ()();
isoliert
• Vermeiden Sie die Verwendung von for(var i=0; i

var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};

• Es gibt mehrere Möglichkeiten, aus der Schleife auszubrechen

Ausführung der Rückgabefunktion wird beendet
break Die Schleife wird beendet
Fortsetzungsschleife wird übersprungen
Vollständiges Beispiel

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 der Schleife ist im Einklang mit der For-Schleife. Sie müssen jedoch darauf achten, dass return im Funktionskörper die Beendigung der Funktionsausführung anzeigt Die Schleife wird nicht mehr weiter ausgeführt. 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
direkt verwenden

(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 und ele den Wert

darstellt

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

Die Ausgabe ist

0 „Javascript“
1 „Schluck“
2 „CSS3“
3 „Grunzen“
4 „jQuery“
5 „eckig“
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}

$(this) in $.each unterscheidet sich davon, aber das Durchlaufergebnis ist das gleiche. Sie können es im Testcode ausdrucken, um

zu sehen
$(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 aktuell durchlaufene DOM-Element, 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 sein Schlüsselwert 0, 1, 2 ist... 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) {}

类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.
小补充

如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上。

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

()(), !function() {}() +function() {}() 三种函数自执行的方式。

以上就是本文的全部内容，希望对大家的学习有所帮助。