forEach和map方法之间有什么区别

JavaScript语言，并且在循环，迭代和数组的主题范围内吗？另外，您偶然发现了这两种方法， Array.forEach() 并且Array.map()。最后，感到困惑吗？不用担心，因为在这篇文章中，我们将向您展示这两种方法之间的区别。

forEach和map的语法
什么是Array.forEach？
该forEach方法允许您为数组中的每个元素运行函数/方法。

//the syntax   
[].forEach(function(item, index, array){
    
      
    //do your stuff here...  
});

论据描述需要
item 当前正在处理的项目是
index 数组中当前项目的索引没有
array 该数组forEach被调用没有
快速范例

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

在这里插入图片描述

论据描述需要
item 当前正在处理的项目是
index 数组中当前项目的索引没有
array 该数组forEach被调用没有

如您所见，我们forEach通过传递console.log方法显示了方法的三个参数。很简单，不是吗？我们将在后面的部分中深入了解。

什么是Array.map？
该map方法返回一组新的数组，但不更改原始数组。

语法

//the syntax: 
[].map(function(currentValue, index,currentArray){
    
    
//do your stuff here ...
}, thisValue)

论据描述需要
currentValue 当前正在处理的项目是
index 数组中当前项目的索引没有
currentArray 该数组map 被调用没有
thisValue 执行回调时用作此值没有
快速范例

["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
        }];

每次
没有结果值或不返回任何值
遍历一个列表，并对每个列表进行一些有副作用的操作。如果您需要做一些有意义的事情，可以在迭代时做一些副作用。

const TOTAL_WORKING_DAYS = 261;

//Horrible in my opinion, worst someone will say it is ugly. 
const dailyRate = (item, index, array) => array[index].dailyRate = 
                   Math.floor(((item.salary * 12) / (TOTAL_WORKING_DAYS)));

//undefined as forEach doesn't return any results.
let dailyRateEmployeeResults = employees.forEach(dailyRate);

console.log(dailyRateEmployeeResults);    //undefined

console.log(employees);                   //With side effects

在这里插入图片描述

关于forEach方法的思考
每次使用该forEach方法时，我都观察到它描述了控制流程。没有神秘感，不是吗？因此，可以说这是当务之急。

地图
返回一个新列表，而不更改其他任何内容
没有副作用，它不会更改原始数组列表

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) });

//Returns a new set of employees with dailyRate and name
const newEmployees = employees.map(dailyRate);

//new data
console.log(newEmployees);

//old data
console.log(employees);

在这里插入图片描述

同样，回到我的观察，但是使用该map 方法，我已经观察到它有点像数据流。意思是，当您有一个输入数组时，它将通过使用此方法输出一个新数组。因此，可以说它是有功能的。

forEach和map方法之间有什么区别

猜你喜欢