We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
JavaScript中的Map和ForEach有什么区别?
如果你使用JavaScript一段时间了,你可能遇到两个相似的数组方法:Array.prototype.map()和Array.prototype.forEach()。
JavaScript
Array.prototype.map()
Array.prototype.forEach()
那么,它们有什么不同?
我们先看一眼它们在MDN上的定义:
这到底意味着什么?
嗯,forEach方法实际上没有返回什么东西(undefined)。它只是简单为数组中的每个元素提供一个方法。允许该回调方法改变调用的数组。
forEach
译者加 let arr = [1, 2, 3] arr.forEach((item, index)=> { arr[index] = item * 3 }) console.log(arr) // [3, 6, 9]
译者加
let arr = [1, 2, 3] arr.forEach((item, index)=> { arr[index] = item * 3 }) console.log(arr) // [3, 6, 9]
相似的,map()也为数组中的每个元素都提供了方法调用。区别在于,map()使用返回值,并实际返回和(旧)数组相同大小的新数组。
map()
译者加 console.log( [1, 2, 3].map(item => { console.log(item) }) ) // 1 // 2 // 3 // [undefined, undefined, undefined]
console.log(
[1, 2, 3].map(item => {
console.log(item)
})
)
// 1
// 2
// 3
// [undefined, undefined, undefined]
考虑到下面的数组。如果我们相对数组中的元素double,那么我们可以使用map或forEach。
map
let arr = [1, 2, 3, 4, 5];
ForEach:
注意:你永远不会从forEach函数的返回return值,因为返回值被抛弃。
return
arr.forEach((num, index) => { return arr[index] = num * 2; });
结果:
// arr = [2, 4, 6, 8, 10]
Map:
let doubled = arr.map(num => { return num * 2; });
// doubled = [2, 4, 6, 8, 10]
测试JavaScript方法和函数执行速度区别,jsPerf是一个很好的网站。
下面是我对forEach()vsmap()的测试结果。
forEach()
正如你看到的,在我的机器上,forEach()比map()执行速度慢了超过70%。在你的浏览器上可能不同,你可以在此处查看完整的测试结果:
https://jsperf.com/map-vs-foreach-speed-test
如果你喜欢函数编程,明白如何使用map()很重要。
因为forEach()可以影响并更改我们原有的数组,然而,map()返回一个完整的新数组--它不会更改原数组。
哪个更好?
这取决于你尝试实现什么功能。
当你尝试不更改你数组元素的时候,forEach()更合适些。比如只是想简单干点什么:比如将元素存储到数据库或者打印出来。
let arr = ['a', 'b', 'c', 'd']; arr.forEach((letter) => { console.log(letter); }); // a // b // c // d
至于map(),当你想变更数据的时候,它更合适些。不仅仅因为它执行速度更快,而且它返回一个新数组。这就意味着我们可以做一些很棒的事,比如和其他方法(map(),filter(),reduce()等)链式调用。
filter()
reduce()
let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]
上面的示例首先是遍历arr,为数组的每个元素乘2。接着,我们过滤新数组,并且只保留大于5的元素。这就得到了我们的最终数组arr2,值为[6,8,10]。
arr
2
5
arr2
[6,8,10]
undefined
原文:https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
The text was updated successfully, but these errors were encountered:
No branches or pull requests
JavaScript中的Map和ForEach有什么区别?
如果你使用
JavaScript
一段时间了,你可能遇到两个相似的数组方法:Array.prototype.map()
和Array.prototype.forEach()
。那么,它们有什么不同?
Map & ForEach 定义
我们先看一眼它们在MDN上的定义:
这到底意味着什么?
嗯,
forEach
方法实际上没有返回什么东西(undefined)。它只是简单为数组中的每个元素提供一个方法。允许该回调方法改变调用的数组。相似的,
map()
也为数组中的每个元素都提供了方法调用。区别在于,map()
使用返回值,并实际返回和(旧)数组相同大小的新数组。代码示例
考虑到下面的数组。如果我们相对数组中的元素double,那么我们可以使用
map
或forEach
。ForEach:
注意:你永远不会从
forEach
函数的返回return
值,因为返回值被抛弃。结果:
// arr = [2, 4, 6, 8, 10]
Map:
结果:
// doubled = [2, 4, 6, 8, 10]
速度注意事项
测试
JavaScript
方法和函数执行速度区别,jsPerf是一个很好的网站。下面是我对
forEach()
vsmap()
的测试结果。正如你看到的,在我的机器上,
forEach()
比map()
执行速度慢了超过70%。在你的浏览器上可能不同,你可以在此处查看完整的测试结果:https://jsperf.com/map-vs-foreach-speed-test
功能注意事项
如果你喜欢函数编程,明白如何使用
map()
很重要。因为
forEach()
可以影响并更改我们原有的数组,然而,map
()返回一个完整的新数组--它不会更改原数组。哪个更好?
这取决于你尝试实现什么功能。
当你尝试不更改你数组元素的时候,
forEach()
更合适些。比如只是想简单干点什么:比如将元素存储到数据库或者打印出来。至于
map()
,当你想变更数据的时候,它更合适些。不仅仅因为它执行速度更快,而且它返回一个新数组。这就意味着我们可以做一些很棒的事,比如和其他方法(map()
,filter()
,reduce()
等)链式调用。上面的示例首先是遍历
arr
,为数组的每个元素乘2
。接着,我们过滤新数组,并且只保留大于5
的元素。这就得到了我们的最终数组arr2
,值为[6,8,10]
。重点
forEach()
实现的功能,都可以使用map()
实现,反之亦然。map()
分配内存并存储返回值。forEach()
摒弃返回值,并最终返回undefined
(这个方法没有返回值)。forEach()
允许回调函数更改当前的数组。map()
将返回一个新数组。后话
原文:https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
The text was updated successfully, but these errors were encountered: