?? 個人主頁：不叫貓先生，公眾號：前端Clodplay
???♂? 作者簡介：前端領(lǐng)域優(yōu)質(zhì)作者、阿里云專家博主，共同學(xué)習(xí)共同進步，一起加油呀！
?優(yōu)質(zhì)專欄：VS Code插件開發(fā)極速入門
?? 資料領(lǐng)?。呵岸诉M階資料可以找我免費領(lǐng)取

區(qū)別

map會返回一個新的數(shù)組，而forEach不會。具體探討一下，實則會有新的發(fā)現(xiàn)！

下面來探討一下原因

手寫 map 和 forEach

手寫map，如下：

function myMap(array, callback) {
  //存儲結(jié)果
  const result = [];
  for (let i = 0; i < array.length; i++) {
    result.push(callback(array[i], i, array));
  }
  return result;
}

調(diào)用上面的myMap函數(shù)

// 定義一個回調(diào)函數(shù)，用于對數(shù)組元素進行操作
function double(value) {
  return value * 2;
}

// 定義一個數(shù)組
const numbers = [1, 2, 3, 4, 5];

// 調(diào)用 myMap 函數(shù)，并傳入定義好的回調(diào)函數(shù)
const doubledNumbers = myMap(numbers, double);

console.log(doubledNumbers); // 輸出 [2, 4, 6, 8, 10]

手寫forEach，如下：

function myForEach(array, callback) {
  for (let i = 0; i < array.length; i++) {
    callback(array[i], i, array);
  }
}

調(diào)用上面的myForEach函數(shù)

// 定義一個回調(diào)函數(shù)，用于對數(shù)組元素進行操作
function logItem(item, index) {
  console.log(`Index ${index}: ${item}`);
}

// 定義一個數(shù)組
const fruits = ["Apple", "Banana", "Orange", "Mango"];

// 調(diào)用 myForEach 函數(shù)，并傳入定義好的回調(diào)函數(shù)
myForEach(fruits, logItem);

總結(jié)：
上面可以看到 forEach 和 map 的實現(xiàn)原理相似。它們都是通過遍歷數(shù)組，對數(shù)組的每個元素執(zhí)行特定的函數(shù)。區(qū)別主要在于它們處理函數(shù)返回值的方式不同。
forEach 忽略函數(shù)的返回值，而 map 則將函數(shù)的返回值收集到一個新的數(shù)組中

可以看到 map 和 forEach都會有一個for循環(huán)處理，且map有return

 for (let i = 0; i < array.length; i++) {
    result.push(callback(array[i], i, array));
  }
for (let i = 0; i < array.length; i++) {
    callback(array[i], i, array);
  }

那么能不能forEach也return，測試一下

        const array = [1, 2, 3]

        const result = array.forEach((element) => {
            return element * 2; // 這個返回值不會被 forEach 捕獲或使用
        });

        console.log(result); // 輸出: undefined

但是map，return 之后是有值的

        const array = [1, 2, 3]

        const result = array.map((element) => {
            return element * 2; // 這個返回值會被 map 捕獲或使用
        });

        console.log(result); // 輸出: [2, 4, 6]

map 和 forEach 會不會改變原數(shù)組

map 和 forEach 會不會改變原數(shù)組，需要看數(shù)據(jù)類型，具體分為基礎(chǔ)數(shù)據(jù)類型和引用類型。

處理基本類型數(shù)據(jù)

forEach 處理基本數(shù)據(jù)類型

        let array = [1, 2, 3, 4];
        array.forEach(item => {
            item = item + 1
        })
        console.log(array); // [1,2,3,4]

map 處理基本數(shù)據(jù)類型

        let array = [1, 2, 3, 4];
        array.map(item => {
            item = item + 1
        })
        console.log(array); // [1,2,3,4]

測試后發(fā)現(xiàn)，都沒有改變原數(shù)組

處理引用類型數(shù)據(jù)

