З масиву об'єктів витягніть значення властивості як масив

У мене є масив об’єктів 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 result = objArray.map(a => a.foo);

АБО

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

Ви також можете перевірити Array.prototype.map().

Так, але він покладається на ES5-функцію JavaScript. Це означає, що він не працюватиме в IE8 або старіших версіях.

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

На перекладачах JS, сумісних з ES6, ви можете використовувати функцію стрілки для стислості:

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

Документація Array.prototype.map

Перевірте функцію Лодаша_.pluck() або функцію підкреслення_.pluck() . Обидва роблять саме те, що ви хочете в одному дзвінку функції!

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

Оновлення: _.pluck()було видалено з Lodash v4.0.0 , на користь _.map()у поєднанні з чимось подібним до відповіді Ніта . _.pluck()все ще доступний у підкресленні .

Оновлення 2: Як Марк зазначає у коментарях , десь між 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].

Якщо ви трохи більше в курсі функціонального програмування, погляньте на функцію RamdaR.pluck() , яка виглядатиме приблизно так:

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

Говорячи лише про рішення 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 розірвано, видалено.

Використання Array.prototype.map:

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

Перегляньте вище посилання для перегляду веб-переглядачів до ES5.

Краще використовувати таку бібліотеку, як lodash або підкреслення, для впевненості у переглядачі.

У Lodash ви можете отримати значення властивості в масиві наступним методом

_.map(objArray,"foo")

і в підкресленні

_.pluck(objArray,"foo")

Обидва повернуться

[1, 2, 3]

У ES6 ви можете:

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

Хоча 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трохи дешевше, ніж а 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;
    }, []);
}

Приклад 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

Загалом, якщо ви хочете екстраполювати значення об’єктів, які знаходяться всередині масиву (як, наприклад, описано в запитанні), ви можете використовувати знищення, відображення та знищення масиву.

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

Отриманий результат: ["слово", "знову", "деякі", "1", "2", "3"]

Це залежить від вашого визначення поняття "краще".

Інші відповіді вказують на використання карти, яка є природною (особливо для хлопців, яка звикла до функціонального стилю) та стислою. Я настійно рекомендую використовувати його (якщо ви не турбуєтесь з кількома хлопцями IE8-IT). Тож якщо "краще" означає "більш лаконічний", "ремонтопридатний", "зрозумілий", то так, це краще.

З іншого боку, ця краса не виходить без додаткових витрат. Я не великий шанувальник мікробенка, але я поставив тут невеликий тест . Результат передбачуваний, старий потворний спосіб здається швидшим, ніж функція карти. Тож якщо "краще" означає "швидше", то ні, залишайтеся зі старої шкільної моди.

Знову ж таки, це просто мікробійка і жодним чином не виступає проти використання map, це лише два мої центи :).

Якщо ви також хочете підтримувати масиви, схожі на об’єкти, використовуйте Array.from (ES2015):

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

Перевага, яку він має над методом Array.prototype.map () - вхід може також бути набором :

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

Якщо ви хочете кілька значень у 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}зліва використовується руйнування об'єктів, а праворуч стрілка еквівалентна {foo: foo, baz: baz}завдяки покращеним літературним об'єктам ES6 .

Карта функцій - хороший вибір при роботі з об’єктними масивами. Хоча вже було розміщено ряд хороших відповідей, може бути корисним приклад використання карти з комбінацією з фільтром.

Якщо ви хочете виключити властивості, значення яких не визначені, або виключити лише певне властивість, ви можете зробити наступне:

    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/

Наведена вище відповідь корисна для вилучення однієї властивості, що робити, якщо ви хочете витягти більше одного властивості з масиву об’єктів. Ось рішення !! У разі цього ми можемо просто використовувати _.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 з кожного об'єкта і зберігати їх в окремому масиві. Спочатку ми повторимо елементи масиву за допомогою карти, а потім застосуємо до нього метод Lodash Library Standard _.pick ().

Тепер ми можемо витягти властивість 'foo' та 'bar'.

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

і результат був би [{foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]

насолоджуйся !!!

Якщо ви вклали масиви, ви можете змусити його працювати так:

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)