将javascript中的数组更改为更简单的对象


17

我有一个简单的JSON,数组中包含其他对象等,如下所示:

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

但是我真正想要的是这样的对象:

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

因此,我想将数组简化为数组甚至对象内部的简单键值对(键是唯一的)。有谁知道如何通过一些很棒的数组函数来减少这种情况?我只为每个对象想出了一个类似的东西,并为属性建立了“手工”对象的属性,但我记得数组中有一些很棒的东西,例如“ reduce”,散布运算符(...),map,一些,等等

我尝试了类似的东西:

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

但这只会给我一条错误消息 TypeError: Invalid attempt to destructure non-iterable instance

编辑:所有三个答案都工作正常。谢谢。



group应被忽略?
Bergi

是的,可以忽略该组,这只是我的同事的想法,即在具有不同翻译版本的不同屏幕中使用相同的键,但是我找不到真正的用途。但这是以后要问的另一个问题:)
MarcelGrüger19年

Answers:


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

编辑:Donny Verduijn的好建议。您可以使用es6解构来缩短函数编写时间。

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

3
如果您想使用ES6语法,还可以通过这种方式实现reduce函数(acc, { key, value }) => ({ ...acc, [key]: value })
Donny Verduijn

1
此外,您可以使用逗号运算符来避免返回:const newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});
ElChiniNet,

4
出于好奇。前一段时间,我测试了散布运算符对对象进行解构的性能,即使确实确实有时可以提高代码的可读性,它也付出了高昂的代价:measurethat.net/Benchmarks/Show/6194/5/ …
ElChiniNet

@ElChiniNet您链接的测试用例是关于数组扩展,而不是对象扩展。(但是,是的,重复扩散到一个新对象中比变异一个对象要慢得多)
Bergi

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 MapObject.fromEntries其转换mapObject

有关地图的更多信息

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.