Pour 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
Tu peux juste regarder l'exemple, c'est trop utilisé, 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]); } })(); 关于for循环,有一下几
À propos de la boucle for, il y a les points suivants à noter
var i = 0, len = demo1Arr.length; for(; i<len; i++) {};
l'exécution de la fonction de retour est terminée
break La boucle est terminée
la boucle continue est ignorée
Exemple complet
pour en
for(var item in arr|obj){} peut être utilisé pour parcourir des tableaux et des objets
(function() { for(var i in demoArr) { if (i == 2) { return; // 函数执行被终止 // break; // 循环被终止 // continue; // 循环被跳过 }; console.log('demoArr['+ i +']:' + demoArr[i]); } console.log('-------------'); })();
Concernant le for in, il y a les points suivants à noter :
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'); //不会执行 }
pourEach
demoArr.forEach(function(arg) {})
Le paramètre arg représente l'élément de chaque élément du tableau. L'exemple est le suivant
demoArr.forEach(function(e) { if (e == 'CSS3') { return; // 循环被跳过 // break; // 报错 // continue;// 报错 }; console.log(e); })
Voici les points spécifiques qui nécessitent une attention
forEach ne peut pas traverser l'objet
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
.
faire/pendant
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 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
// Utiliser while
directement
(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); })();
$.chacun
$.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
$.each(demoArr, function(e, ele) { console.log(e, ele); })
La sortie est
0 "Javascript"
1 "Avaler"
2 "CSS3"
3 "Grognement"
4 "jQuery"
5 "angulaire"
Il y a beaucoup de choses auxquelles il faut faire attention ici
console.log(this); //String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"} console.log(this == ele); // true
Concernant cette valeur ci-dessus, parcourons-la
$.each(this, function(e, ele) { console.log(e, ele); }) // 0 c // 1 s // 2 s // 4 3
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 l'Enumerable dans l'attribut de données d'objet sur false
.
// 查看length的内部属性 console.log(Object.getOwnPropertyDescriptor(this, 'length')); // Object {value: 4, writable: false, enumerable: false, configurable: 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
.
$(selecter).each
Spécialement utilisé pour parcourir DOMList
$('.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'); }; })
Utiliser pour in pour parcourir DOMList
Parce que domList n'est pas un tableau, mais un objet. Juste parce que sa valeur clé est 0, 1, 2... cela ressemble à un tableau, mais le résultat du parcours direct est le suivant
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() {}
Donc, lorsque nous utilisons for in pour parcourir la domList, nous devons convertir la domList en tableau
var res = [].slice.call(domList); for(var item in res) {}
类似这样的对象还有函数的属性arguments对象,当然字符串也是可以遍历的,但是因为字符串其他属性的enumerable被设置成了false,因此遍历出来的结果跟数组是一样的,也就不用担心这个问题了.
小补充
如果你发现有些人写函数这样搞,不要惊慌,也不要觉得他高大上。
+function(ROOT, Struct, undefined) { ... }(window, function() { function Person() {} })
()(), !function() {}() +function() {}() 三种函数自执行的方式。
以上就是本文的全部内容,希望对大家的学习有所帮助。