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