Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung verschiedener Traversal-Methoden in JavaScript

Detaillierte Erläuterung verschiedener Traversal-Methoden in JavaScript

韦小宝
Freigeben: 2017-11-30 11:24:18
Original
1774 Leute haben es durchsucht

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 einfach

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
Ü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; i
(function() {    for(var i=0, len=demoArr.length; i<len; i++) {        if (i == 2) {            // return;   // 函数执行被终止
            // break;    // 循环被终止
            continue; // 循环被跳过
        };        console.log(&#39;demo1Arr[&#39;+ i +&#39;]:&#39; + demo1Arr[i]);
    }
})();
Nach dem Login kopieren

Es gibt mehrere Möglichkeiten, aus der Schleife zu springen.

Die Ausführung der Rückgabefunktion wird beendet.

break-Schleife wird beendet

continue-Schleife wird übersprungen

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

for in

for(var item in arr|obj) { } kann verwendet werden, um

Arrays

und Objekte

zu durchlaufen. Beim Durchlaufen von 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

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(&#39;demoArr[&#39;+ i +&#39;]:&#39; + demoArr[i]);
    }    console.log(&#39;-------------&#39;);
})();
Nach dem Login kopieren

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

function res() {   
 var demoArr = [&#39;Javascript&#39;, &#39;Gulp&#39;, &#39;CSS3&#39;, &#39;Grunt&#39;, &#39;jQuery&#39;, &#39;angular&#39;];  
  for(var item in demoArr) {      
    if (item == 2) {       
         return;
        };        
        console.log(item, demoArr[item]);
    }    
    console.log(&#39;desc&#39;, &#39;function res&#39;); //不会执行}
Nach dem Login kopieren
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-Schleife
demoArr.forEach(function(arg) {})
Nach dem Login kopieren

demoArr.forEach(function(e) {    if (e == &#39;CSS3&#39;) {        return;  // 循环被跳过
        // break;   // 报错
        // continue;// 报错
    };
    console.log(e);
})
Nach dem Login kopieren
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的方式来遍历数组
Nach dem Login kopieren
// 直接使用while
(function() {    var i = 0,
        len = demoArr.length;    while(i < len) {        if (i == 2) {            // return; // 函数执行被终止
            // break;  // 循环被终止
            // continue;  // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!!
        };        console.log(&#39;demoArr[&#39;+ i +&#39;]:&#39; + demoArr[i]);
        i ++;
    }    console.log(&#39;------------------------&#39;);
})();// do while(function() {    var i = 0,
        len = demo3Arr.length;    do {        if (i == 2) {            break; // 循环被终止
        };        console.log(&#39;demo2Arr[&#39;+ i +&#39;]:&#39; + demo3Arr[i]);
        i++;
    } while(i<len);
})();
Nach dem Login kopieren
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))
Nach dem Login kopieren
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);
})
Nach dem Login kopieren

In der Schleife Die Ausgabe dieses Werts ähnelt der folgenden

0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"
Nach dem Login kopieren

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);// true
Nach dem Login kopieren

wird speziell zum Durchlaufen von DOMList verwendet
$.each(this, function(e, ele) { 
   console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3
Nach dem Login kopieren
为什么length 和 [[PrimitiveValue]]没有遍历出来?突然灵光一动,在《javascript高级编程》中找到了答案,大概意思就是javascript的内部属性中,将对象数据属性中的Enumerable设置为了false
Nach dem Login kopieren
// 查看length的内部属性console.log(Object.getOwnPropertyDescriptor(this, &#39;length&#39;));// Object {value: 4, writable: false, enumerable: false, configurable: false}
Nach dem Login kopieren
i: Sequenzwert ele: nur Das DOM-Element, das gerade durchlaufen wird
$.each 中的 $(this) 与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看
Nach dem Login kopieren

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

$(&#39;.list li&#39;).each(function(i, ele) {    console.log(i, ele);    // console.log(this == ele); // true
    $(this).html(i);    if ($(this).attr(&#39;data-item&#39;) == &#39;do&#39;) {
        $(this).html(&#39;data-item: do&#39;);
    };
})
Nach dem Login kopieren

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() {}
})
Nach dem Login kopieren

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

以上就是JavaScript 各种遍历方式详解的所有内容,希望会给大家带来帮助吧

相关推荐:

JavaScript 易错知识点整理

处理JavaScript异常的方法

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage