forEach()和map()的區(qū)別

相同點(diǎn)：

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

接下來我們看看這兩個(gè)方法

1.map()方法

map定義和用法：
map方法返回一個(gè)新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值。
我的理解就是：原數(shù)組進(jìn)行處理之后對(duì)應(yīng)的一個(gè)新的數(shù)組。
map()方法按照原始數(shù)組元素順序依次處理元素。
注意：map()方法不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
map()方法不會(huì)改變?cè)紨?shù)組。
瀏覽器支持：
chrome、safari、opera都支持
IE：>=9版本
safari： >=1.5
語法：

array.map(function(item,index,arr){},thisValue)

參數(shù)說明：
item 當(dāng)前元素的值
index 索引值
arr 原數(shù)組
舉個(gè)小例子

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
    console.log(this);
    console.log("原數(shù)組arr：",arr); //注意這里執(zhí)行5次
    return item / 2;
},this);
console.log(str);

執(zhí)行的結(jié)果如下：
[0,1,2,3,4,5]

2.forEach

定義和用法
forEach()方法用于調(diào)用數(shù)組的每個(gè)元素，將元素傳給回調(diào)函數(shù)。
注意：forEach對(duì)于空數(shù)組是不會(huì)調(diào)用回調(diào)函數(shù)的。
語法：

Array.forEach(function(item,index,arr){},this)

參數(shù)說明同map方法
代碼實(shí)例如下：

var sum = 0;
var str = arr.forEach(function(item,index,arr){
    sum += item;
    console.log("sum的值為：",sum); //0 2 6 12 20 
})

補(bǔ)充：

forEach和map詳細(xì)講解

forEach和map 基本用法forEachmap 剖析原理forEachmap 總結(jié)

基本用法

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ù)組的長(zhǎng)度和原數(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ù)組。

總結(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)于JS中forEach()和map()的區(qū)別解析的文章就介紹到這了,更多相關(guān)forEach()和map()的區(qū)別：內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論