将JavaScript Array.prototype.map与作用域变量一起使用是不是一种糟糕的做法

Is it bad practice to use JavaScript Array.prototype.map with scoped variables

本文关键字：一种 是不是 map prototype Array JavaScript 作用域 一起 变量      更新时间：2023-09-26

我知道map()旨在迭代列表，对每个成员运行一个函数，并返回(或不返回(一个值作为列表项。但是，如果我使用它的方式与使用forEach()的方式相同呢？

示例：

var stuff = [1, 2, 3];
var newStuff = {};
var moreStuff = [];
stuff.forEach(function(value, key){
    newStuff[value] = {'value' : value};
    moreStuff.push({'other_stuff': value});
});
$('body').append('<div>1. ' + JSON.stringify(newStuff) + '/' + JSON.stringify(moreStuff) + '</div>');
//vs.
newStuff = {};
moreStuff = [];
stuff.map(function(value, key){
    newStuff[value] = {'value' : value};
    moreStuff.push({'other_stuff': value});
});
$('body').append('<div>2. ' + JSON.stringify(newStuff) + '/' + JSON.stringify(moreStuff) + '</div>');

结果。。。

1. {"1":{"value":1},"2":{"value":2},"3":{"value":3}}/[{"other_stuff":1},{"other_stuff":2},{"other_stuff":3}]
2. {"1":{"value":1},"2":{"value":2},"3":{"value":3}}/[{"other_stuff":1},{"other_stuff":2},{"other_stuff":3}]

https://jsfiddle.net/0n7ynvmo/

我敢肯定，异步考虑因素是相同的(可能会搞砸这个例子(，结果也是相同的，但为了讨论最佳实践，一种方式与另一种方式的缺点是什么？更改函数中以前作用域的变量而不实际返回任何内容，这是对map()方法的滥用吗？正确的答案只是一个判断问题吗？

它是有效的。然而，在这里应用最小惊奇原则表明，最好使用已知/主要用途与您的意图相匹配的函数，而不是使用不同的"标签外"函数。据我所知，在技术上没有理由使用.forEach()而不是.map()，但由于从.map()产生副作用是一种不常见的模式，这将使您的代码比使用.forEach()时更不清晰。

如果你在一个团队环境中工作，很多人会接触你的代码，那么为了最大限度地提高未来对意图的理解，保持传统是值得的。

将带有副作用的回调传递给map、filter、reduce等是非常非常糟糕的做法。大多数阅读代码的人都希望回调返回新的数组元素，而不做其他事情。

以下内容更适合您的需求，可读性更强。

var moreStuff = stuff.map(function(value) {
    return { otherStuff: value };
});
var newStuff = {};
stuff.forEach(function(value) {
   newStuff[value] = { value: value };
});

没有太多缺点-除了在forEach中没有返回新列表。但在您的情况下，您想要一个新列表，因此使用.map

var newStuff = {};
moreStuff = stuff.map(function(value, key){
    newStuff[value] = {'value' : value};
    return {'other_stuff': value};
});
相关文章：