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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Weblogic的布署方式
2013/08/23 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
人事任命通知书
2015/04/21 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python