jQuery each和js forEach用法比较

￡神魔★判官ぃ 2021-12-14 11:27 208阅读 0赞

本文实例分析了[jQuery][] each和js forEach用法。分享给大家供大家参考，具体如下：

对于遍历数组的元素，[js代码][js]和jquery都有类似的方法，js用的是forEach而jquery用的是each，简单举例;

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>arr = </code> 
      <code>new</code> 
      <code>Array([</code> 
      <code>"b"</code> 
      <code>, 2, </code> 
      <code>"a"</code> 
      <code>, 4],[</code> 
      <code>"c"</code> 
      <code>,3,</code> 
      <code>"d"</code> 
      <code>,6]);</code> 
     </div> 
     <div> 
      <code>arr.forEach(</code> 
      <code>function</code> 
      <code>(item){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>alert(item); </code> 
      <code>//b, 2, a, 4和c,3,d,6</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果forEach里的回调函数只有一个参数则代表该集合里的元素;

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>arr = </code> 
      <code>new</code> 
      <code>Array([</code> 
      <code>"b"</code> 
      <code>, 2, </code> 
      <code>"a"</code> 
      <code>, 4],[</code> 
      <code>"c"</code> 
      <code>,3,</code> 
      <code>"d"</code> 
      <code>,6]);</code> 
     </div> 
     <div> 
      <code>arr.forEach(</code> 
      <code>function</code> 
      <code>(item, i){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>alert(item+</code> 
      <code>"-"</code> 
      <code>+i); </code> 
      <code>//b, 2, a, 4-1和c,3,d,6-2;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>item.forEach(</code> 
      <code>function</code> 
      <code>(items, j){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(items+</code> 
      <code>"---------"</code> 
      <code>+j); </code> 
      <code>//b------0;2-------1;a----2;4------3;&nbsp; c-----0;3-----1;d----2;6----3</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果forEach里有两个参数，则第一个参数为该集合里的元素，第二个参数为集合的索引;

在jquery里则不同;

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>arr = </code> 
      <code>new</code> 
      <code>Array([</code> 
      <code>"b"</code> 
      <code>, 2, </code> 
      <code>"a"</code> 
      <code>, 4],[</code> 
      <code>"c"</code> 
      <code>,3,</code> 
      <code>"d"</code> 
      <code>,6]);</code> 
     </div> 
     <div> 
      <code>$.each(arr, </code> 
      <code>function</code> 
      <code>(item){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>alert(item); </code> 
      <code>//0;1</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果回调函数里只有一个参数时，则为集合的索引;

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>arr = </code> 
      <code>new</code> 
      <code>Array([</code> 
      <code>"b"</code> 
      <code>, 2, </code> 
      <code>"a"</code> 
      <code>, 4],[</code> 
      <code>"c"</code> 
      <code>,3,</code> 
      <code>"d"</code> 
      <code>,6]);</code> 
     </div> 
     <div> 
      <code>$.each(arr, </code> 
      <code>function</code> 
      <code>(i, item){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>alert(item+</code> 
      <code>"-"</code> 
      <code>+i); </code> 
      <code>//b, 2, a, 4-1和c,3,d,6-2;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>$.each(item, </code> 
      <code>function</code> 
      <code>(j, items){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(items+</code> 
      <code>"---------"</code> 
      <code>+j); </code> 
      <code>//b------0;2-------1;a----2;4------3;&nbsp; c-----0;3-----1;d----2;6----3</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果有两个参数，则第一个为索引，第二个该集合里的元素;

感兴趣的朋友可以使用**在线HTML/CSS/[JavaScript代码][JavaScript]运行工具**：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

转载于:https://www.cnblogs.com/good10000/p/10593361.html

[jQuery]: http://www.100sucai.com/tag/104/
[js]: http://www.100sucai.com/
[JavaScript]: http://www.100sucai.com/tag/111/