Explication détaillée des compétences javascript traversal method_javascript

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

• i 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, elle est isolée en utilisant l'auto-exécution de la fonction ()();
• É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
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

• Lors de la traversée du tableau, item représente la valeur d'index et 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é et arr représente la valeur correspondant à la valeur clé obj[item]

(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 :

• Dans les boucles for et for in, la valeur i 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 la fin de l'exécution de la fonction. la boucle ne continuera plus à s'exécuter. Break termine uniquement la boucle et le code suivant continuera à s'exécuter.

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

• Utilisez return ou return true pour sauter une boucle et continuer à exécuter la boucle suivante
• 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 des boucles
• La sortie de cette valeur dans la boucle est similaire à ce qui suit

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

• i : valeur de séquence ele : uniquement l'élément DOM actuellement parcouru
• Il s'agit de l'élément DOM actuellement traversé, les méthodes jQuery ne peuvent pas être appelées
• $(this) == $(ele) L'objet jquery de l'élément actuellement parcouru, vous pouvez appeler la méthode jquery pour effectuer des opérations dom

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() {}() 三种函数自执行的方式。

以上就是本文的全部内容，希望对大家的学习有所帮助。