forEach 處理引用類型數(shù)據(jù)

        const arr = [{
            name: 'shaka',
            age: 23
        }, {
            name: 'virgo',
            age: 18
        }]
        arr.forEach(item => {
            if (item.name === 'shaka') {
                item.age = 100
            }
        })
        console.log(arr); //[{name: 'shaka', age: 100}, {name: 'virgo', age: 18}]

map 處理引用類型數(shù)據(jù)

 const arr = [{
            name: 'shaka',
            age: 23
        }, {
            name: 'virgo',
            age: 18
        }]
        arr.map(item => {
            if (item.name === 'shaka') {
                item.age = 100
            }
        })
        console.log(arr); //[{name: 'shaka', age: 100}, {name: 'virgo', age: 18}]

發(fā)現(xiàn)都改變了原數(shù)據(jù)

思考：為什么基礎(chǔ)數(shù)據(jù)類型不會更改原數(shù)據(jù)，引用類型不會

這是因為在使用 forEach 和 map 方法時，對引用類型元素的修改會直接反映在原始數(shù)組中。這是因為引用類型的元素實際上存儲的是引用（內(nèi)存地址），而非值本身。因此，通過引用可以訪問和修改原始數(shù)組中的元素。而number、string、Boolean、null、undefined它們在棧內(nèi)存中直接存儲變量與值。

具體解釋如下：
基本數(shù)據(jù)類型為值傳遞，callback的執(zhí)行和原數(shù)組毫不相干，所以forEach無法修改基本數(shù)據(jù)的數(shù)組
基本數(shù)據(jù)類型（Primitive data types）如數(shù)值（Number）、字符串（String）、布爾值（Boolean）、null 和 undefined 等，它們在內(nèi)存中是直接存儲變量的值，而不是引用。因此，對于基本數(shù)據(jù)類型，當(dāng)它們作為數(shù)組的元素被傳遞給 forEach 或 map 方法時，處理的是它們的值的拷貝，而不是原始值本身。因此，對于基本數(shù)據(jù)類型，任何更改都只是在處理的拷貝上進行，不會影響到原始數(shù)組中的值。

引用類型（Reference types）如對象（Object）、數(shù)組（Array）和函數(shù)（Function）等，它們在內(nèi)存中存儲的是地址，即指向存儲實際數(shù)據(jù)的內(nèi)存地址。因此，當(dāng)引用類型的元素被傳遞給 forEach 或 map 方法時，處理的是對該地址的引用，而不是原始數(shù)據(jù)本身。這意味著對引用類型的元素進行的任何更改都會直接反映在原始數(shù)組中，因為它們都指向相同的內(nèi)存地址。

好書推薦

《ReactJS入門實踐》

本書涵蓋了編寫高質(zhì)量React代碼要掌握的一切內(nèi)容。你將學(xué)習(xí)使用函數(shù)方法和類方法編寫React組件；學(xué)習(xí)如何使用幾種不同的方法來管理應(yīng)用程序的狀態(tài)，包括使用React Hooks和setState方法；學(xué)習(xí)如何將組件合在一起來創(chuàng)建完整的動態(tài)用戶界面；還將學(xué)習(xí)如何從外部數(shù)據(jù)源獲取數(shù)據(jù)并在應(yīng)用程序中使用。此外，本書介紹了如何在用戶的Web瀏覽器中存儲數(shù)據(jù)，以提高應(yīng)用程序的性能和可用性。談到可用性，你將會了解在移動設(shè)備和桌面上運行應(yīng)用程序的最佳實踐，還將了解如何確保應(yīng)用程序可訪問。

如果你對《ReactJS實踐入門》感興趣的話，可以點擊鏈接購買：鏈接直達文章來源地址http://www.zghlxwxcb.cn/news/detail-860693.html

到了這里，關(guān)于【深入探討】JavaScript 中的 forEach 和 map 區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！