Detaillierte Erläuterung der verschiedenen JavaScript-Traversal-Methoden. Es gibt schwarze Technologien, von denen Sie nichts wissen

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 das Beispiel direkt ansehen, es wird verwendet zu viel, es ist sehr einfach

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

Bezüglich der for-Schleife gibt es ein paar Dinge zu beachten:

• i in der for-Schleife existiert immer noch in der Bereich nach Ende der Schleife. Um eine Beeinträchtigung des Bereichs für andere Variablen in zu vermeiden, verwenden Sie die Selbstausführung der Funktion, um sie zu isolieren ()();

• 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 Return-Funktion wird beendet

• Break-Schleife wird beendet

• Continue-Schleife wird übersprungen

Vollständige Instanz

for 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, arr stellt das Element dar, das dem aktuellen Indexwert arr[item] entspricht

• Beim Durchlaufen des Objekts , item stellt den Schlüsselwert dar, arr stellt den Wert obj[item] dar, der dem Schlüsselwert entspricht >In for-Schleifen und for in-Schleifen wird der i-Wert nach dem Ende der Schleife beibehalten. Um dies zu vermeiden, nutzen Sie daher selbstausführende Funktionen.

(function() {
    for(var i in demoArr) {
        if (i == 2) {
            return; // 函数执行被终止
            // break;  // 循环被终止
            // continue;  // 循环被跳过
        };
        console.log('demoArr['+ i +']:' + demoArr[i]);
    }
    console.log('-------------');
})();

Die Verwendung von Return, Break und Continue zum Verlassen der Schleife stimmt mit der for-Schleife überein. Sie müssen jedoch darauf achten, dass return im Funktionskörper angezeigt wird Beendigung der Funktionsausführung, auch wenn es sich um Code außerhalb der Schleife handelt. Es ist keine weitere Ausführung erforderlich. Break beendet nur die Schleife und der nachfolgende Code wird weiter ausgeführt.

• forEach

demoArr.forEach(function(arg) {})

• Parameter arg stellt das Element jedes Elements im Array dar , Beispiel Wie folgt

Es gibt bestimmte Dinge, auf die man achten muss

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 kann keine Objekte durchqueren

demoArr.forEach(function(e) {
    if (e == 'CSS3') {
        return;  // 循环被跳过
        // break;   // 报错
        // continue;// 报错
    };
    console.log(e);
})

forEach Objekte im IE können nicht durchlaufen werden. Firefox und Chrome implementieren diese Methode

• forEach kann nicht break und continue verwenden, um aus der Schleife zu springen. Bei Verwendung von return ist der Effekt derselbe wie bei der Verwendung von continue in der for-Schleife

• 　do/while
  Die spezifische Implementierung der Funktion ist wie folgt, aber eine erwähnenswerte Sache ist, dass Sie bei Verwendung von continue i++ eingeben Am Ende wird sich der Wert von i++ nie ändern und schließlich in eine Endlosschleife geraten. Daher müssen Sie bei der Verwendung von do/while vorsichtig sein.

• Es wird nicht empfohlen, do/while zum Durchlaufen des Arrays zu verwenden

　$.each

　$.each(demoArr|demoObj , Funktion (e, ele))

Kann zum Durchlaufen von Arrays und Objekten verwendet werden, wobei e den Indexwert oder Schlüsselwert darstellt und ele den Wertwert darstellt

Die Ausgabe ist

// 直接使用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);
})();

Hier gibt es viele Dinge zu beachten

Verwenden Sie return oder return true, um eine Schleife zu überspringen und mit der Ausführung der folgenden Schleifen fortzufahren

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

0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"

Verwenden Sie „return false“, um die Ausführung der Schleife zu beenden, aber nicht die Funktionsausführung zu beenden

• Break and Continue kann nicht verwendet werden, um die Schleife zu überspringen

• in der Schleife Die Ausgabe dieses Werts ähnelt der folgenden

In Bezug auf diesen Wert oben: traverse

console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

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 die Eigenschaft „Enumerable“ in der Objektdateneigenschaft auf „false“ gesetzt wird

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

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

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

　$(selecter).each< zu sehen 🎜>

Speziell zum Durchlaufen von DOMList verwendet

// 查看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

Dies wird derzeit durchlaufen. Das durchlaufene DOM-Element kann die jQuery-Methode nicht aufrufen.

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

$(this) == $(ele) Das jquery-Objekt des aktuell durchlaufenen Elements kann die jQuery-Methode aufrufen Führen Sie Dom-Operationen aus
Verwenden Sie for in, um DOMList zu durchlaufen

• Weil domList kein Array, sondern ein Objekt ist, nur weil seine Schlüsselwerte 0, 1 sind, 2... und es fühlt sich ähnlich an wie ein Array. Aber das Ergebnis der direkten Durchquerung ist wie folgt:

• Wenn wir also for in zum Durchlaufen der domList verwenden, müssen wir die domList in ein umwandeln array

Objekte wie dieses und Funktionen Das Attributargumentobjekt, natürlich können auch Zeichenfolgen durchlaufen werden, aber da die Aufzählung anderer Eigenschaften der Zeichenfolge auf false gesetzt ist, ist das Ergebnis von Die Durchquerung ist die gleiche wie beim Array, sodass Sie sich über dieses Problem keine Sorgen machen müssen.

Kleine Ergänzung

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 Sie feststellen, dass einige Leute Funktionen auf diese Weise schreiben, dann zögern Sie nicht Keine Panik und denken Sie nicht, dass sie zu hochmütig sind, um sich einen Vogel leisten zu können

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

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

 以上就是JavaScript 各种遍历方式详解，有你不知道的黑科技的内容，更多相关内容请关注PHP中文网（www.php.cn）！