原生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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python变量的存储原理详解
2019/07/10 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
一份比较全的PHP面试题
2016/07/29 面试题
本科生的职业生涯规划范文
2014/01/09 职场文书
秘书英文求职信范文
2014/01/31 职场文书
工程售后服务方案
2014/06/08 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
整改报告怎么写
2014/11/06 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
如何正确理解python装饰器
2021/06/15 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL