原生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单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jquery实现广告上下滚动效果
Mar 04 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开发文档 会员收费1期
2012/08/14 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
php-msf源码详解
2017/12/25 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python 实现音频叠加的示例
2020/10/29 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
新闻编辑自荐信
2013/11/03 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang