卡卡網(wǎng)

在學(xué)習(xí) JavaScript 循環(huán)、迭代和數(shù)組的時(shí)候，會(huì)發(fā)現(xiàn)這兩種方法： Array.forEach()和Array.map()。在這篇文章中，我將詳解這兩種方法之間的區(qū)別。

Array.forEach 是什么？

forEach 方法允許你為數(shù)組中的每個(gè)元素運(yùn)行一個(gè)函數(shù)/方法。

語法

[].forEach(function(item, index, array){    
    //這里做你的事情...    
}); 

示例

["apple", "mango", "avocado", "dragon fruit"].forEach(console.log);

輸出

如你所見，我們通過 console.log 方法顯示了 forEach 方法的 3 個(gè)參數(shù)。容易吧？我將在后面的部分深入探討。

Array.map 是什么？

map 方法返回一組新數(shù)組，但不更改原始數(shù)組。

語法

[].map(function(currentValue, index,currentArray){  
    //這里做你的事情...  
}, thisValue)

示例

["apple", "mango", "avocado", "dragon fruit"].map((currentValue) => currentValue.toUpperCase()); 

輸出

如你所見，我們已經(jīng)展示了 map方法如何返回一組新的大寫數(shù)組。

forEach和map的區(qū)別

現(xiàn)在，我們已經(jīng)了解了這兩種數(shù)組方法的語法，我們可以去回答它們的區(qū)別了。將盡最大努力解釋代碼示例的使用差異。然而，在進(jìn)入每個(gè)細(xì)節(jié)之前，我們需要某種形式的數(shù)據(jù)。

const employees =  
    [{  
        employee: 'Eleanor R. Crane',  
        company: 'Tellus Faucibus Leo Incorporated',  
        dailyRate: 0,  
        salary: 15200  
    },  
    {  
        employee: 'Haviva E. Lane',  
        company: 'Eu Neque Pellentesque Incorporated',  
        dailyRate: 0,  
        salary: 13333  
    },  
    {  
        employee: 'Merrill F. Morrison',  
        company: 'Lobortis Quam Ltd',  
        dailyRate: 0,  
        salary: 1450  
    },  
    {  
        employee: 'Halee L. Hensley',  
        company: 'Elit Corp.',  
        dailyRate: 0,  
        salary: 15872  
    },  
    {  
        employee: 'Hamish T. Trevino',  
        company: 'Rhoncus LLC',  
        dailyRate: 0,  
        salary: 14214  
        }];  

forEach

• 沒有結(jié)果值或不返回任何內(nèi)容。
• 遍歷列表并對每個(gè)列表應(yīng)用一些具有副作用的操作。如果你需要做一些有意義的事情，你可以在迭代的同時(shí)做一些副作用。

const TOTAL_WORKING_DAYS = 261;  

const dailyRate = (item, index, array) => array[index].dailyRate = Math.floor(((item.salary * 12) / (TOTAL_WORKING_DAYS)));  

//未定義 forEach 不返回任何結(jié)果  
let dailyRateEmployeeResults = employees.forEach(dailyRate);  

console.log(dailyRateEmployeeResults);//undefined  

console.log(employees); //有副作用  

輸出

關(guān)于 forEach 方法的思考

每次使用 forEach 方法時(shí)，我都觀察到它描述了控制流。沒有神秘，對吧？

map

• 返回一個(gè)新列表而不更改任何其他內(nèi)容。
• 沒有副作用，它不會(huì)改變原來的數(shù)組列表。

const TOTAL_WORKING_DAYS = 261;  

const getDailyRate = salary => Math.floor(((salary * 12) / (TOTAL_WORKING_DAYS)));  

const dailyRate = employee => Object.assign({}, { employee: employee.employee, dailyRate: getDailyRate(employee.salary) });  

//返回一組新的employees，其中包含dailyRate和name  
const newEmployees = employees.map(dailyRate);  

//新數(shù)據(jù)  
console.log(newEmployees);  

//舊數(shù)據(jù)  
console.log(employees);

輸出

關(guān)于map方法的思考

再次回到我的觀察，但使用 map 方法。我觀察到它有點(diǎn)像數(shù)據(jù)流。意思是，當(dāng)你有一個(gè)輸入數(shù)組時(shí)，它會(huì)通過使用此方法輸出一個(gè)新數(shù)組。因此，我們可以說它是功能性的。

結(jié)論

我們已經(jīng)看到了 forEach 和 map 之間的區(qū)別。我們從它的語法開始，一直到代碼示例的差異。

很明顯，這兩種方法在使用上有著截然相反的觀點(diǎn)，各有利弊。因此，我們可以得出結(jié)論，forEach 方法使用的是命令式編程范式，而 map 方法使用的是函數(shù)式編程范式。

關(guān)于Array.forEach()和Array.map()的區(qū)別，你還可以看看下面的文章以了解更多。

• JavaScript map()與forEach()方法的使用差異

相關(guān)文章

• 為什么不能在forEach中使用break、continue或return？
• 使用every()和some()函數(shù)替代forEach中斷循環(huán)
• JavaScript forEach break 退出循環(huán)的兩種方法
• JavaScript中for與forEach循環(huán)的三個(gè)區(qū)別【示例】
• 實(shí)測速度比較：JS中的for、for...of和forEach循環(huán)
• JS中不兼容IE瀏覽器的循環(huán)語句有哪些？for..of等
• JavaScript map()與forEach()方法的使用差異

標(biāo)簽: forEach方法  map方法