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 einfach

var 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; 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++) {};

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('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-Schleife

demoArr.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(&#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);
})();

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);// true

wird 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 各种遍历方式详解的所有内容，希望会给大家带来帮助吧

相关推荐：

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!