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

相同點：

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

接下來我們看看這兩個方法

1.map()方法

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

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

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

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ù)組的每個元素，將元素傳給回調(diào)函數(shù)。
注意：forEach對于空數(shù)組是不會調(diào)用回調(diào)函數(shù)的。
語法：

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

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

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

補充：

forEach和map詳細(xì)講解

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

基本用法

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

forEach

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

forEach方法的語法如下：

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

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

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

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

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

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

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

const arr = [1, 2, 3];
arr.forEach((element) => {
  console.log(element);
});

map

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

map 方法的語法如下：

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

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

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

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

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

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

const arr = [1, 2, 3];
const newArr = arr.map((element) => {
  return element + 1;
});
console.log(newArr); // 輸出[2, 3, 4]

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

剖析原理

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

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

forEach

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

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

下面是一個簡化的forEach實現(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);
  }
};

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

map

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

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

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

下面是一個簡化的map實現(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;
};

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

總結(jié)

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

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

最新評論