Question

我知道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()方法来更改函数中先前作用域的变量而不实际返回任何内容？答案是正确的吗？

Answer 1

有效。但是，在此处应用Principle of Least Astonishment表示最好使用已知/主要用途与您的意图相匹配的函数，而不是使用不同的'off-label'。我知道这里没有技术上的理由使用.forEach()而不是.map()，但是因为.map()产生副作用是一种不常见的模式，它会使你的代码不那么清晰。如果你使用.forEach()就行了。

如果您在团队环境中工作，许多人会触摸您的代码，那么为了最大限度地理解未来对意图的理解，它值得传统。

Answer 2

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

以下内容更贴合您的需求并且更具可读性。

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

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

Answer 3

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

var newStuff = {};

moreStuff = stuff.map(function(value, key){
    newStuff[value] = {'value' : value};
    return {'other_stuff': value};
});

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

3 个答案: