jQuery中each和js中forEach的区别分析


Posted in jQuery onFebruary 27, 2019

本文实例讲述了jQuery中each和js中forEach的区别。分享给大家供大家参考,具体如下:

<script>
  $(function(){
    // 3.1遍历数组
    var arr = [1, 3, 5, 7, 9];
    // 3.1.1通过原生方法遍历数组
    // 第一个回调函数参数是遍历到的元素
    // 第二个回调函数参数是当前遍历的索引
    // 返回值:没有返回值
    var res = arr.forEach(function(ele, idx){
      console.log(idx, ele);
    });
    console.log(res);
    // 3.1.2通过jQuery静态方法遍历数组
    // 第一个回调函数参数是当前遍历的索引
    // 第二个回调函数参数是遍历到的元素
    // 返回值:被遍历的数组
    var $res2 = $.each(arr, function(idx, ele){
      console.log(idx, ele);
    });
    console.log($res2);
    // 3.2遍历对象
    var obj = {name:"lnj",age:"33",gender:"male"};
    // 3.2.1 js对象没有forEach方法,所以通过for in方法遍历对象
    for(var key in obj){
      console.log(key, obj[key]);
    }
    // 3.2.2 通过jQuery静态方法遍历对象
    $.each(obj,function(key, value){
      console.log(key, value);
    });
  });
</script>

总结:

1.在遍历数组时:

回调函数中参数的位置不一样,forEach中为第一个参数为ele,第二个为index。each中第一个为index,第二个为ele;

回调函数中是否有返回值,forEach中没有返回值,each有返回值,返回被遍历的数组

2.遍历对象

forEach不能遍历对象,可以使用for in;

而each可以通过jq的讲台方法来遍历,即$.each(obj,function(key,value){})

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
You might like
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
python开发入门——列表生成式
2020/09/03 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
经管应届生求职信
2013/11/17 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
昆虫记读书笔记
2015/06/26 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL