Як перетворити масив Об’єктів в один Об’єкт у JavaScript?


102

У мене є масив об’єктів:

[ 
  { key : '11', value : '1100', $$hashKey : '00X' },
  { key : '22', value : '2200', $$hashKey : '018' }
];

Як перетворити його на наступне за допомогою JavaScript?

{
  "11": "1000",
  "22": "2200"
}

4
[{key:"11", value:"1100"}, {key:"22", value:"2200"}].reduce(function(m,v){m[v.key] = v.value; return m;}, {})
— Девід

Відповіді:


52

Ви, мабуть, шукаєте щось подібне:

// original
var arr = [ 
  {key : '11', value : '1100', $$hashKey : '00X' },
  {key : '22', value : '2200', $$hashKey : '018' }
];

//convert
var result = {};
for (var i = 0; i < arr.length; i++) {
  result[arr[i].key] = arr[i].value;
}

console.log(result);


2
Перевірте відповідь FirstOne на сучасний підхід.
— Тібос

134

Крихітне рішення ES6 може виглядати так:

var arr = [{key:"11", value:"1100"},{key:"22", value:"2200"}];
var object = arr.reduce(
  (obj, item) => Object.assign(obj, { [item.key]: item.value }), {});

console.log(object)

Крім того, якщо ви використовуєте розкидання об'єктів, це може виглядати так:

var object = arr.reduce((obj, item) => ({...obj, [item.key]: item.value}) ,{});

Ще одне рішення на 99% швидше (тестоване на jsperf):

var object = arr.reduce((obj, item) => (obj[item.key] = item.value, obj) ,{});

Тут нам корисний оператор кома, він обчислює всі вирази перед комою і повертає останній (після останньої коми). Тому ми не копіюємо objкожного разу, а присвоюємо йому нове властивість.


2
Полюбив той! var object = arr.reduce((obj, item) => (obj[item.key] = item.value, obj) ,{});
— Сохайл

це один рядок швидший або звичайний цикл?
— Jeb50,

2
@ Jeb50, звичайний цикл є найшвидшим, але не набагато більшим, ніж оператор-кома. Оператор Object.assign / spread - на порядок повільніший: jsperf.com/comma-operator-js
— Джош Геллер

1
Ви забули поширити другий предмет({...obj, ...{[item.key]: item.value}}) ,{});
— Джулія

Дякую, загортання цього в об’єкт насправді не потрібно. Я це виправив.
— Шевченко Віктор

59

Мені подобається функціональний підхід для досягнення цього завдання:

var arr = [{ key:"11", value:"1100" }, { key:"22", value:"2200" }];
var result = arr.reduce(function(obj,item){
  obj[item.key] = item.value; 
  return obj;
}, {});

Примітка: Last {}- це початкове objзначення функції зменшення, якщо ви не надасте початкове значення, arrбуде використаний перший елемент (що, мабуть, небажано).

https://jsfiddle.net/GreQ/2xa078da/


2
а якщо ключ динамічний?
— Стефано Саїтта

1
Ну, ви повинні знати, яку властивість даного предмета / об'єкта слід використовувати як ключ, а яку як значення ні? Але якщо ми припустимо, що wfirst prop завжди є ключем, а друге значенням, ми могли б використовувати функцію зворотного виклику, як це: function (obj, item) {var keys = item.keys (); obj [item [keys [0]]] = елемент [ключі [0]]; return obj; }
— GreQ

Виправлення зворотного виклику вище: код var obj = arr.reduce (функція (obj, item) {var keys = Object.keys (item); obj [item [keys [0]]] = item [keys [1]]; return obj;}, {});
— GreQ

58

Намагаючись виправити цю відповідь у розділі Як перетворити масив Об’єктів на один об’єкт у JavaScript? ,

це має зробити це:

var array = [
    {key:'k1',value:'v1'},
    {key:'k2',value:'v2'},
    {key:'k3',value:'v3'}
];
var mapped = array .map(item => ({ [item.key]: item.value }) );
var newObj = Object.assign({}, ...mapped );
console.log(newObj );


Однокласний:

var newObj = Object.assign({}, ...(array.map(item => ({ [item.key]: item.value }) )));


