JavaScript中的map()和forEach()的區別是什么

這期內容當中小編將會(huì )給大家帶來(lái)有關(guān)JavaScript中的map()和forEach()的區別是什么，文章內容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

什么是map()和forEach()?

map 和 forEach 是數組中的幫助器方法，可以輕松地在數組上循環(huán)。我們曾經(jīng)像下面這樣循環(huán)遍歷一個(gè)數組，沒(méi)有任何輔助函數。

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

自JavaScript時(shí)代開(kāi)始以來(lái)，就一直存在 for 循環(huán)。它包含3個(gè)表達式：初始值，條件和最終表達式。

這是循環(huán)數組的經(jīng)典方法。從ECMAScript 5開(kāi)始，新功能似乎使我們更加快樂(lè )。

map

map 的作用與 for 循環(huán)完全相同，只是 map 會(huì )創(chuàng )建一個(gè)新數組，其結果是在調用數組中的每個(gè)元素上調用提供的函數。

它需要兩個(gè)參數：一個(gè)是稍后在調用 map 或 forEach 時(shí)調用的回調函數，另一個(gè)是回調函數被調用時(shí)使用的名為 thisArg 的上下文變量。

const arr = ['1', '2', '3']; // 回調函數接受3個(gè)參數 // 數組的當前值作為第一個(gè)參數 // 當前值在數組中的位置作為第二個(gè)參數 // 原始源數組作為第三個(gè)參數 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。但是箭頭回調函數無(wú)法將 obj 作為其 thisArg。

這是因為箭頭函數與正常函數不同。

forEach

forEach 是數組的另一個(gè)循環(huán)函數，但 map 和 forEach 在使用中有所不同。map 和 forEach 可以使用兩個(gè)參數——回調函數和  thisArg，它們用作其 this。

const arr = ['1', '2', '3']; // 回調函數接受3個(gè)參數 // 數組的當前值作為第一個(gè)參數 // 當前值在數組中的位置作為第二個(gè)參數 // 原始源數組作為第三個(gè)參數 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 卻沒(méi)有。但是它們都確保了原始對象的不變性。

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

如果更改數組內的值，forEach 不能確保數組的不變性。這個(gè)方法只有在你不接觸里面的任何值時(shí)，才能保證不變性。

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

何時(shí)使用map()和forEach()?

由于它們之間的主要區別在于是否有返回值，所以你會(huì )希望使用 map 來(lái)制作一個(gè)新的數組，而使用 forEach 只是為了映射到數組上。

這是一個(gè)簡(jiǎn)單的例子。

const people = [   { name: 'Josh', whatCanDo: 'painting' },   { name: 'Lay', whatCanDo: 'security' },   { name: 'Ralph', whatCanDo: 'cleaning' } ];  function makeWorkers(people) {   return people.map((person) => {     const { name, whatCanDo } = person;     return <li key={name}>My name is {name}, I can do {whatCanDo}</li>   }); }  <ul>makeWorkers(people)</ul>

比如在React中，map 是非常常用的制作元素的方法，因為 map 在對原數組的數據進(jìn)行操作后，會(huì )創(chuàng )建并返回一個(gè)新的數組。

const mySubjectId = ['154', '773', '245'];  function countSubjects(subjects) {   let cnt = 0;      subjects.forEach(subject => {     if (mySubjectId.includes(subject.id)) {       cnt += 1;     }   });      return cnt; }  countSubjects([   { id: '223', teacher: 'Mark' },   { id: '154', teacher: 'Linda' } ]); // 1

另一方面，當你想對數據進(jìn)行某些操作而不創(chuàng )建新數組時(shí)，forEach 很有用。順便說(shuō)一句，可以使用 filter 重構示例。

subjects.filter(subject => mySubjectId.includes(subject.id)).length;

綜上所述，我建議你在創(chuàng )建一個(gè)新的數組時(shí)使用map，當你不需要制作一個(gè)新的數組，而是要對數據做一些事情時(shí)，就使用forEach。

速度比較

有些帖子提到 map 比 forEach 快。所以，我很好奇這是不是真的。我找到了這個(gè)對比結果。

該代碼看起來(lái)非常相似，但結果卻相反。有些測試說(shuō) forEach 更快，有些說(shuō) map 更快。也許你在告訴自己 map/forEach  比其他的快，你可能是對的。老實(shí)說(shuō)，我不確定。我認為在現代Web開(kāi)發(fā)中，可讀性比 map 和 forEach 之間的速度重要得多。

但可以肯定的是——兩者都比JavaScript內置的 for 循環(huán)慢。