Explication détaillée des diverses méthodes de traversée JavaScript, il existe des technologies noires que vous ne connaissez pas

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

　pour

Vous pouvez regarder l'exemple directement, il est utilisé trop, c'est très simple

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

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

• i dans la boucle for existe toujours dans le scope après la fin de la boucle. Afin d'éviter d'affecter la portée des autres variables, utilisez l'auto-exécution de la fonction pour les isoler ()();

• Évitez d'utiliser for(var i= 0; i

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

• Il existe plusieurs façons de sortir de la boucle

• 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

for(var item in arr|obj){} peut être utilisé pour parcourir des tableaux et des objets

• Lors de la traversée du tableau, item représente la valeur d'index, arr représente l'élément correspondant à la valeur d'index actuelle arr[item]

• Lors de la traversée de l'objet , item représente la valeur clé, arr représente la valeur obj[item] correspondant à la valeur clé >Dans les boucles for et for in, la valeur i sera conservée après la fin de la boucle. Par conséquent, utilisez des fonctions auto-exécutables pour éviter cela.

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

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.

• forEach

demoArr.forEach(function(arg) {})

• Le paramètre arg représente l'élément de chaque élément du tableau , exemple Comme suit

Il y a des choses spécifiques auxquelles il faut faire attention

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 ne peut pas traverser l'objet

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

forEach ne peut pas parcourir l'objet dans IE. En utilisant, 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. utiliser continue dans la 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, la valeur de i ne changera jamais et finira par tomber dans une boucle sans fin. Par conséquent, vous devez être prudent lorsque vous utilisez do/while.

• Il n'est pas recommandé d'utiliser do/while pour parcourir le tableau

　$.each

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

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 valeur

La sortie est

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

Il y a beaucoup de choses auxquelles faire attention ici

Utilisez return ou return true pour sauter une boucle et continuer à exécuter les boucles suivantes

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

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

Utilisez return false pour terminer l'exécution de la boucle, mais pas terminer l'exécution de la fonction

• Impossible d'utiliser break et continuer à sauter la boucle

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

Concernant cette valeur ci-dessus, traverse

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 sont-ils pas traversés ? 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 la propriété Enumerable dans la propriété de données d'objet sur false

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

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

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

　$(selecter).each<. 🎜>

Spécialement utilisé pour parcourir DOMList

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

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

ceci est actuellement en cours de parcours L'élément DOM traversé ne peut pas appeler la méthode 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 parcouru peut appeler la méthode jquery pour effectuer des opérations dom
Utiliser 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... et cela ressemble à un tableau. Mais le résultat du parcours direct est le suivant

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

Objets comme celui-ci et fonctions L'objet arguments d'attribut, bien sûr, les chaînes peuvent également être parcourues, mais comme l'énumérable des autres propriétés de la chaîne est défini 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.

Petit supplément

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

Si vous constatez que certaines personnes écrivent des fonctions de cette manière, ne paniquez, et ne pensez pas qu'ils sont trop nobles pour s'offrir un oiseau

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

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

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