Explication détaillée des différentes méthodes de traversée en JavaScript

JavaScript Explication détaillée des différentes méthodes de traversée, vous montre ce que sont les méthodes de traversée en JavaScript et les explique en détail, afin que vous puissiez maîtriser JavaScript avec compétence Diverses méthodes de traversée dans .

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 voir directement l'exemple , trop utilisé, 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]);
    }
})();

A propos de la boucle for, il y a quelques points à noter

Le i dans la boucle for peut être utilisée à tout moment après la fin de la boucle. Cependant, afin d'éviter d'affecter d'autres variables dans la portée, utilise la fonction pour l'isoler par auto-exécution ()(); >

É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

for in

for(var item in arr|obj) { } peut être utilisé pour

parcourir des tableaux et des objets

Lors de la traversée de tableaux, 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('-------------');
})();

À propos de in, il y a les éléments suivants points à 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 que l'exécution de la fonction est terminée. Même le code en dehors de la boucle ne continuera pas à être implémenté. Et break termine simplement 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<.>

Il y a les points suivants auxquels il faut prêter attention

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

forEach ne peut pas traverser les objets

forEach ne peut pas être utilisé dans IE, Firefox et Chrome implémentent cette méthode

forEach ne peut pas utiliser break, continuez à sortir de la boucle Lorsque vous utilisez return, l'effet est le même que lorsque vous utilisez continue dans une 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 éventuellement elle le fera tomber dans une boucle infinie. Par conséquent, vous devez être prudent lorsque vous utilisez do/while.

不建议使用do/while的方式来遍历数组

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

$.each

peut être utilisé pour parcourir des tableaux et des objets, où e représente l'index valeur ou valeur clé, ele représente la valeur valeur

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

Le résultat est

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

Il y a beaucoup de choses auxquelles il faut faire attention ici

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

Utilisez return ou return true pour sauter une boucle, continuez à exécuter la boucle suivante

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

Vous ne pouvez pas utiliser break et continuer à sauter le 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

$.each(this, function(e, ele) { 
   console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3

为什么length 和 [[PrimitiveValue]]没有遍历出来？突然灵光一动，在《javascript高级编程》中找到了答案，大概意思就是javascript的内部属性中，将对象数据属性中的Enumerable设置为了false

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

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

$(selecter) .each est spécialement utilisé pour parcourir DOMList

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

ceci est actuellement en cours de parcours L'élément DOM traversé ne peut pas appeler la méthode jQuery

$(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 DOMListParce 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 directement Les résultats du parcours sont les suivants

Par conséquent, lorsque nous utilisons pour pour parcourir la domList, nous devons convertir la domList en tableau

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

var res = [].slice.call(domList);for(var item in res) {}

类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.

Petit supplément

如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上鸟不起

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

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

以上就是JavaScript 各种遍历方式详解的所有内容，希望会给大家带来帮助吧

相关推荐：

JavaScript 易错知识点整理

处理JavaScript异常的方法

JavaScript的数组去重方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!