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

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


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


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

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

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

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

Array.prototype.map文档


使用Array.prototype.map:

function getFields(input, field) {
    return input.map(function(o) {
        return o[field];
    });
}

有关ES5之前版本浏览器的垫片,请参阅上面的链接。


这取决于你对“更好”的定义。

其他答案指出了地图的使用,这是自然的(尤其是对于习惯于功能风格的人),而且简洁。我强烈建议您使用它(如果您不介意使用少数IE8-it人员)。所以,如果“更好”意味着“更简洁”、“可维护”和“可理解”,那么是的,它会更好。

另一方面,这种美丽不是没有额外成本的。我不太喜欢微面包,但我在这里做了一个小测试。结果是可以预测的,旧的丑陋的方式似乎比地图功能更快。所以,如果“更好”意味着“更快”,那么就不要,继续沿用老式的时尚。

同样,这只是一个微框架,绝不反对使用地图,这只是我的两分钱:)。


查看Lodash的_.pulling()函数或Undercore的_.plus()函数。两者都可以在一个函数调用中实现您想要的功能!

var result = _.pluck(objArray, 'foo');

更新:从Lodash v4.0.0起,_.pulling()已被删除,支持_.map(),并与Niet的答案类似。pickle()在Undercore中仍然可用。

更新2:正如Mark在评论中指出的,在Lodash v4和4.3之间的某个地方,添加了一个新功能,再次提供了该功能。property()是一个速记函数,它返回用于获取对象中属性值的函数。

此外,_.map()现在允许将字符串作为第二个参数传入,并将其传入_.property()。因此,以下两行相当于前面Lodash 4中的代码示例。

var result = _.map(objArray, 'foo');
var result = _.map(objArray, _.property('foo'));

_.property()和_.map()也允许您提供点分隔的字符串或数组,以便访问子属性:

var objArray = [
    {
        someProperty: { aNumber: 5 }
    },
    {
        someProperty: { aNumber: 2 }
    },
    {
        someProperty: { aNumber: 9 }
    }
];
var result = _.map(objArray, _.property('someProperty.aNumber'));
var result = _.map(objArray, _.property(['someProperty', 'aNumber']));

上述示例中的两个_.map()调用都将返回[5,2,9]。

如果您对函数式编程有更多了解,请查看Ramda的R.pulp()函数,它看起来像这样:

var result = R.pluck('foo')(objArray);  // or just R.pluck('foo', objArray)

在处理对象数组时,函数映射是一个很好的选择。尽管已经发布了许多好的答案,但结合使用地图和过滤器的示例可能会有所帮助。

如果要排除值未定义的财产或只排除特定属性,可以执行以下操作:

    var obj = {value1: "val1", value2: "val2", Ndb_No: "testing", myVal: undefined};
    var keysFiltered = Object.keys(obj).filter(function(item){return !(item == "Ndb_No" || obj[item] == undefined)});
    var valuesFiltered = keysFiltered.map(function(item) {return obj[item]});

https://jsfiddle.net/ohea7mgk/


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

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

_.map(objArray,"foo")

和在Undercore

_.pluck(objArray,"foo")

两者都会回归

[1, 2, 3]

虽然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示例


谈到纯JS的解决方案,我发现,尽管它可能很不优雅,但简单的索引for循环比它的替代方案更具性能。

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

传统循环368操作/秒

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

ES6用于。。循环303操作/秒

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

Array.prototype.map 19操作/秒

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

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

编辑#2:6/2019-jsPerf链接断开,已删除。


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

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

OR

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

您还可以检查Array.prototype.map()。


如果还希望支持类似数组的对象,请使用array.from(ES2015):

Array.from(arrayLike, x => x.foo);

与Array.prototype.map()方法相比,它的优点是输入也可以是Set:

let arrayLike = new Set([{foo: 1}, {foo: 2}, {foo: 3}]);

在ES6中,您可以执行以下操作:

