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 Plupload上传插件的使用
Apr 19 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery插件懒加载的示例
Oct 24 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基础知识:类与对象(5) static
2006/12/13 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
json跨域调用python的方法详解
2017/01/11 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
python队列原理及实现方法示例
2019/11/27 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
Python的两道面试题
2013/06/29 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
暑期研修感言
2014/02/17 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS