原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作


Posted in jQuery onFebruary 27, 2019

本文实例讲述了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作。分享给大家供大家参考,具体如下:

一、原生JS forEach()和map()遍历

共同点:

①.都是循环遍历数组中的每一项。

②.forEach()map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

③.匿名函数中的this都是指Window。

④.只能遍历数组。

1.forEach()

没有返回值。

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
    input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->会对原来的数组产生改变

2.map()

有返回值,可以return 出来。

var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
  return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]

兼容写法:

不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:

/**
* forEach遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myForEach = function myForEach(callback,context){
  context = context || window;
  if('forEach' in Array.prototye) {
    this.forEach(callback,context);
    return;
  }
  //IE6-8下自己编写回调函数执行的逻辑
  for(var i = 0,len = this.length; i < len;i++) {
    callback && callback.call(context,this[i],i,this);
  }
}
/**
* map遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myMap = function myMap(callback,context){
  context = context || window;
  if('map' in Array.prototye) {
    return this.map(callback,context);
  }
  //IE6-8下自己编写回调函数执行的逻辑
  var newAry = [];
  for(var i = 0,len = this.length; i < len;i++) {
    if(typeof callback === 'function') {
      var val = callback.call(context,this[i],i,this);
      newAry[newAry.length] = val;
    }
  }
  return newAry;
}

二、jQuery $.each()和$.map()遍历

共同点:

即可遍历数组,又可遍历对象。

1.$.each()

没有返回值。$.each()里面的匿名函数支持2个参数:当前项的索引i,数组中的当前项n。如果遍历的是对象,k 是键,n 是值。

$.each( ["a","b","c"], function(i, n){
   alert( i + ": " + n );
});
$("span").each(function(i, n){
   alert( i + ": " + n );
});
$.each( { name: "John", lang: "JS" }, function(k, n){
   alert( "Name: " + k + ", Value: " + n );
});

2.$.map()

有返回值,可以return 出来。$.map()里面的匿名函数支持2个参数和$.each()里的参数位置相反:数组中的当前项n,当前项的索引i。如果遍历的是对象,i 是值,n 是键。如果是$("span").map()形式,参数顺序和$.each()  $("span").each()一样。

var arr=$.map( [0,1,2], function(n){
   return n + 4;
});
console.log(arr);
$.map({"name":"Jim","age":17},function(i,n){
   console.log(i+":"+n);
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
You might like
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
详解python实现线程安全的单例模式
2018/03/05 Python
python对日志进行处理的实例代码
2018/10/06 Python
pytorch 求网络模型参数实例
2019/12/30 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python属于软件吗
2020/06/18 Python
大学生毕业自我鉴定范文
2013/11/03 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
简历的自我评价
2014/02/03 职场文书
《画家乡》教学反思
2014/04/22 职场文书
敬老模范事迹
2014/05/21 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
建筑横幅标语
2014/10/09 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python