|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
JavaScript Array.forEach()和Array.map()的區(qū)別
作者:admin 時間:2023-6-7 17:5:39 瀏覽:在學(xué)習(xí) JavaScript 循環(huán)、迭代和數(shù)組的時候，會發(fā)現(xiàn)這兩種方法： Array.forEach()和Array.map()。在這篇文章中，我將詳解這兩種方法之間的區(qū)別。
Array.forEach 是什么？
forEach 方法允許你為數(shù)組中的每個元素運行一個函數(shù)/方法。
語法
[].forEach(function(item, index, array){
//這里做你的事情...
}); | 參數(shù) | 描述 | 必須 |
|---|---|---|
| item | 當前正在處理的項目 | 是 |
| index | 數(shù)組中當前項的索引 | 否 |
| array | 調(diào)用了 forEach 數(shù)組 | 否 |
示例
["apple", "mango", "avocado", "dragon fruit"].forEach(console.log);
輸出
如你所見，我們通過 console.log 方法顯示了 forEach 方法的 3 個參數(shù)。容易吧？我將在后面的部分深入探討。
Array.map 是什么？
map 方法返回一組新數(shù)組，但不更改原始數(shù)組。
語法
[].map(function(currentValue, index,currentArray){
//這里做你的事情...
}, thisValue)| 參數(shù) | 描述 | 必須 |
|---|---|---|
| currentValue | 當前正在處理的項目 | 是 |
| index | 數(shù)組中當前項的索引 | 否 |
| currentArray | 調(diào)用了 map 數(shù)組 | 否 |
| thisValue | 執(zhí)行回調(diào)時用作 this 的值 | 否 |
示例
["apple", "mango", "avocado", "dragon fruit"].map((currentValue) => currentValue.toUpperCase());
輸出
如你所見，我們已經(jīng)展示了 map方法如何返回一組新的大寫數(shù)組。
forEach和map的區(qū)別
現(xiàn)在，我們已經(jīng)了解了這兩種數(shù)組方法的語法，我們可以去回答它們的區(qū)別了。將盡最大努力解釋代碼示例的使用差異。然而，在進入每個細節(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)容。
- 遍歷列表并對每個列表應(yīng)用一些具有副作用的操作。如果你需要做一些有意義的事情，你可以在迭代的同時做一些副作用。
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 方法時，我都觀察到它描述了控制流。沒有神秘，對吧？
map
- 返回一個新列表而不更改任何其他內(nèi)容。
- 沒有副作用，它不會改變原來的數(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 方法。我觀察到它有點像數(shù)據(jù)流。意思是，當你有一個輸入數(shù)組時，它會通過使用此方法輸出一個新數(shù)組。因此，我們可以說它是功能性的。
結(jié)論
我們已經(jīng)看到了 forEach 和 map 之間的區(qū)別。我們從它的語法開始，一直到代碼示例的差異。
很明顯，這兩種方法在使用上有著截然相反的觀點，各有利弊。因此，我們可以得出結(jié)論，forEach 方法使用的是命令式編程范式，而 map 方法使用的是函數(shù)式編程范式。
關(guān)于Array.forEach()和Array.map()的區(qū)別，你還可以看看下面的文章以了解更多。
相關(guān)文章
- 站長推薦
