Explication détaillée de l'exemple de code pour diverses méthodes de parcours en JavaScript

Afin de faciliter l'explication de l'exemple, les tableaux et objets json existants sont les suivants

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
    aaa: 'Javascript',
    bbb: 'Gulp',
    ccc: 'CSS3',
    ddd: 'Grunt',
    eee: 'jQuery',
    fff: 'angular'
};

Concernant la boucle for, il y a quelques points à noter :

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

Le

dans la boucle for existe toujours dans la portée après la fin de la boucle. Afin d'éviter d'affecter d'autres variables dans la portée, utilisez la méthode d'auto-exécution de fonction pour l'isoler.

;

• iÉvitez d'utiliser la méthode de ()() Une telle longueur de tableau à chaque fois. Tous sont calculés et l'efficacité est inférieure à la méthode ci-dessus. Vous pouvez également mettre la déclaration de variable devant for pour améliorer la lisibilité

• for(var i=0; i<demo1Arr.length; i ){}

Il existe plusieurs façons de sortir de la boucle

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

• l'exécution de la fonction de retour est terminée

• la boucle de rupture est terminée

• la boucle continue est ignorée

• Instance complète

pour in

peut être utilisée pour parcourir des tableaux et des objets

Lors du parcours du tableau, l'élément représente la valeur d'index et arr représente l'élément correspondant à la valeur d'index actuelle arr[item]for(var item in arr|obj){}

• Lors du parcours de l'objet, l'élément représente la valeur clé, et arr représente la valeur correspondant à la valeur clé obj[item]

• Concernant for in, il y a les points suivants à noter :

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

In for loop et for in loop , la valeur

sera conservée une fois la boucle terminée. Par conséquent, utilisez des fonctions auto-exécutables pour éviter cela.

• L'utilisation de return, break et continue pour sortir de la boucle est cohérente avec la boucle for. Cependant, vous devez faire attention à return dans le corps de la fonction, return indique le. fin de l'exécution de la fonction, même s'il s'agit de code en dehors de la boucle. Aucune autre exécution n'est requise. Break termine uniquement la boucle et le code suivant continuera à s'exécuter. i

• forEach

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'); //不会执行
}

Le paramètre arg représente l'élément de chaque élément du tableau. L'exemple est le suivant<.>

Il y a les éléments suivants auxquels il faut prêter attention demoArr.forEach(function(arg) {})

forEach ne peut pas traverser les objets

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

forEach ne peut pas être utilisé dans IE, Firefox et Chrome implémentent cette méthode
forEach ne peut pas utiliser break et continuer à sortir de la boucle. Lors de l'utilisation de return, l'effet est le même que celui de l'utilisation de continue dans une boucle for <.>

• do/while L'implémentation spécifique de la fonction
• est la suivante, mais une chose à noter est que lors de l'utilisation de continue, si vous mettez i à la fin, le la valeur de i ne changera jamais et finira par tomber dans une boucle infinie. Par conséquent, vous devez être prudent lorsque vous utilisez do/while.

Il n'est pas recommandé d'utiliser do/while pour parcourir des tableaux

$.each

Il peut être utilisé pour parcourir des tableaux et des objets, où e représente la valeur d'index ou la valeur clé, et ele représente la valeur de la valeur

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

La sortie est

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

Il y a beaucoup de choses auxquelles il faut faire attention ici

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

Utilisez

ou

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

pour sauter une boucle et continuer à exécuter la boucle suivante

• Utiliser

  pour terminer l'exécution de la boucle, mais ne termine pas l'exécution de la fonctionreturnreturn true

Impossible d'utiliser break et continuer à sauter la boucle

• return false

  La sortie de cette valeur dans la boucle est similaire à ce qui suit

• Concernant cette valeur ci-dessus, traversez

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

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

• Pourquoi length et [[PrimitiveValue ]]Ne l'ont-ils pas traversé ? Soudain, j'ai eu une idée et j'ai trouvé la réponse dans "Javascript Advanced Programming". Cela signifie probablement que dans les propriétés internes de JavaScript, définissez le

  dans l'attribut de données d'objet sur false

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

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

dans $.each est différent de cela, mais le résultat du parcours est le même. Vous pouvez l'imprimer dans le code de test pour voir

Enumerable

$(selecter).each.

// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}

Spécialement utilisé pour parcourir DOMList

$(this)

i : valeur de séquence ele : uniquement l'élément DOM actuellement parcouru

ce courant L'élément DOM traversé ne peut pas appeler les méthodes jQuery

$('.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) L'objet jquery de l'élément actuellement traversé peut appeler des méthodes jquery pour effectuer des opérations dom

• Utilisez for in pour parcourir DOMList

Parce que domList n'est pas un tableau, mais un objet, simplement parce que ses valeurs clés sont 0, 1, 2... Cela ressemble à un tableau, mais les résultats du parcours direct sont les suivants

• Par conséquent, lorsque nous utilisons for in pour parcourir la domList, nous devons convertir la domList en un tableau

Il existe des objets et des fonctions comme celui-ci. Objets d'arguments d'attribut, bien sûr, les chaînes peuvent également être parcourues, mais comme les

des autres attributs de la chaîne sont définis sur false, le résultat de la traversée est le même que le tableau, il n'y a donc pas lieu de s'inquiéter de ce problème

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() {}

Petit supplément

var res = [].slice.call(domList);
for(var item in res) {}

Si vous constatez que certaines personnes écrivent des fonctions comme celle-ci, pas de panique, et ne pense pas qu'ils soient trop arrogants

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!