Як перетворити масив Об’єктів в один Об’єкт у 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.