Змініть масив у javascript на більш простий об’єкт


17

У мене є простий JSON з масивом, який містить подальші об'єкти тощо тощо:

languagePack:
[
  {
    'key': 'Username',
    'value': 'Benutzername',
    'group': 'default'
  },
  {
    'key': 'Password',
    'value': 'Passwort',
    'group': 'default'
  }
]

Але я дуже хочу такий предмет:

languagePack: 
{
    'Username': 'Benutzername',
    'Password': 'Passwort'
}

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

Я спробував це з чимось на кшталт:

var temp = this.languagePack.map(([key, value]) => ({key,value}))
console.log(temp)

Але це отримало мені лише повідомлення про помилку TypeError: Invalid attempt to destructure non-iterable instance

Редагувати: Усі три відповіді працюють прекрасно. Дякую.



Ці groupповинні ігноруватися?
Берги

Так, групу можна ігнорувати, це була лише ідея мого колеги використовувати один і той же ключ на різних екранах з різними перекладами, але я не можу знайти для цього реального використання. Але це інше питання на набагато пізніше :)
Марсель Грюгер

Відповіді:


11

В основному вам потрібно використовувати forEachзамість mapфункції, а потім ви можете побудувати цей об'єкт до будь-якого ключа, пари цінності, яку ви хочете зберегти.

Спробуйте це, це вирішить вашу проблему.

var temp = {};

this.languagePack.forEach(({key,value}) => {
    temp[key] = value
})

console.log(temp)

Примітка. Тут ми не використовуємо, mapтому що ми хочемо повернути об’єкт не масиву, тому ми можемо використовувати reduceтут функцію, але я подумав, що це буде просто і легко зрозуміти, що ми хочемо і що ми тут робимо.


10

Ви можете використовувати функцію javascript, reduceщоб створити порожній об’єкт і помістити в нього кожну клавішу та значення.

const data = [
  {
    'key': 'Username',
    'value': 'Benutzername',
    'group': 'default'
  },
  {
    'key': 'Password',
    'value': 'Passwort',
    'group': 'default'
  }
];

const newData = data.reduce((acc, row) => {
  acc[row.key] = row.value;
  return acc;
}, {});

console.log(newData);

Редагувати: Приємна пропозиція про Донні Вердюйна . Ви можете використовувати деструктурування es6, щоб коротше записати функцію.

const newData = data.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {});

3
Якщо ви любите використовувати синтаксис ES6, ви також можете реалізувати функцію зменшення таким чином(acc, { key, value }) => ({ ...acc, [key]: value })
Donny

1
Також ви можете скористатися оператором коми, щоб уникнути повернення:const newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});
ElChiniNet

4
Так само як цікавість. Деякий час тому я тестував працездатність оператора розповсюдження для руйнування об'єктів, і навіть якщо це правда, що іноді це покращує читабельність коду, він має високу вартість: ukrethat.net/Benchmarks/Show/6194/5/ …
ElChiniNet

@ElChiniNet Тестовий випадок, який ви пов’язали, стосується поширення масиву, а не розповсюдження об'єкта. (Але так, неодноразово поширення в новий об'єкт набагато повільніше , ніж мутує один об'єкт)
Берги

1
@Bergi, тут у вас є порівняння цього конкретного коду: measurethat.net/Benchmarks/Show/6318/0 / ...
ElChiniNet

6

використовувати з Array#mapйого створенням ключ і значення як об'єкт і Object.assignприховати значення масиву для об'єкта

const languagePack = [ { 'key': 'Username', 'value': 'Benutzername', 'group': 'default' }, { 'key': 'Password', 'value': 'Passwort', 'group': 'default' } ];

var res = Object.assign({},...languagePack.map(({key,value}) => ({[key]:value})))

console.log(res)


2

Ви можете використовувати ES6 Mapдля цього використання Object.fromEntriesдля перетворення mapназад у Object.

Для отримання додаткової інформації про карту

let languagePack=
[{
  'key': 'Username',
  'value': 'Benutzername',
  'group': 'default'
},
{
  'key': 'Password',
  'value': 'Passwort',
  'group': 'default'
}];

let map = new Map();

languagePack.forEach((val)=>{
  map.set(val.key, val.value);
})
languagePack = Object.fromEntries(map);
console.log(languagePack);

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