为了账号安全,请及时绑定邮箱和手机立即绑定

数组方法map的使用及与forEach的比较

标签:
Html/CSS

先来看一下对数组map()方法的定义:map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

大家要注意map在这里并不是地图的意思,确切的解释应该是映射!也就是说通过该方法你可以经过一些自己的逻辑处理,映射出来一个新的数组,而对原数组没有影响。
先来看一个示例,对arr的元素值乘以2,并生成一个新的数组newArr:

var arr=[1,3,4,5,7,9];var newArr=arr.map((v)=>{    return v*2;
})//newArr为arr元素值的2倍console.log(newArr);//[ 2, 6, 8, 10, 14, 18 ]//arr的值并没有发生变化console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]

如果你要你想对奇数乘以2的话,你可以这样:

var arr=[1,3,4,5,7,9];var newArr=arr.map((v)=>{    if(v%2==1)        return v*2;    return v;
})//newArr中只有元素值为4的偶数没有发生变化console.log(newArr);//[ 2, 6, 4, 10, 14, 18 ]//arr的值并没有发生变化console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]

map方法中的回调必须要有返回值,否则会被映射为undefined:

var arr=[1,3];var newArr=arr.map((v)=>{})// 没有return 映射出来的值为undefinedconsole.log(newArr);//[ undefined, undefined ]// arr的值并没有发生变化console.log(arr);//[ 1, 3 ]

在实际使用中,咱们一般都会通过该方法取到原数组中的一些特定值,比如:

var arr=[
    {        userName:"xiaozhang",        phoneNum:"151098765**"
    },{        userName:"laowang",        phoneNum:"158984736**"
    }
];var phoneArr=arr.map((item)=>{    //只提取其中的手机号码
    return item.phoneNum
});console.log(phoneArr);//[ '151098765**', '158984736**' ]

map方法与forEach使用起来类似:都是循环遍历数组中的每一项;每次执行匿名函数都支持3个参数,参数分别是item(当前每一项)、index(索引值)、arr(原数组);匿名函数中的this都是指向window:都只支持数组。
不同点在于forEach运行后的返回值为undefined。并不像map方法一样会映射一个新的数组:

var arr=[1,3,4,5,7,9];var newArr=arr.forEach((v)=>{    return v*2;
})//undefinedconsole.log(newArr);//undefined//arr的值并没有发生变化console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]



作者:张培跃
链接:https://www.jianshu.com/p/4d82d73ae6d0


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消