×

简单聊聊JavaScript中map()和forEach()的区别

作者:Web前端之家2020.08.03来源:Web前端之家浏览:335评论:0
关键词:jsmap()forEach()
微信公众号

微信公众号

简单聊聊JavaScript中map()和forEach()的区别。

在JavaScript中遍历对象取决于对象是否可迭代。默认情况下,数组是可迭代的。map 和 forEach 包含在 Array.prototype 中,因此我们无需考虑可迭代性。如果你想进一步学习,我推荐你看看什么是JavaScript中的可迭代对象!

什么是map()和forEach()?

map 和 forEach 是数组中的帮助器方法,可以轻松地在数组上循环。我们曾经像下面这样循环遍历一个数组,没有任何辅助函数。

var array = ['1', '2', '3']; 
for (var i = 0; i < array.length; i += 1) { 
  console.log(Number(array[i])); 
} 
// 1 
// 2 
// 3

自JavaScript时代开始以来,就一直存在 for 循环。它包含3个表达式:初始值,条件和最终表达式。

这是循环数组的经典方法。从ECMAScript 5开始,新功能似乎使我们更加快乐。

map

map 的作用与 for 循环完全相同,只是 map 会创建一个新数组,其结果是在调用数组中的每个元素上调用提供的函数。

它需要两个参数:一个是稍后在调用 map 或 forEach 时调用的回调函数,另一个是回调函数被调用时使用的名为 thisArg 的上下文变量。

const arr = ['1', '2', '3']; 
// 回调函数接受3个参数 
// 数组的当前值作为第一个参数 
// 当前值在数组中的位置作为第二个参数 
// 原始源数组作为第三个参数 
const cb = (str, i, origin) => { 
  console.log(`${i}: ${Number(str)} / ${origin}`); 
}; 
arr.map(cb); 
// 0: 1 / 1,2,3 
// 1: 2 / 1,2,3 
// 2: 3 / 1,2,3

回调函数可以如下使用。


arr.map((str) => { console.log(Number(str)); })

map 的结果不等于原始数组。


const arr = [1]; 
const new_arr = arr.map(d => d); 
 
arr === new_arr; // false

你还可以将对象作为 thisArg 传递到map。


const obj = { name: 'Jane' }; 
 
[1].map(function() { 
  // { name: 'Jane' } 
  console.dir(this); 
}, obj); 
 
[1].map(() => { 
  // window 
  console.dir(this); 
}, obj);

对象 obj 成为 map 的 thisArg。但是箭头回调函数无法将 obj 作为其 thisArg。

这是因为箭头函数与正常函数不同。

forEach

forEach 是数组的另一个循环函数,但 map 和 forEach 在使用中有所不同。map 和 forEach 可以使用两个参数——回调函数和 thisArg,它们用作其 this。

const arr = ['1', '2', '3']; 
// 回调函数接受3个参数 
// 数组的当前值作为第一个参数 
// 当前值在数组中的位置作为第二个参数 
// 原始源数组作为第三个参数 
const cb = (str, i, origin) => { 
  console.log(`${i}: ${Number(str)} / ${origin}`); 
}; 
arr.forEach(cb); 
// 0: 1 / 1,2,3 
// 1: 2 / 1,2,3 
// 2: 3 / 1,2,3

那有什么不同?

map 返回其原始数组的新数组,但是 forEach 却没有。但是它们都确保了原始对象的不变性。

[1,2,3].map(d => d + 1); // [2, 3, 4]; 
[1,2,3].forEach(d => d + 1); // undefined;

如果更改数组内的值,forEach 不能确保数组的不变性。这个方法只有在你不接触里面的任何值时,才能保证不变性。


[{a: 1, b: 2}, {a: 10, b: 20}].forEach((obj) => obj.a += 1); 
// [{a: 2, b: 2}, {a: 11, b: 21}] 
// 数组已更改!

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/js20200803a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 在家赚钱

    已阅,感谢站长分享!...

  • 访客

    的...

  • 访客

    点多...

  • kaifa8

    小公司很少会去搞这种开发自动化,都只是看重结果。...

  • 访客

    你可以加群去问...

  • 访客

    怎么注册?不会...

  • ajoy

    说法可以是一样的,毕竟JS和JQ都是有“血缘关系”的,你可以自己改下不就可以了吗,哈哈!...

  • 访客

    标题是JS用了JQ误人子弟呢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria

时时彩平台哪个好 排三万能6码 走势 河北燕赵20选5AA 股票卖出的价格可以自己定吗今日股票行情实时查询五元买中石油股票 在线配资咨询久联优配 广西快乐十分跨度 永久固定公式规律大全 股票交易规则详解 加拿大28数据图神测 极速赛车开奖官网 福建22选走势图 福建十一选五app下载 宁夏11选5购买 河南泳坛夺金481技巧 湖北11选5五码走势图 在线炒股配资仟推荐卓信宝 排列三百十和值尾振幅