Résumé des façons de parcourir à l'aide de diverses boucles dans les connaissances JavaScript_Basic

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 dans

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 d'une 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. ne continue 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'); //不会执行
}
forEach

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 si vous utilisiez 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

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

$.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 valeur

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

La sortie est

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

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}
$.each 中的 $(this) 与this有所不同，不过遍历结果却是一样，你可以在测试代码中打印出来看看

$(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
c'est 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
Utilisez for in pour parcourir DOMList

Parce que domList n'est pas un tableau, mais un objet. Juste parce que ses valeurs clés sont 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) {}

Les objets comme celui-ci ont également des arguments de propriété, des objets de fonctions. Bien sûr, les chaînes peuvent également être parcourues, mais comme l'énumération des autres propriétés de la chaîne est définie sur false, le résultat du parcours est le même que celui du tableau, c'est-à-dire Ne vous inquiétez plus de ce problème.
Petit ajout

Si vous constatez que certaines personnes écrivent des fonctions comme celle-ci, ne paniquez pas et ne pensez pas qu'elles sont trop nobles pour s'offrir un oiseau

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

()(), !function() {}() function() {}() Trois façons d'auto-exécution de la fonction^_^