JavaScript：何时应该使用 forEach 和 map？

每当我在 JavaScript 课程中前进时，我都会注意到，当我离开常规循环并转到 forEach 时，许多学生一开始都会有点迷失，而这篇文章的想法就是在文本中永久地解释这一点，以帮助任何人。我的学生或学生，你现在可能有多大程度上有这个疑问。

介绍

如果您采用下面的 3 个代码，它们在浏览器中都会有相同的返回。

const names= ['Whinds', 'Freeway', 'Teste', 'Maria'];

for(let i = 0; i < names.length; i = i + 1 ) {
    console.log('[for]', names[i]);
}

const names = ['Whinds', 'Freeway', 'Teste', 'Maria'];

names.forEach(function(name, i) {
    console.log('[forEach]', name, i);
})

const names = ['Whinds', 'Freeway', 'Teste', 'Maria'];

names.map(function(name, i) {
    console.log('[forEach]', name, i);
})

一开始，你可以假设如果结果相同，它们做的事情就一样。但是，如果我们稍微看一下 forEach 和 map 就会发现，这里我们不需要担心索引变量（我们通常称之为 i），它用于控制循环，因为它是一个通常递增或递减的元素。

然而，很容易注意到，虽然我们没有写代码，但这些数据我们仍然可以访问，只不过这次我们把它作为传递给 forEach 和 map 函数的参数。为了更清楚地说明这一点，我们来看看 forEach 的一个可能实现。

该实现在 array.map 和 array.forEach 模型中不起作用，因为为此我们需要弄乱原型，而这本身就会产生一个帖子。

理解 forEach

之前我们看到 forEach 循环遍历数组中的所有元素，就像普通的 for 循环一样，这是因为它内部有一个 for 循环。如果我们要实现它，将会是类似下面的代码：

function ourForEach(arr, function) {
    for(let i = 0; i < arr.length; i = i + 1) {
        function(arr[i], i);
    }
}

ourForEach(['name', 'name2'], function(name, index) {
    console.log(name, index)
})

无论何时要执行 for 循环，都值得使用 forEach，因为它消除了处理控制变量的心理负担，因此可以帮助使代码更易于阅读，同时考虑到这是 JavaScript 世界中过度使用的形式。

了解地图

在实践中，正如我们在文章开头看到的那样，map 和 forEach 似乎做同样的事情，但是当我们分析它们的返回结果时，区别就很明显了。

const names = ['Whinds', 'Freeway', 'Teste', 'Maria'];

const returnForEach = names.forEach((currentName) => {
    console.log(currentName);

    return currentName.toUpperCase();
})
console.log(returnForEach) // undefined

const names= ['Whinds', 'Freeway', 'Teste', 'Maria'];

const returnMap = names.map((currentName) => {
    console.log(currentName);

    return currentName.toUpperCase();
})
console.log(returnMap ) // ['WHINDS', 'FREEWAY', 'TESTE', 'MARIA']

虽然 forEach 是作为 for 循环的替代品，但 map 是用来对数组的项目进行转换/修改操作的，在这些操作结束时，我们得到一个与基本列表具有相同项目数的新列表。

如果我们要实现该地图，我们最终会得到以下代码：

function ourMap(arr, function) {
    const newArray = [];
    for(let i = 0; i < arr.length; i = i + 1) {   
        newArray .push(function(arr[i], i));
    }    
    return newArray 
}

ourMap(['name', 'name2'], function(name, index) {
    console.log(name, index)
})

这使得我们更容易地连接诸如创建地图和添加过滤器之类的操作，假设地图的返回是一个数组，我们可以在这一行上编写代码：.map().filter()。

结论

这就是这篇文章的全部内容，我希望您清楚地了解，如果我们只是想要一种更优雅的方式来使用 for，我们使用 .forEach，如果我们想要转换/更改值，甚至在数组顶部连接操作，.map 是最合适的。

鏂囩珷鏉ユ簮锛�https://dev.to/samantafluture/javascript-when-should-i-use-foreach-and-map-1aao