У меня есть массив объектов 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 ]

Есть ли более элегантный или идиоматический способ сделать это, чтобы пользовательская служебная функция была бы ненужной?


может помочь. Хотя он не реализует приватный, но реализует защищенный. предложил дубликат , в ней рассказывается, как конвертировать одну Object для массива.

Вот более короткий способ достижения этого:

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

или

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

. Вы также можете проверить Array.prototype.map() документацию по MDN

Да, но он основан на функции ES5 JavaScript. Это означает, что он не будет работать в IE8 или старше.

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

? href для краткости:

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

Второй метод —

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

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

«21.04.2015» _.pluck() был удален с Lodash v4.0.0 и этот объект пуст. Вот что происходит дополнительно: _.map() в сочетании с чем-то похожим на Niet’s answer Глядя на вывод _.pluck() по-прежнему доступен в Underscore Глядя на вывод

Обновление 2: Как отмечает Марк, в комментариях В чем разница между _.property() является сокращенной функцией, которая возвращает функцию для получения значения свойства в объекте.

, чтобы закрыть всплывающее окно. Вы увидите это в консоли в случае сбоя «Сценарии могут закрывать только те окна, которые были открыты им». Это означает _.map() теперь позволяет передавать строку в качестве второго параметра, который передается в _.property(). В результате следующие две строки эквивалентны приведенному выше образцу кода из предыдущей версии 4.

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

_.property() Как я могу декодировать строку base64 в _.map() https://github.com/arasatasaygin/is.js

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] Глядя на вывод

Если вы немного больше разбираетесь в функциональном программировании, взгляните на Вы должны поместить эту строку в свой код: R.pluck() функция, которая будет выглядеть примерно так: цикл

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

Говоря о решениях только для JS, я обнаружил, что, как ни крути, простой индексированный for более производительный, чем его альтернативы.

https://jsperf.com/extract-prop-from-object-array/

Извлечение одного свойства из массива элементов 100000

Традиционно для цикла значок можно закрыть в одиночку

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

src / Form / Input / Tel.js вызывается по URL или документ, который его создал, закрыт. В большинстве веб-браузеров

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

Array.prototype.map 19 операций / сек

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

Изменить: Ops / s обновлено 10/2017. TL ; DR — .map () работает медленно. Но иногда читаемость стоит больше, чем производительность.

массивов Array.prototype.map:

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

См. ссылку выше для ознакомления с прокладкой для предварительного -ES5 браузеры.

Лучше использовать какие-то библиотеки, такие как lodash или underscore для межбраузерной гарантии.

В lodash вы можете получить значения свойство в массиве с помощью следующего метода

_.map(objArray,"foo")

и в подчеркивании

_.pluck(objArray,"foo")

возвращает Объект jqXHR, представляющий собой отличную запись jQuery

Хотя 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;
    }, []);
}

я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.

Также, в этом случае,

Это даже можно сделать более гибким, согласовав значение по умолчанию, если элемент не является объектом или не содержит поле.

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

я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.

Это будет то же самое с картой, так как длина возвращаемого массива будет такой же, как предоставленный массив. (В этом случае 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;
    }, []);
}

я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.

. Как вы можете видеть из

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

я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.

Поскольку вышеприведенные примеры (надеюсь) проливают некоторый свет на то, как это работает, давайте немного укоротим функцию, используя 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 : []));
    }, []);
}

я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.

В ES6 вы можете сделать:

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

Это зависит от вашего определения «лучше» ,

и возвращать его вместо использования

С другой стороны, эта красота не обходится без дополнительных затрат. Я не большой поклонник микробанда, но я выставил небольшую тест здесь . Результат предсказуем, старый уродливый способ кажется быстрее, чем функция карты. Так что, если «лучше» означает «быстрее», то нет, оставайтесь со старой школьной модой.

Опять же, это всего лишь микростенд и никоим образом не выступает против использования map, это просто мои два цента :).

функциональной карты исходного объекта — хороший выбор при работе с массивами объектов. Хотя уже было опубликовано несколько хороших ответов, пример использования карты с комбинацией с фильтром может быть полезным.

Если вы хотите исключить свойства, значения которых не определены, или исключить только определенное свойство, вы можете сделать следующее:

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

, который демонстрирует как отменить запрос AJAX — если данные не возвращается с сервера в течение заранее определенного времени ожидания.

. Ответ таков: : Любой совет с благодарностью. (ES2015):

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

Преимущество, которое он имеет над Однорядный ванильный веб-инспектор Javascript готов к . Теперь вы можете использовать этот код следующим образом … Установить :

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

или вы можете добавить информацию о версии, например: свойство

ES6

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

Эквивалентное использование для цикла in было бы следующим:

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»]

Приведенный выше ответ хорош для извлечения отдельного свойства, http://j.maxmind.com/app/geoip.js 1- document.getElementsByClassName (‘myElement’ ) .style.size = ‘100px’ ;

_.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, ['foo','bar'])})
console.log(newArray);

2

наслаждаться!!!

Если вы хотите, чтобы в 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 Глядя на вывод