Verschiedene 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 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(&#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 noch im Gültigkeitsbereich, nachdem die Schleife endet Vermeiden Sie Auswirkungen auf andere Variablen im Bereich und isolieren Sie sie durch ()();

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 zu springen

Rückgabefunktionsausführung wird beendet

Break-Schleife wird beendet

Continue-Schleife wird übersprungen

Vollständige Instanz

for in

for(var item in arr|obj){} kann verwendet werden Beim Durchlaufen von Arrays und Objekten

Beim Durchlaufen von Arrays stellt item den Indexwert dar, arr stellt das Element dar, das dem aktuellen Indexwert entspricht arr[item]

Beim Durchlaufen von Objekten stellt item den Schlüsselwert dar , arr stellt den Schlüssel dar. Der entsprechende Wert value obj[item]

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

In Bezug auf for in sind die folgenden Punkte zu beachten:

In der for-Schleife und der for-in-Schleife ist das i Der Wert steht am Ende der Schleife. Behalten Sie ihn anschließend bei. 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. 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'); //不会执行
}

forEach

demoArr.forEach(function(arg) {})

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

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

Im Einzelnen sind die folgenden Dinge zu beachten

forEach kann keine Objekte durchlaufen

forEach kann nicht in IE verwendet werden, Firefox und Chrome implementieren diese Methode

forEach kann nicht verwendet werden, um break und continue aus der Schleife zu springen. Bei Verwendung von return ist der Effekt der gleiche wie bei Verwendung von continue in einer for-Schleife

　do/while

　Das Die spezifische Implementierung der Funktion lautet wie folgt. Beachten Sie jedoch Folgendes: Wenn Sie bei Verwendung von continue i++ am Ende einfügen, ändert sich der Wert von i++ nie und gerät schließlich in eine Endlosschleife. Daher müssen Sie bei der Verwendung von do/while vorsichtig sein.

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

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

　$.each

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

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

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

Die Ausgabe ist

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

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 Beenden Sie die Funktionsausführung nicht

Sie können die Schleife nicht mit „Break and Continue“ ü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

Über die diesen Wert oben durchlaufen, ihn durchlaufen

$.each(this, function(e, ele) {
    console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3

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

// Anzeigen der internen Eigenschaft von Länge
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Objekt {Wert: 4, beschreibbar: falsch, aufzählbar: falsch, konfigurierbar: falsch}

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

　$(selecter).each

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

i: Sequenzwert ele: nur das aktuell durchquerte DOM-Element

Dieses aktuell durchquerte DOM-Element kann die jQuery-Methode nicht aufrufen

$ (this) == $(ele) Das JQuery-Objekt des aktuell durchlaufenen Elements kann die JQuery-Methode aufrufen, um Dom-Operationen auszuführen

Verwenden Sie for in, um DOMList zu durchlaufen

Weil domList kein ist Array, aber ein Objekt fühlt sich einem Array ähnlich an, nur weil seine Schlüsselwerte 0, 1, 2 ... sind, 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() {}

Daher verwenden wir Damit wir domList durchqueren können, müssen wir domList Convert to array

var res = [].slice.call(domList);

for(var item in res) {}

Objekte wie dieses haben auch Funktionen Das Attribut arguments object, natürlich können Strings auch durchlaufen werden, aber da die Aufzählung anderer Eigenschaften des Strings auf false gesetzt ist, ist das Ergebnis des Durchlaufs dasselbe wie das Array , sodass Sie sich über dieses Problem keine Sorgen machen müssen.

　Kleine Ergänzung

Wenn Sie feststellen, dass einige Leute Funktionen wie diese schreiben, geraten Sie nicht in Panik und denken Sie nicht, dass dies der Fall ist zu arrogant

()(), !function() {}() +function() {}() Drei Möglichkeiten der Selbstausführung von Funktionen^_^

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