基本用法

forEach和map都是JavaScript中常見的用于遍歷數(shù)組的方法，它們都可以用于對(duì)數(shù)組中的每個(gè)元素執(zhí)行某種操作，但它們的使用方式和返回結(jié)果略有不同。

forEach

forEach是一個(gè)用于數(shù)組的方法，它會(huì)對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。該方法沒有返回值，它只是遍歷整個(gè)數(shù)組并執(zhí)行回調(diào)函數(shù)。

forEach方法的語法如下：

array.forEach(callback(currentValue, index, array), thisArg);

其中，callback是要執(zhí)行的函數(shù)，它會(huì)被傳入三個(gè)參數(shù)：

• currentValue：當(dāng)前處理的元素。
• index：當(dāng)前處理元素的索引。
• array：當(dāng)前正在遍歷的數(shù)組。

thisArg是一個(gè)可選參數(shù)，用于指定執(zhí)行回調(diào)函數(shù)時(shí)使用的 this 值。

forEach方法返回的是undefined，它不會(huì)生成新的數(shù)組。

forEach方法和for循環(huán)在功能上類似，但它更簡(jiǎn)潔、易讀，也更安全，因?yàn)樗鼤?huì)避免循環(huán)時(shí)的一些常見問題，如數(shù)組越界、重復(fù)計(jì)算等。

下面是一個(gè)使用 forEach 方法遍歷數(shù)組并輸出每個(gè)元素的例子：

const arr = [1, 2, 3];

arr.forEach((element) => {
  console.log(element);
});

map

map 方法也是一個(gè)用于數(shù)組的方法，它會(huì)對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)，并將回調(diào)函數(shù)的返回值存儲(chǔ)在一個(gè)新的數(shù)組中。

map 方法的語法如下：

array.map(callback(currentValue, index, array), thisArg);

其中，callback 是要執(zhí)行的函數(shù)，它會(huì)被傳入三個(gè)參數(shù)：

• currentValue：當(dāng)前處理的元素。
• index：當(dāng)前處理元素的索引。
• array：當(dāng)前正在遍歷的數(shù)組。

thisArg是一個(gè)可選參數(shù)，用于指定執(zhí)行回調(diào)函數(shù)時(shí)使用的 this 值。

map 方法會(huì)返回一個(gè)新的數(shù)組，這個(gè)數(shù)組的長度和原數(shù)組相同，但是每個(gè)元素都是經(jīng)過回調(diào)函數(shù)處理后的結(jié)果。

下面是一個(gè)使用 map 方法將數(shù)組中的每個(gè)元素都加上 1 的例子：

const arr = [1, 2, 3];

const newArr = arr.map((element) => {
  return element + 1;
});

console.log(newArr); // 輸出[2, 3, 4]

可以看到，map 方法生成了一個(gè)新的數(shù)組，并將原數(shù)組中的每個(gè)元素都加上了 1。

剖析原理

forEach和map方法的原理都是基于數(shù)組的迭代器，實(shí)際上它們都是通過調(diào)用迭代器實(shí)現(xiàn)對(duì)數(shù)組的遍歷。

JavaScript數(shù)組有一個(gè)內(nèi)置的迭代器，即Array.prototype[@@iterator]方法。該方法返回一個(gè)迭代器對(duì)象，可以使用該對(duì)象對(duì)數(shù)組進(jìn)行迭代。forEach和map方法都會(huì)調(diào)用Array.prototype[@@iterator]方法返回迭代器對(duì)象，然后使用該迭代器對(duì)象進(jìn)行遍歷。

forEach

當(dāng)調(diào)用forEach方法時(shí)，JavaScript引擎會(huì)執(zhí)行以下步驟：

• 檢查數(shù)組是否存在，如果不存在，則拋出TypeError異常。
• 檢查第一個(gè)參數(shù)是否是一個(gè)函數(shù)，如果不是，則拋出TypeError異常。
• 檢查第二個(gè)參數(shù)是否是一個(gè)對(duì)象，如果是，則將該對(duì)象作為this值傳遞給回調(diào)函數(shù)，否則this值為undefined。
• 獲取迭代器對(duì)象，通過調(diào)用Array.prototype[@@iterator]方法獲得。
• 對(duì)于迭代器對(duì)象中的每個(gè)元素，依次執(zhí)行回調(diào)函數(shù)，并將當(dāng)前元素的值、索引和原數(shù)組作為參數(shù)傳遞給回調(diào)函數(shù)。
• forEach方法不會(huì)返回任何值。

