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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
深入理解PHP中的count函数
2016/05/31 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
PHP重载基础知识回顾
2020/09/10 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
Js组件的一些写法
2010/09/10 Javascript
javascript event 事件解析
2011/01/31 Javascript
javascript arguments使用示例
2014/12/16 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python Socket传输文件示例
2017/01/16 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
程序员机试试题汇总
2012/03/07 面试题
档案室主任岗位职责
2014/02/12 职场文书
老人祝寿主持词
2014/03/28 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
中标通知书
2015/04/17 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android