前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >foreach 遍历map_怎么遍历map集合

foreach 遍历map_怎么遍历map集合

作者头像
全栈程序员站长
发布2022-11-08 16:14:39
6.1K0
发布2022-11-08 16:14:39
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

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

共同点:

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

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

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

4.只能遍历数组。

1.forEach()

没有返回值。

代码语言:javascript
复制
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 出来。

代码语言:javascript
复制
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 的回调函数里不支持 break 退出循环。如果使用 return 的话也只会退出当前那次循环的函数,循环还是会继续执行。如果想用 break 关键字,可以用原生的 for 循环。

二、jQuery .each()和.map()遍历

共同点:

即可遍历数组,又可遍历对象。

1.$.each()

没有返回值。$.each()里面的匿名函数支持2个参数:当前项的索引i,数组中的当前项n。如果遍历的是对象,k 是键,n 是值。

代码语言:javascript
复制
$.each( ["a","b","c"], function(i, n){
     alert( i + ": " + n );
});
代码语言:javascript
复制
$("span").each(function(i, n){
     alert( i + ": " + n );
});

代码语言:javascript
复制
$.each( { name: "John", lang: "JS" }, function(k, n){
     alert( "Name: " + k + ", Value: " + n );
});

.each() 回调函数里可以用 return false 退出整个遍历,作用相当于 for 循环里的 break。.map() 则不能退出。

2.$.map()

有返回值,可以return 出来。.map()里面的匿名函数支持2个参数和.each()里的参数位置相反:数组中的当前项n,当前项的索引i。如果遍历的是对象,i 是值,n 是键。如果是(“span”).map()形式,参数顺序和.each()

代码语言:javascript
复制
var arr=$.map( [0,1,2], function(n){
     return n + 4;
});
console.log(arr);
代码语言:javascript
复制
$.map({"name":"Jim","age":17},function(i,n){
     console.log(i+":"+n);
});

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/190991.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月21日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档