for,forEach,for in ,for of,$.each和$().each应用

今天严重的意识到，只看不总结，就如同走马观花，得到的也必是浮光掠影，看完以后感觉自己学富五车，才高八斗，实则不辨菽麦，前辈们说的一点也不错，写博客这件事必须的坚持，因为谁也不想让自己的博客变成自己都不愿意进的垃圾站，所以每一篇博客都会用心去准备，搜索，对比总结，在这个过程中就收益了，可能你我的博客帮助不了别人，但是只要用心准备，至少帮助了我们自己，所以我一定坚持每周至少总结一篇主题的博客，希望大家监督。

1. for循环可以用来遍历数组，循环给dom元素添加事件，break跳出循环体，continue终止本次循环继续下次循环。
   注意的是循环里面获取到i的值的问题，作用域的问题。去这看

2. forEach循环遍历数组，不能跳出循环，比如说获取下面数组前面小于5(就是1+3)的和，我们按照顺序一个个的加，当遇到大于5的时候，我们要跳出循环。这个时候我们用for循环就会很好，用forEach就不能满足需求。
   var aa=[1,3,5,2,4]; var sum=0; aa.forEach(function(item,index) { if(item<5){ sum += item; } }) console.log(sum) //输出10，而我们想得到的是4
   ```
   // for循环实现
   var aa=[1,3,5,2,4];
   var sum=0;
   for(var i = 0;i < aa.length;i++){
   if(aa[i] < 5){
   sum += aa[i];
   }else{
   break;
   }

   }
   console.log(sum) //输出4
   ```

3. for in 循环
   数组对象都可以遍历，但是一般我们用来遍历对象属性，因为 for-in 不仅仅遍历 array 自身的属性，其还遍历 array 原型链上的所有可枚举的属性，如下

   var aa = {  
       "name": "bonly",
       "age": "18"
   }
   for(var k in aa) {
       console.log(k + " : " + aa[k]);
       //输出name : bonly  age : 18
   }
   

   // 遍历数组也可以拿到值，也可以跳出循环
   var aa = [1, 3, 5, 2, 4];
   var sum = 0;
   for(var k in aa) {
       if(aa[k] < 5) {
           sum += aa[k];
       } else {
           break;
       }
   }
   console.log(sum) //输出4

   Array.prototype.fatherName = "Father";
   const arr = [1, 2, 3];
   arr.name = "Hello world";
   let index;
   for(index in arr) {
        console.log("arr[" + index + "] = " + arr[index]);
   }

   //  输出结果  
   arr[0] = 1  
   arr[1] = 2  
   arr[2] = 3  
   arr[name] = Hello world  
   arr[fatherName] = Father  

4. ES6遍历数组for of方法，支持break
   var aa = [1, 3, 5, 2, 4]; var sum = 0; for(var v of aa) { if(v < 5) { sum += v; } else { break; } } console.log(sum); // 输出4
5. jquery中的$.each()方法,遍历数组，return false 跳出循环，return 是跳出当前循环继续下一次循环
   var aa = [1, 3, 5, 2, 4]; var sum = 0; $.each(aa, function(k,v) { if(v<5){ sum += v; }else{ return false; } }); console.log(sum); // 输出4，如果是只写return不写false 输出的是10

6. jquery中的$(ele).each(),遍历对象，例如点击按钮获取所有li中的值。

   <ul>    
        <li>脆皮猪</li>        
        <li>烤全羊</li>     
        <li>叫花鸡</li>    
   </ul>    
   <button id="btn">点击</button>  

   $('#btn').click(function() {
       $("li").each(function(k,v) {
           console.log($(this).html()); // 输出脆皮猪 烤全羊 叫花鸡
           console.log(v.innerHTML); // 输出脆皮猪 烤全羊 叫花鸡
       })
   })

   对，不要吐槽我，我确实饿了。。。

转载于:https://www.cnblogs.com/bonly-ge/p/9153029.html