下面是一個(gè)簡(jiǎn)化的forEach實(shí)現(xiàn)代碼：

Array.prototype.myForEach = function(callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  for (var i = 0; i < this.length; i++) {
    callback.call(thisArg, this[i], i, this);
  }
};

可以看到，該實(shí)現(xiàn)代碼使用了for循環(huán)來遍歷數(shù)組，并使用call方法調(diào)用回調(diào)函數(shù)，并將當(dāng)前元素的值、索引和原數(shù)組作為參數(shù)傳遞給回調(diào)函數(shù)。

map

map方法的原理與forEach方法類似，也是通過調(diào)用迭代器實(shí)現(xiàn)對(duì)數(shù)組的遍歷，只不過map方法在遍歷時(shí)會(huì)將回調(diào)函數(shù)的返回值存儲(chǔ)在一個(gè)新的數(shù)組中。下面我們以map方法為例來剖析其原理。

當(dāng)調(diào)用map方法時(shí)，JavaScript引擎會(huì)執(zhí)行以下步驟：

• 檢查數(shù)組是否存在，如果不存在，則拋出TypeError異常。
• 檢查第一個(gè)參數(shù)是否是一個(gè)函數(shù)，如果不是，則拋出TypeError異常。
• 檢查第二個(gè)參數(shù)是否是一個(gè)對(duì)象，如果是，則將該對(duì)象作為this值傳遞給回調(diào)函數(shù)，否則this值為undefined。
• 創(chuàng)建一個(gè)新的空數(shù)組，用于存儲(chǔ)回調(diào)函數(shù)的返回值。
• 獲取迭代器對(duì)象，通過調(diào)用Array.prototype[@@iterator]方法獲得。
• 對(duì)于迭代器對(duì)象中的每個(gè)元素，依次執(zhí)行回調(diào)函數(shù)，并將當(dāng)前元素的值、索引和原數(shù)組作為參數(shù)傳遞給回調(diào)函數(shù)。
• 將回調(diào)函數(shù)的返回值存儲(chǔ)在新數(shù)組中。
• 返回新數(shù)組。

下面是一個(gè)簡(jiǎn)化的map實(shí)現(xiàn)代碼：

Array.prototype.myMap = function(callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var newArray = [];
  for (var i = 0; i < this.length; i++) {
    newArray.push(callback.call(thisArg, this[i], i, this));
  }
  return newArray;
};

可以看到，該實(shí)現(xiàn)代碼除了使用for循環(huán)遍歷數(shù)組之外，還創(chuàng)建了一個(gè)新的數(shù)組，并將回調(diào)函數(shù)的返回值存儲(chǔ)在新數(shù)組中，最后返回新數(shù)組。

forEach和map的共同點(diǎn)

• 都只能遍歷數(shù)組
• 都是循環(huán)遍歷數(shù)組中的每一項(xiàng)。
• 每次執(zhí)行匿名函數(shù)都支持三個(gè)參數(shù)，參數(shù)分別為item(當(dāng)前每一項(xiàng))，index(索引值)，arr(原數(shù)組)。
• 匿名函數(shù)中的this都是指向window。

forEach和map的不同點(diǎn)

• forEach()方法沒有返回值，會(huì)更改原數(shù)組。

• map() 有返回值，返回一個(gè)新數(shù)組，不會(huì)改變?cè)瓟?shù)組，map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

• 總的來說 map 的速度大于 forEach()

• 性能上來說for > forEach > map

總結(jié)

總的來說，forEach和map方法都是基于數(shù)組的迭代器實(shí)現(xiàn)的，它們的主要區(qū)別在于對(duì)回調(diào)函數(shù)的處理方式。forEach方法執(zhí)行回調(diào)函數(shù)時(shí)，不會(huì)將回調(diào)函數(shù)的返回值存儲(chǔ)起來，而是直接忽略。map方法執(zhí)行回調(diào)函數(shù)時(shí)，會(huì)將回調(diào)函數(shù)的返回值存儲(chǔ)在一個(gè)新數(shù)組中，最后將該數(shù)組返回。因此，如果我們需要對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)操作，并將操作的結(jié)果存儲(chǔ)在新數(shù)組中，那么應(yīng)該使用map方法。如果我們只是需要對(duì)數(shù)組中的每個(gè)元素執(zhí)行一些操作，而不需要將操作的結(jié)果存儲(chǔ)起來，那么應(yīng)該使用forEach方法。

到此這篇關(guān)于JavaScript中forEach和map詳細(xì)講解的文章就介紹到這了,更多相關(guān)js forEach和map內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論