Detaillierte Erläuterung der Javascript-Traversal-Methode_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:32:49

Original

1121 Leute haben es durchsucht

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'
};

Nach dem Login kopieren

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循环，有一下几

Nach dem Login kopieren

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 ()();
Vermeiden Sie die Verwendung von for(var i=0; i

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

Nach dem Login kopieren

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('-------------');
})();

Nach dem Login kopieren

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'); //不会执行
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

$.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);
})

Nach dem Login kopieren

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

Nach dem Login kopieren

Lassen Sie uns den obigen Wert durchlaufen

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

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

Nach dem Login kopieren

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}

Nach dem Login kopieren

$(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');
 };
})

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

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