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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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
php 计划任务 检测用户连接状态
2012/03/29 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python模块导入的细节详解
2018/12/10 Python
python实现浪漫的烟花秀
2019/01/30 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
物业总经理助理岗位职责
2014/06/29 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
联欢会开场白
2015/06/01 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
详解Python flask的前后端交互
2022/03/31 Python
Go获取两个时区的时间差
2022/04/20 Golang