Question

从对象数组中提取属性的值作为数组

2013-10-25

1919957

javascript javascript-objects

我有一个具有以下结构的 JavaScript 对象数组：

objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];

我想从每个对象中提取一个字段，并获取一个包含值的数组，例如字段 foo 将给出数组 [ 1, 3, 5 ] 。

我可以用这种简单的方法来做到这一点：

function getFields(input, field) {
    var output = [];
    for (var i=0; i < input.length ; ++i)
        output.push(input[i][field]);
    return output;
}

var result = getFields(objArray, "foo"); // returns [ 1, 3, 5 ]

有没有更优雅或惯用的方式来做到这一点，以便不需要自定义实用程序函数？

关于建议重复的说明，它介绍了如何将单个对象转换为数组。

Answer 1

这里有一个更简短的实现方法：

let result = objArray.map(a => a.foo);

或者

let result = objArray.map(({ foo }) => foo)

您也可以查看 Array.prototype.map() 。

Answer 2

可以，但是它依赖于 JavaScript 的 ES5 功能。这意味着它无法在 IE8 或更早的版本中使用。

var result = objArray.map(function(a) {return a.foo;});

在兼容 ES6 的 JS 解释器上，您可以使用 箭头函数 来简化操作：

var result = objArray.map(a => a.foo);

Array.prototype.map 文档

Answer 3

就 JS 解决方案而言，我发现，虽然可能不够优雅，但简单的索引 for 循环比其他方案性能更好。

从 100000 个元素数组中提取单个属性（通过 jsPerf）

传统 for 循环 368 Ops/sec

var vals=[];
for(var i=0;i<testArray.length;i++){
   vals.push(testArray[i].val);
}

ES6 for..of 循环 303 Ops/sec

var vals=[];
for(var item of testArray){
   vals.push(item.val); 
}

Array.prototype.map 19 Ops/sec

var vals = testArray.map(function(a) {return a.val;});

TL;DR - .map() 很慢，但如果您觉得可读性比性能更重要，请随意使用它。

编辑 #2：6/2019 - jsPerf链接已损坏，已删除。