const objArray = [{foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]
objArray.map(({ foo }) => foo)

通常,如果您想要外推数组内的对象值(如问题中所述),那么可以使用reduce、map和数组析构函数。

ES6

let a = [{ z: 'word', c: 'again', d: 'some' }, { u: '1', r: '2', i: '3' }];
let b = a.reduce((acc, obj) => [...acc, Object.values(obj).map(y => y)], []);

console.log(b)

循环中使用的等效值为:

for (let i in a) {
  let temp = [];
  for (let j in a[i]) {
    temp.push(a[i][j]);
  }
  array.push(temp);
}

生成的输出:[“word”、“again”、“some”、“1”、“2”、“3”]


上面提供的答案适合于提取单个属性,如果您想从对象数组中提取多个属性,该怎么办。这就是解决方案!!在这种情况下,我们可以简单地使用_.pick(object,[paths])

_.pick(object, [paths])

假设objArray具有如下三个财产的对象

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

现在我们要从每个对象中提取foo和bar属性,并将它们存储在一个单独的数组中。首先,我们将使用map迭代数组元素,然后对其应用Lodash Library Standard_.pick()方法。

现在我们可以提取“foo”和“bar”属性。

var newArray=objArray.map((element)=>{return _.pick(element,['fo','bar'])})console.log(newArray);

结果是〔{foo:1,bar:2},{foo:3,bar:4},{foo:5,bar:6}〕

享受


如果您希望ES6+中有多个值,以下操作将起作用

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

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

这是因为左边的{foo,baz}使用对象析构函数,而右边的箭头由于ES6的增强的对象文本而相当于{foo:foo,baz:baz}。


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

常量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(结果)


从对象数组中轻松提取多个财产:

let arrayOfObjects = [
  {id:1, name:'one', desc:'something'},
  {id:2, name:'two', desc:'something else'}
];

//below will extract just the id and name
let result = arrayOfObjects.map(({id, name}) => ({id, name}));

结果将是〔{id:1,名称:'one'},{id:2,名称:'two'}〕

根据需要在map函数中添加或删除财产


从对象数组收集不同字段的示例

let inputArray=[{id:1,名称:“name1”,值:“value1”},{id:2,名称:“name2”,值:“value2”},];let ids=inputArray.map((item)=>item.id);let names=inputArray.map((item)=>item.name);let values=inputArray.map((item)=>item.value);console.log(id);console.log(名称);console.log(值);

结果:

[ 1, 2 ]
[ 'name1', 'name2' ]
[ 'value1', 'value2' ]

在ES6中,如果希望以字符串形式动态传递字段:

function getFields(array, field) {
    return array.map(a => a[field]);
}

let result = getFields(array, 'foo');

上述答案适用于单个属性,但当从数组中选择多个财产时,请使用以下选项

var arrayObj=[{Name,'A',Age:20,Email:'a.gmail.com'},{Name,'B',Age:30,Email:'b.gmail.com'},{Name,'C',Age:40,Email:'c.gmail.com'}]

现在我只选择两个字段

 var outPutArray=arrayObj.map(( {Name,Email} ) =>  ({Name,Email}) )
 console.log(outPutArray)

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

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

下面是对对象数组使用map方法获取特定属性的另一种形式:

const objArray=[{foo:1,bar:2},{foo:3,bar:4},{foo:5,bar:6}];const getProp=prop=>obj=>obj[prop];const getFoo=getProp('o');const fooes=objArray.map(getFoo);console.log(fooes);


从对象数组中解构并获取特定属性:

const customerList = dealerUserData?.partyDetails.map(
  ({ partyId, custAccountId }) => ({
    partyId,
    custAccountId,
    customerId: dealerUserData?._id,
    userId: dealerUserData?.authUserID,
  }),
);

如果你甚至不知道你正在玩的对象的确切属性,我只会改进其中一个答案:

let result = objArray.map(a => a[Object.getOwnPropertyNames(a)]);

从对象数组中,使用for循环将属性的值提取为数组。

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

//Code
let output=[];
for(let item of objArray){
    output.push(item.foo); 
}

// Output
[ 1, 3, 5 ]