JS中Map和ForEach的區別

2022-04-30 20:39:10 字數 1487 閱讀 8289

foreach()方法: 針對每乙個元素執行提供的函式。

map()方法: 建立乙個新的陣列,其中每乙個元素由呼叫陣列中的每乙個元素執行提供的函式得來。

區別foreach()方法不會返回執行結果,而是undefined。也就是說,foreach()會修改原來的陣列。而map()方法會得到乙個新的陣列並返回。

例子製作乙個陣列的平方

有如下乙個陣列  

let arr =[1,2,3,4,5,6]
下面分別用foreach()和map()

foreach()

注意,foreach是不會返回有意義的值的。

我們在**函式中直接修改arr的值。

arr.foreach((value, key) => );
執行結果如下:

let list = arr.map(value => );
執行結果如下:

執行速度對比

foreach()的執行速度 < map()的執行速度

速度比試

如何使用

foreach適合於你並不打算改變資料的時候,而只是想用資料做一些事情 – 比如存入資料庫或則列印出來。

let arr = ['a', 'b', 'c', 'd'];

arr.foreach((letter) => );

// a

// b

// c

// d

map()適用於你要改變資料值的時候。不僅僅在於它更快,而且返回乙個新的陣列。這樣的優點在於你可以使用復合(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的元素。最終結果賦值給arr2。

foreach()可以做到的東西,map()也同樣可以。反過來也是如此。

map()會分配記憶體空間儲存新陣列並返回,foreach()不會返回資料。

foreach()允許callback更改原始陣列的元素。map()返回新的陣列。

js中 forEach 和 map 區別

都是迴圈遍歷陣列中的每一項。foreach 和map 裡面每一次執行匿名函式都支援3個引數 陣列中的當前項item,當前項的索引index,原始陣列input。匿名函式中的this都是指window。只能遍歷陣列。1.foreach 沒有返回值,即返回值為undefined 理論上這個方法是沒有返回...

js中的forEach和map的區別

我們先來看兩者之間的相同之處 var arr a b c d arr.foreach function item,index,arr 123 這裡的123引數,表示函式中的this指向,可寫可不寫,如果不寫,則this指向window arr.map function item,index,arr ...

JS中map()與forEach()的用法

相同點 1.都是迴圈遍歷陣列中的每一項 2.每次執行匿名函式都支援三個引數,引數分別為item 當前每一項 index 索引值 arr 原陣列 3.匿名函式中的this都是指向window 4.只能遍歷陣列 不同點 map map方法返回乙個新的陣列,陣列中的元素為原始陣列呼叫函式處理後的值 也就是...