我看了好的好多资料,太绕了,求通俗易懂,立竿见效!
let arr = [
{ a: 10 },
{ a: 11 },
{ a: 12 }
]
let forEachArr = arr.forEach(item => {
return item.a
})
let mapArr = arr.map(item => {
return item.a
})
console.log(mapArr) // [10, 11, 12]
console.log(forEachArr) // undefined
使用forEach
目的是对数组的每一项都执行方法,没有返回值,所以forEach
里的return
并不会中断循环,只会跳出当前方法map
和forEach
一样,return
也不会中断循环,只是会返回一个数组,可以接收到
你自己写代码跑一下,会让你理解更深刻
求通俗易懂,立竿见效 哈哈,前端果然急功近利,浮躁的很啊。
map:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {}[, thisArg])
forEach
arr.forEach(function callback(currentValue[, index[, array]]) {}[, thisArg]);
所以2者在使用的时候,api上没有区别;唯一的区别就是 map有返回值,forEach 没有返回值,同样和 @安昊 说的一样,都无法中断循环。
在chrome65 版本的浏览器测试,map的效率基本是forEach的 1/3; 也就是说 遍历数组的时候,forEach会更高。
但是其实,因为map 比 forEach 多干了事情。
所以严格意义上来说,map 是 forEach 的一个升级版本。 可以用 forEach 实现一个map。
在JSX种用map因为会返回一个数组, 也可以链式调用用, [1,2,3].map(x=> x).forEach(x=>x),
forEach适合无要返回值, 比如反复调用一个方法, [1,2,3].forEach(x => fn(x)).
27 回答13.8k 阅读
6 回答2.3k 阅读✓ 已解决
8 回答3.5k 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
6 回答1.1k 阅读
4 回答1.6k 阅读✓ 已解决
'map'这个单词,除了可以翻译为“地图”之外,有些场景下应当翻译为“ 映射 ”,也就是按一定转换规则,转换一个集合的每一项,得到另一个集合。
Array.prototype.map 的 'map' 应当译作“映射”,也就是 以一个数组的每一项为基础,构造出一个新数组。
而'for each'就很好理解了,也就是 对数组的每一项执行同样的操作,并不会返回新的数组。
打个比方说,现在村长让你给全村人做一个相册。
第一种方案,采用forEach:
第二种方案,采用 map:
运行上面两个例子,就可以看出 map 的设计意图和方便之处—— 在需要基于一个数组生成另一个数组的时候,可以不手动创建中间变量。
至于是否会影响原数组的问题,遍历操作都可以影响原数组,也可以不影响,这是有关原始类型和引用类型的知识,搞明白这两个知识点之后,对影响与否这个问题的疑惑就会迎刃而解了。
Array.prototype.map 在 jsx 中很是方便,可以很方便地将需要渲染的列表转为 jsx 标签,而无需创建中间变量。
贴一个私货,里面有 JS 实现的类 map 函数,虽然实际用不上:使用 for 语法模拟实现 js 数组的部分内置迭代方法。