常用的循环遍历的方法---for循环、forEach循环、$(‘‘).each()、$.each()

1、for循环

<script>

var arr = ['nick','freddy','mike','james'];
for(var index = 0, len=arr.length; index<len; index++){
    console.log(index + '. ' + arr[index]);
}

</script>

结果：

for循环，通过累加数组索引，来输出数组中的值。（使用比较局限，一般只用于循环数组）

2、forEach循环

<script>

var arr = ['nick','freddy','mike','james'];
arr.forEach(function(item,index,arr){
    console.log(item);
    console.log(index);
    console.log(arr);
});

</script>

结果：

forEach循环，跟for循环有点相似，不过会更优美，可通过参数直接获取到值，arr.forEach(function(item,index,arr){})，其中item为该索引下的值，index为索引，arr为数字本身，参数名可改变，但是顺序不能改变。

forEach循环的注意点：

• forEach不支持break
• forEach中使用return无效
• forEach删除自身元素index不会被重置
• foreach本身不能跳出循环（如果要跳出循环，可以使用try catch）
  详细内容请跳转至大神的分享foreach内容详解、foreach 使用 try catch 跳出循环

3、jquery循环遍历的方法：

jquery下的each方法有两种：

• 一种为$(‘’).each()—jquery对象方法，用于循环遍历jquery对象。
• 一种为$.each()循环方法—用于循环遍历数组、对象。

3-1、$(‘’).each()

$ (“div”) . each (function (index, domEle) { XXX; } )

1. each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个。
2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象。

<!-- 引入jquery -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>  

    <ul>
        <li>li(1)</li>
        <li>li(2)</li>
        <li>li(3)</li>
    </ul>

<script>

  $('li').each(function(item) {
      console.log($(this).text());
  });

  </script>

结果：

这里通过$(this)获取到当前遍历到的jquery对象，并给他一个text()方法输出该标签里面的内容。

3-2、$.each()

$.each (object , function (index,element) { XXX; } )

1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容

遍历数组：

  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>  

var arr = ['nick','freddy','mike','james'];

$.each(arr,function(index,item){
    console.log(index+'. '+item);
});

结果：

遍历对象：

 <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>  

  <script>

    $.each({
      name: "andy",
      age: 18
    }, function (i, ele) {
      console.log(i);  // 输出的是 name age 属性名
      console.log(ele);  // 输出的是 andy  18 属性值
    })

  </script>

结果：

4、for in循环和for of循环

请点击跳转至for in 和 for of