Array.prototype.map()和Array.prototype.forEach()

时间:2015-04-28 18:35:02

标签: javascript

我有一个数组(下面的示例数组) -

a = [{"name":"age","value":31},
     {"name":"height (inches)","value":62},
     {"name":"location","value":"Boston, MA"},
     {"name":"gender","value":"male"}];

我想遍历这个对象数组并生成一个新的Object(不是特别减少)。

我有这两种方法 -



a = [{"name":"age","value":31},
     {"name":"height (inches)","value":62},
     {"name":"location","value":"Boston, MA"},
     {"name":"gender","value":"male"}];

// using Array.prototype.map()
b = a.map(function(item){
  var res = {}; 
  res[item.name] = item.value; 
  return res;
});
console.log(JSON.stringify(b));

var newObj = [];
// using Array.prototype.forEach()
a.forEach(function(d){
    var obj = {};
    obj[d.name] = d.value;
    newObj.push(obj)
});
console.log(JSON.stringify(newObj))




仅仅使用其中任何一种进行此类操作是不正确的? 另外,我想了解一个用例会比另一个更受欢迎的用例场景吗?或者我应该坚持for-loop?

2 个答案:

答案 0 :(得分:7)

正如您在评论中已经讨论的那样,这里没有完全错误的答案。除了一些相当精细的表现,这是一个风格问题。您正在解决的问题可以通过for循环,.forEach().reduce().map()来解决。

我故意按顺序列出它们,因为它们中的每一个都可以使用列表中较早的任何内容重新实现。例如,您可以使用.reduce()复制.map(),但不能反过来。

在您的特定情况下,除非微优化对您的域至关重要,否则我会根据可读性和代码维护做出决定。在此基础上,.map()具体而准确地完成了你所追求的目标;有人阅读你的代码会看到它并知道你正在消耗一个数组来生成另一个数组。您可以使用.forEach().reduce()完成此操作,但由于这些功能可用于更多内容,因此有人必须花费额外的时间来了解您使用它们的目的。 .map()是最能表达你意图的电话。

(是的,这意味着在本质上优先考虑执行效率的理解效率。如果代码不是高需求应用程序中性能瓶颈的一部分,我认为这是合适的。)

您询问了可能首选其他方案的情况。在这种情况下,.map()有效,因为您正在输出一个数组,并且您的输出数组与输入数组的长度相同。 (再次;这就是.map()所做的事情。如果你想输出一个数组,但是你可能需要为一个输入元素产生两个(或零)输出元素,.map()就会出来,我可能会使用.reduce()。 (链接.filter().map()也可能是'跳过一些输入元素'的情况,并且非常清晰可读)

如果要将输入数组的内容拆分为多个输出数组,可以使用.reduce()(通过将所有这些内容封装为单个对象的属性),但.forEach()for循环对我来说看起来更自然。

答案 1 :(得分:1)

首先,其中任何一个都可以使用,并且在您的示例中,没有理由不使用哪个更适合您的开发周期。我可能会使用map,因为那是为了什么;创建“一个新数组,其结果是在此数组中的每个元素上调用提供的函数。”

但是,你问的是哪个是绝对最快的?那些都不是;最快的2.5-3x将是一个简单的for循环(参见http://jsperf.com/loop-vs-map-vs-foreach进行简单的比较):

var newObj = [];
for (var i = 0, item; item = a[i]; i++) {
    var obj = {};
    obj[item.name] = item.value;
    newObj.push(obj);
});
console.log(JSON.stringify(newObj));