原生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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
JS 遮照层实现代码
2010/03/31 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
Python栈类实例分析
2015/06/15 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
sklearn+python:线性回归案例
2020/02/24 Python
python进度条显示之tqmd模块
2020/08/22 Python
自荐书格式
2013/12/01 职场文书
实习生的自我评价
2014/01/08 职场文书
新年寄语大全
2014/04/12 职场文书
先进工作者申报材料
2014/12/23 职场文书
小学运动会入场词
2015/07/18 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server