De una matriz de objetos, extraer el valor de una propiedad como matriz

Tengo una matriz de objetos JavaScript con la siguiente estructura:

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

Quiero extraer un campo de cada objeto y obtener una matriz que contenga los valores, por ejemplo, el campo foodaría una matriz [ 1, 3, 5 ].

Puedo hacer esto con este enfoque trivial:

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 ]

¿Existe una forma más elegante o idiomática de hacer esto, de modo que una función de utilidad personalizada sea innecesaria?

Nota sobre el duplicado sugerido , cubre cómo convertir un solo objeto en una matriz.

Aquí hay una forma más corta de lograrlo:

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

O

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

También puedes consultar Array.prototype.map().

Sí, pero se basa en una función ES5 de JavaScript. Esto significa que no funcionará en IE8 o versiones anteriores.

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

En los intérpretes JS compatibles con ES6, puede usar una función de flecha por brevedad:

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

Array.prototype.map documentation

Salida de Lodash_.pluck() función o de subrayado_.pluck() función. ¡Ambos hacen exactamente lo que quieres en una sola llamada de función!

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

Actualización: _.pluck()se ha eliminado a partir de Lodash v4.0.0 , a favor de _.map()en combinación con algo similar a la respuesta de Niet . _.pluck()todavía está disponible en Underscore .

Actualización 2: Como Mark señala en los comentarios , en algún lugar entre Lodash v4 y 4.3, se ha agregado una nueva función que brinda esta funcionalidad nuevamente. _.property()es una función abreviada que devuelve una función para obtener el valor de una propiedad en un objeto.

Además, _.map()ahora permite pasar una cadena como el segundo parámetro, que se pasa a _.property(). Como resultado, las dos líneas siguientes son equivalentes al ejemplo de código anterior de pre-Lodash 4.

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

_.property()y, por lo tanto _.map(), también le permiten proporcionar una cadena o matriz separada por puntos para acceder a las subpropiedades:

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']));

Ambas _.map()llamadas en el ejemplo anterior volverán [5, 2, 9].

Si le gusta un poco más la programación funcional, eche un vistazo a la R.pluck() función de Ramda , que se vería así:

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

Hablando de las soluciones solo para JS, descubrí que, por poco elegante que sea, un forbucle indexado simple es más eficaz que sus alternativas.

Extracción de una propiedad individual de una matriz de 100000 elementos (a través de jsPerf)

Tradicional para loop 368 Ops / sec

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

ES6 para ... de bucle 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 () es lento, pero siéntase libre de usarlo si cree que la legibilidad vale más que el rendimiento.

Edición n. ° 2: 6/2019: enlace jsPerf roto, eliminado.

Es mejor usar algún tipo de bibliotecas como lodash o guión bajo para asegurar el navegador cruzado.

En Lodash puede obtener valores de una propiedad en una matriz siguiendo el método

_.map(objArray,"foo")

y en subrayado

_.pluck(objArray,"foo")

Ambos volverán

[1, 2, 3]

Utilizando Array.prototype.map:

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

Vea el enlace de arriba para ver una cuña para los navegadores anteriores a ES5.

En ES6, puedes hacer:

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

Si bien mapes una solución adecuada para seleccionar 'columnas' de una lista de objetos, tiene un inconveniente. Si no se verifica explícitamente si las columnas existen o no, arrojará un error y (en el mejor de los casos) le proporcionará undefined. Optaría por una reducesolución, que simplemente puede ignorar la propiedad o incluso configurarlo con un valor predeterminado.

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;
    }, []);
}

ejemplo de jsbin

Esto funcionaría incluso si uno de los elementos de la lista proporcionada no es un objeto o no contiene el campo.

Incluso puede hacerse más flexible negociando un valor predeterminado si un elemento no es un objeto o no contiene el campo.

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;
    }, []);
}

ejemplo de jsbin

Esto sería lo mismo con el mapa, ya que la longitud de la matriz devuelta sería la misma que la matriz proporcionada. (En cuyo caso a mapes un poco más barato que a reduce):

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;
    }, []);
}

ejemplo de jsbin

Y luego está la solución más flexible, una que le permite cambiar entre ambos comportamientos simplemente proporcionando un valor alternativo.

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;
    }, []);
}

ejemplo de jsbin

Como los ejemplos anteriores (con suerte) arrojan algo de luz sobre cómo funciona esto, acortemos un poco la Array.concatfunción utilizando la función.

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 : []));
    }, []);
}

ejemplo de jsbin

En general, si desea extrapolar los valores de los objetos que están dentro de una matriz (como se describe en la pregunta), puede utilizar la reducción, el mapeo y la desestructuración de la matriz.

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)

El equivalente para for in loop sería:

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

Salida producida: ["palabra", "otra vez", "algo", "1", "2", "3"]

Depende de su definición de "mejor".

Las otras respuestas señalan el uso del mapa, que es natural (especialmente para los hombres acostumbrados al estilo funcional) y conciso. Recomiendo encarecidamente usarlo (si no te molestas con los pocos chicos de IE8-IT). Entonces, si "mejor" significa "más conciso", "mantenible", "comprensible", entonces sí, es mucho mejor.

Por otro lado, esta belleza no viene sin costos adicionales. No soy un gran admirador del microbench, pero he realizado una pequeña prueba aquí . El resultado es predecible, la antigua forma fea parece ser más rápida que la función de mapa. Entonces, si "mejor" significa "más rápido", entonces no, quédese con la moda de la vieja escuela.

Nuevamente, esto es solo un microbench y de ninguna manera aboga contra el uso de map, solo son mis dos centavos :)

Si también desea admitir objetos tipo matriz, use Array.from (ES2015):

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

La ventaja que tiene sobre el método Array.prototype.map () es que la entrada también puede ser un conjunto :

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

Si desea valores múltiples en ES6 +, lo siguiente funcionará

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 }))

Esto funciona {foo, baz}de la izquierda está utilizando destructoring objeto y en el lado derecho de la flecha es equivalente a {foo: foo, baz: baz}Debido a objetos literales mejoradas de ES6 .

El mapa de funciones es una buena opción cuando se trata de matrices de objetos. Aunque ya se han publicado una serie de buenas respuestas, el ejemplo del uso del mapa con combinación con filtro podría ser útil.

En caso de que desee excluir las propiedades cuyos valores no están definidos o excluir solo una propiedad específica, puede hacer lo siguiente:

    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/

La respuesta proporcionada anteriormente es buena para extraer una sola propiedad, y si desea extraer más de una propiedad de una matriz de objetos. ¡Aquí está la solución! En ese caso, simplemente podemos usar _.pick (objeto, [rutas])

_.pick(object, [paths])

Supongamos que objArray tiene objetos con tres propiedades como a continuación

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

Ahora queremos extraer la propiedad foo y bar de cada objeto y almacenarlos en una matriz separada. Primero iteraremos los elementos de la matriz utilizando el mapa y luego aplicaremos el método Lodash Library Standard _.pick ().

Ahora podemos extraer la propiedad 'foo' y 'bar'.

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

y el resultado sería [{foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]

¡¡¡disfrutar!!!

Si tiene matrices anidadas, puede hacer que funcione así:

const objArray = [ 
     { id: 1, items: { foo:4, bar: 2}},
     { id: 2, items: { foo:3, bar: 2}},
     { id: 3, items: { foo:1, bar: 2}} 
    ];

    let result = objArray.map(({id, items: {foo}}) => ({id, foo}))
    
    console.log(result)