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

我有一个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 ]

是否有更优雅或更惯用的方法来实现这一点，从而不需要自定义实用程序函数？

注意建议的重复，它介绍了如何将单个对象转换为数组。

当前回答

创建一个空数组，然后对列表中的每个元素，将该对象中所需的内容推送到空数组中。

 let objArray2 = [];
 objArray.forEach(arr => objArray2.push(arr.foo));

2021-05-18 15:12:03

其他回答

是的，但它依赖于JavaScript的ES5特性。这意味着它在IE8或更高版本中不起作用。

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

在ES6兼容的JS解释器上，为了简洁起见，可以使用箭头函数：

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

Array.prototype.map文档

2013-10-25 13:14:56

如果您有嵌套数组，则可以使其工作方式如下：

常量objArray=[｛id:1，项：｛foo:4，条：2｝｝，｛id:2，项：｛foo:3，条：2｝｝，｛id:3，项：｛foo:1，条：2｝｝];let result=objArray.map（（｛id，items:｛foo｝｝）=>（｛id，foo｝））console.log（结果）

2020-05-11 00:55:48

虽然map是从对象列表中选择“列”的适当解决方案，但它也有缺点。如果没有明确检查列是否存在，它将抛出一个错误，并（最多）为您提供undefined。我会选择reduce解决方案，它可以简单地忽略该属性，甚至为您设置默认值。

function getFields(list, field) {
    //  reduce the provided list to an array only containing the requested field
    return list.reduce(function(carry, item) {
        //  check if the item is actually an object and does contain the field
        if (typeof item === 'object' && field in item) {
            carry.push(item[field]);
        }

        //  return the 'carry' (which is the list of matched field values)
        return carry;
    }, []);
}

jsbin示例

即使提供的列表中的某个项不是对象或不包含该字段，这也会起作用。

如果项不是对象或不包含字段，甚至可以通过协商默认值来使其更加灵活。

function getFields(list, field, otherwise) {
    //  reduce the provided list to an array containing either the requested field or the alternative value
    return list.reduce(function(carry, item) {
        //  If item is an object and contains the field, add its value and the value of otherwise if not
        carry.push(typeof item === 'object' && field in item ? item[field] : otherwise);

        //  return the 'carry' (which is the list of matched field values)
        return carry;
    }, []);
}

jsbin示例

这与map相同，因为返回的数组的长度与提供的数组相同。（在这种情况下，地图比缩减略便宜）：

function getFields(list, field, otherwise) {
    //  map the provided list to an array containing either the requested field or the alternative value
    return list.map(function(item) {
        //  If item is an object and contains the field, add its value and the value of otherwise if not
        return typeof item === 'object' && field in item ? item[field] : otherwise;
    }, []);
}

jsbin示例

还有一个最灵活的解决方案，它可以让你通过提供一个替代价值在两种行为之间切换。

function getFields(list, field, otherwise) {
    //  determine once whether or not to use the 'otherwise'
    var alt = typeof otherwise !== 'undefined';

    //  reduce the provided list to an array only containing the requested field
    return list.reduce(function(carry, item) {
        //  If item is an object and contains the field, add its value and the value of 'otherwise' if it was provided
        if (typeof item === 'object' && field in item) {
            carry.push(item[field]);
        }
        else if (alt) {
            carry.push(otherwise);
        }

        //  return the 'carry' (which is the list of matched field values)
        return carry;
    }, []);
}

jsbin示例

正如上面的示例（希望）揭示了这一工作方式，让我们通过使用Array.concat函数来稍微缩短该函数。

function getFields(list, field, otherwise) {
    var alt = typeof otherwise !== 'undefined';

    return list.reduce(function(carry, item) {
        return carry.concat(typeof item === 'object' && field in item ? item[field] : (alt ? otherwise : []));
    }, []);
}

jsbin示例

2016-11-19 10:02:14

最好使用一些库，如lodash或下划线，以确保跨浏览器。

在Lodash中，可以通过以下方法获取数组中属性的值