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

 更新时间:2019年02月27日 10:35:19   作者:huangpb0624  
这篇文章主要介绍了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作,结合实例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map进行遍历操作相关技巧与操作注意事项,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

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

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

共同点:

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

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

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

④.只能遍历数组。

1.forEach()

没有返回值。

1
2
3
4
5
6
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 出来。

1
2
3
4
5
6
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上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 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 是值。

1
2
3
$.each( ["a","b","c"], function(i, n){
   alert( i + ": " + n );
});
1
2
3
$("span").each(function(i, n){
   alert( i + ": " + n );
});
1
2
3
$.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()一样。

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

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

PS:这里再为大家推荐一款JS数组遍历方式分析对比工具供大家参考:

在线JS常见遍历方式性能分析比较工具http://tools.jb51.net/aideddesign/js_bianli

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/huangpb123/article/details/52756303

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • JS中some和every的区别和用法详解

    JS中some和every的区别和用法详解

    every 和 some 都是数组迭代方法,都可以遍历数组,这篇文章主要介绍了JS中some和every的区别和用法,需要的朋友可以参考下
    2023-05-05
  • js中的referrer返回上一页使用介绍

    js中的referrer返回上一页使用介绍

    js中的referrer想必大家并不陌生吧,在本文将为大家详细介绍其是如何使用的,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • uniapp实现app检查更新与升级详解(uni-upgrade-center)

    uniapp实现app检查更新与升级详解(uni-upgrade-center)

    UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下
    2023-11-11
  • JS轮播图的实现方法2

    JS轮播图的实现方法2

    这篇文章主要为大家详细介绍了JS轮播图的具体实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 关于JS数组追加数组采用push.apply的问题

    关于JS数组追加数组采用push.apply的问题

    JS数组追加数组没有现成的函数,这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的,不需要写for循环的写法,一直也没遇到什么问题,直到今天我要append的b是个很大的数组时才遇到了坑。
    2014-06-06
  • uniapp时间格式化处理实现

    uniapp时间格式化处理实现

    本文主要介绍了uniapp时间格式化处理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 捕获未处理的Promise错误方法

    捕获未处理的Promise错误方法

    下面小编就为大家带来一篇捕获未处理的Promise错误方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js 中{},[]中括号,大括号使用详解

    js 中{},[]中括号,大括号使用详解

    { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数
    2011-05-05
  • js从数组中删除指定值(不是指定位置)的元素实现代码

    js从数组中删除指定值(不是指定位置)的元素实现代码

    下面小编就为大家带来一篇js从数组中删除指定值(不是指定位置)的元素实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS中数组常用的循环遍历你会几种

    JS中数组常用的循环遍历你会几种

    JS 遍历数组(循环数组)的方式有多种,但你都知道吗?下面这篇文章主要给大家介绍了关于JS中数组常用循环遍历的相关资料,需要的朋友可以参考下
    2021-06-06

最新评论