Heim > Artikel > Web-Frontend > Detaillierte Erläuterung verschiedener Traversal-Methoden in JavaScript
JavaScript Detaillierte Erläuterung verschiedener Traversal-Methoden, zeigt Ihnen, welche Traversal-Methoden in JavaScript sind, und erklärt sie im Detail, damit Sie JavaScript-kompetent Verschiedene Traversal-Methoden in .
Um die Beispielerklärung zu erleichtern, lauten die vorhandenen Arrays und JSON-Objekte wie folgt, zu oft verwendet, sehr einfachvar demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular'};Über die
for-Schleife, Es sind einige Punkte zu beachten Das i in der for-Schleife kann jederzeit nach Ende der Schleife verwendet werden. Um jedoch keine Auswirkungen auf andere Variablen im Gültigkeitsbereich zu haben, verwendet die Funktion
um es durch Selbstausführung zu isolieren ()(); Vermeiden Sie die Verwendung von for(var i =0; iEs gibt mehrere Möglichkeiten, aus der Schleife zu springen.
Die Ausführung der Rückgabefunktion wird beendet. continue-Schleife wird übersprungenvar i = 0, len = demo1Arr.length; for(; i<len; i++) {};
for in
for(var item in arr|obj) { } kann verwendet werden, um
Arraysund Objekte
zu durchlaufen. Beim Durchlaufen von Arrays stellt item den Indexwert dar und arr stellt das Element dar, das dem aktuellen Indexwert arr[item] Beim Durchlaufen des Objekts stellt item den Schlüsselwert dar und arr stellt den Wert dar, der dem Schlüsselwert obj[item] entspricht
Ungefähr für in gibt es Folgendes Zu beachtende Punkte: In der for-Schleife und der for-in-Schleife wird der i-Wert nach dem Ende der Schleife beibehalten. Um dies zu vermeiden, nutzen Sie daher selbstausführende Funktionen.
Die Verwendung von Return, Break und Continue zum Verlassen der Schleife entspricht der for-Schleife. Sie müssen jedoch darauf achten, dass return im Funktionskörper die Beendigung der Funktionsausführung anzeigt. Auch der Code außerhalb der Schleife wird nicht weiter implementiert. Und break beendet lediglich die Schleife und der nachfolgende Code wird weiter ausgeführt.
forEach(function() { for(var i in demoArr) { if (i == 2) { return; // 函数执行被终止 // break; // 循环被终止 // continue; // 循环被跳过 }; console.log('demoArr['+ i +']:' + demoArr[i]); } console.log('-------------'); })();Der Parameter arg stellt das Element jedes Elements im Array dar. Das Beispiel lautet wie folgt
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'); //不会执行}Die folgenden Dinge sind zu beachten
forEach kann keine Objekte durchlaufen forEach kann nicht in IE verwendet werden, Firefox und Chrome implementieren diese Methode
forEach kann break, 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-SchleifedemoArr.forEach(function(arg) {})
demoArr.forEach(function(e) { if (e == 'CSS3') { return; // 循环被跳过 // break; // 报错 // continue;// 报错 }; console.log(e); })do/while
Die spezifische Implementierung der Funktion ist wie folgt. Beachten Sie jedoch, dass sich der Wert von i++ niemals ändert, und zwar irgendwann, wenn Sie continue verwenden und i++ am Ende einfügen geraten in eine Endlosschleife. Daher müssen Sie bei der Verwendung von do/while vorsichtig sein.
$.each
kann zum Durchlaufen von Arrays und Objekten verwendet werden, wobei e den Index darstellt Wert oder Schlüsselwert, ele stellt den Wertwert dar
不建议使用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); })();Die Ausgabe ist
Hier gibt es viele Dinge zu beachten Verwenden Sie return oder return true Um eine Schleife zu überspringen, fahren Sie mit der Ausführung der nachfolgenden Schleife fort.
$.each(demoArr|demoObj, function(e, ele))Verwenden Sie „return false“, um die Ausführung der Schleife zu beenden, aber nicht die Funktionsausführung. Sie können „break“ und „ continue“ nicht verwenden, um die Schleife zu überspringen Schleife
$.each(demoArr, function(e, ele) { console.log(e, ele); })
In der Schleife Die Ausgabe dieses Werts ähnelt der folgenden
0 "Javascript" 1 "Gulp" 2 "CSS3" 3 "Grunt" 4 "jQuery" 5 "angular"
In Bezug auf diesen Wert oben: Traverse
$(selecter) .each
console.log(this);//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"} console.log(this == ele);// truewird speziell zum Durchlaufen von DOMList verwendet
$.each(this, function(e, ele) { console.log(e, ele); }) // 0 c // 1 s // 2 s // 4 3
为什么length 和 [[PrimitiveValue]]没有遍历出来?突然灵光一动,在《javascript高级编程》中找到了答案,大概意思就是javascript的内部属性中,将对象数据属性中的Enumerable设置为了false
// 查看length的内部属性console.log(Object.getOwnPropertyDescriptor(this, 'length'));// Object {value: 4, writable: false, enumerable: false, configurable: false}i: Sequenzwert ele: nur Das DOM-Element, das gerade durchlaufen wird
$.each 中的 $(this) 与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看
Dies wird derzeit durchlaufen Das durchquerte DOM-Element kann die jQuery-Methode nicht aufrufen $(this) == $(ele) Das jQuery-Objekt des aktuell durchquerten Elements kann die JQuery-Methode aufrufen, um Dom-Operationen auszuführen
Verwenden Sie for in, um DOMList zu durchlaufen
$('.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'); }; })Da domList kein Array, sondern ein Objekt ist, Nur weil seine Schlüsselwerte 0, 1, 2 sind ... Es fühlt sich ähnlich an wie ein Array, aber direkt. Die Ergebnisse der Durchquerung sind wie folgt
Daher verwenden wir for Um die domList zu durchlaufen, müssen wir die domList in ein Array konvertieren
Kleine Ergänzung
如果你发现有些人写函数这样搞,不要惊慌,也不要觉得他高大上鸟不起
+function(ROOT, Struct, undefined) { ... }(window, function() { function Person() {} })
()(), !function() {}() +function() {}() 三种函数自执行的方式
以上就是JavaScript 各种遍历方式详解的所有内容,希望会给大家带来帮助吧
相关推荐:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung verschiedener Traversal-Methoden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!