11

Чистий спосіб зробити це за допомогою сучасного JavaScript такий:

const array = [
  { name: "something", value: "something" },
  { name: "somethingElse", value: "something else" },
];

const newObject = Object.assign({}, ...array.map(item => ({ [item.name]: item.value })));

// >> { something: "something", somethingElse: "something else" }


5

На основі відповідей, запропонованих багатьма авторами, я створив тестовий сценарій JsPref. https://jsperf.com/array2object82364

Нижче наведені скріншоти продуктивності. Мені трохи шокуюче бачити, результат chrome на відміну від firefox та edge, навіть після запуску кілька разів.

Край

Firefox

Chrome


2

Використання Underscore.js :

var myArray = [
  Object { key="11", value="1100", $$hashKey="00X"},
  Object { key="22", value="2200", $$hashKey="018"}
];
var myObj = _.object(_.pluck(myArray, 'key'), _.pluck(myArray, 'value'));

2

Оновлення: Світ продовжував обертатися. Замість цього використовуйте функціональний підхід.

Ось:

var arr = [{ key: "11", value: "1100" }, { key: "22", value: "2200" }];
var result = {};
for (var i=0, len=arr.length; i < len; i++) {
    result[arr[i].key] = arr[i].value;
}
console.log(result); // {11: "1000", 22: "2200"}

Це напрочуд нагадує відповідь, яку хтось опублікував, як 5 хвилин тому
— Олександр

1
Бо так ви вирішуєте цю проблему. Про іменування, наприклад: arrayце зарезервоване ключове слово, яке люди використовують arrзамість цього. та ін.
— pstadler

0

Ось як динамічно прийняти вищезазначене як рядок та інтерполювати його в об’єкт:

var stringObject = '[Object { key="11", value="1100", $$hashKey="00X"}, Object { key="22", value="2200", $$hashKey="018"}]';

function interpolateStringObject(stringObject) {
  var jsObj = {};
  var processedObj = stringObject.split("[Object { ");
  processedObj = processedObj[1].split("},");
  $.each(processedObj, function (i, v) {
      jsObj[v.split("key=")[1].split(",")[0]] = v.split("value=")[1].split(",")[0].replace(/\"/g,'');
  });

  return jsObj
}

var t = interpolateStringObject(stringObject); //t is the object you want

http://jsfiddle.net/3QKmX/1/


0

// original
var arr = [{
    key: '11',
    value: '1100',
    $$hashKey: '00X'
  },
  {
    key: '22',
    value: '2200',
    $$hashKey: '018'
  }
];

// My solution
var obj = {};
for (let i = 0; i < arr.length; i++) {
  obj[arr[i].key] = arr[i].value;
}
console.log(obj)


Хоча це може відповісти на питання, краще додати якийсь опис того, як ця відповідь може допомогти вирішити проблему. Будь ласка, прочитайте Як мені написати хорошу відповідь, щоб дізнатись більше.
— Рошана Пітігала

0

Для цього можна використовувати функцію mapKeys lodash. Лише один рядок коду!

Зверніться до цього повного зразка коду (скопіюйте цей файл у repl.it або подібний):

import _ from 'lodash';
// or commonjs:
// const _ = require('lodash');

let a = [{ id: 23, title: 'meat' }, { id: 45, title: 'fish' }, { id: 71, title: 'fruit' }]
let b = _.mapKeys(a, 'id');
console.log(b);
// b:
// { '23': { id: 23, title: 'meat' },
//   '45': { id: 45, title: 'fish' },
//   '71': { id: 71, title: 'fruit' } }

-2
        var obj = [
            {id: 1 , name : 'gaju' , class : 'kv'},
            {id: 2 , name : 'tushar' , class : 'Super'}
        ];

        function conv(obj,arg){
        var temp= {};
        var output= {}
        for(key in obj){
        temp[key] = obj[key];
        };

        var i=0;
        for(key in temp){
        var aa = {};
        var value = temp[key][arg];
        aa[value] = temp[i];
        //console.log(aa[value][arg] );
        output[aa[value][arg]]=  aa[value];
        i++;
        }

       console.log(output); 
        }

calling function 

    conv(obj,'class');
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.