es6中map和foreach有哪些區(qū)別

本篇內(nèi)容主要講解“es6中map和foreach有哪些區(qū)別”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“es6中map和foreach有哪些區(qū)別”吧!

區(qū)別：1、forEach()方法不會返回執(zhí)行結(jié)果，返回值為“undefined”，而map()方法會返回運算結(jié)果，會返回一個數(shù)組；2、forEach()方法會修改原來的數(shù)組，而map()方法不會修改原來的數(shù)組。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

foreEach()方法：針對每一個元素執(zhí)行提供的函數(shù)。

map()方法：創(chuàng)建一個新的數(shù)組，其中每一個元素由調(diào)用數(shù)組中的每一個元素執(zhí)行提供的函數(shù)得來。

區(qū)別

forEach()方法不會返回執(zhí)行結(jié)果，而是undefined。也就是說，forEach()會修改原來的數(shù)組。而map()方法會得到一個新的數(shù)組并返回。

例子：

制作一個數(shù)組的平方

有如下一個數(shù)組

let arr =[1,2,3,4,5,6]

下面分別用forEach()和Map()

forEach()

注意，forEach是不會返回有意義的值的。

我們在回調(diào)函數(shù)中直接修改arr的值。

arr.forEach((value, key) => {
 return arr[key] = value * value;
});

執(zhí)行結(jié)果如下：

Map()

let list = arr.map(value => {
 return value * value;
});

執(zhí)行結(jié)果如下：

執(zhí)行速度對比

forEach()的執(zhí)行速度 < map()的執(zhí)行速度

如何使用

forEach適合于你并不打算改變數(shù)據(jù)的時候，而只是想用數(shù)據(jù)做一些事情 – 比如存入數(shù)據(jù)庫或則打印出來。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

map()適用于你要改變數(shù)據(jù)值的時候。不僅僅在于它更快，而且返回一個新的數(shù)組。這樣的優(yōu)點在于你可以使用復(fù)合(composition)(map(), filter(), reduce()等組合使用)來玩出更多的花樣。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

我們首先使用map將每一個元素乘以它們自身，然后緊接著篩選出那些大于10的元素。最終結(jié)果賦值給arr2。

到此，相信大家對“es6中map和foreach有哪些區(qū)別”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！