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' };
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('demo1Arr['+ i +']:' + 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
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('-------------'); })();
forEach
Le paramètre arg représente l'élément de chaque élément du tableau , exemple Comme suit
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); })
Il n'est pas recommandé d'utiliser do/while pour parcourir le tableau
$.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 valeurLa sortie est
// 直接使用while (function() { var i = 0, len = demoArr.length; while(i < len) { if (i == 2) { // return; // 函数执行被终止 // break; // 循环被终止 // continue; // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!! }; console.log('demoArr['+ i +']:' + demoArr[i]); i ++; } console.log('------------------------'); })(); // do while (function() { var i = 0, len = demo3Arr.length; do { if (i == 2) { break; // 循环被终止 }; console.log('demo2Arr['+ i +']:' + demo3Arr[i]); i++; } while(i<len); })();
$.each(demoArr, function(e, ele) { console.log(e, ele); })
0 "Javascript" 1 "Gulp" 2 "CSS3" 3 "Grunt" 4 "jQuery" 5 "angular"
console.log(this); //String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"} console.log(this == ele); // true
$.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}
ceci est actuellement en cours de parcours L'élément DOM traversé ne peut pas appeler la méthode jQueryi : valeur de séquence ele : uniquement l'élément DOM actuellement parcouru
$('.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'); }; })
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
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() {}
+function(ROOT, Struct, undefined) { ... }(window, function() { function Person() {} })
()(), !function() {}() +function() {}() 三种函数自执行的方式^_^
以上就是JavaScript 各种遍历方式详解,有你不知道的黑科技的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!