原生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( { 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()
一样。
感兴趣的朋友可以使用在线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程序设计有所帮助。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
uniapp实现app检查更新与升级详解(uni-upgrade-center)
UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下2023-11-11
最新评论