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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JQuery实现图片轮播效果
May 08 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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以post形式发送xml的方法
2014/11/04 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Vue计算属性的使用
2017/08/04 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vuex 的简单使用
2018/03/22 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python psutil模块使用方法解析
2019/08/01 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
岗位竞聘书范文
2014/03/31 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
建国大业观后感
2015/06/01 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
详解Django的MVT设计模式
2021/04/29 Python
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server