자바 스크립트의 배열을 간단한 객체로 변경하십시오.


17

다음과 같은 추가 객체가 포함 된 배열이있는 간단한 JSON이 있습니다.

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

그러나 내가 정말로 원하는 것은 다음과 같은 객체입니다.

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

그래서 배열을 배열이나 객체 내부의 간단한 키-값 쌍으로 줄이고 싶습니다 (키는 고유합니다). 이 멋진 배열 기능 중 일부를 사용하여 이것을 줄이는 방법을 아는 사람이 있습니까? 나는 단지 각각에 대한 것과 같은 것을 생각해 내고 속성에 대한 "손으로"속성 속성을 만들었지 만 'reduce', 스프레드 연산자 (...), map, every, 일부 등

나는 다음과 같이 시도했다.

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

그러나 그것은 단지 나에게 오류 메시지를 얻었다 TypeError: Invalid attempt to destructure non-iterable instance

편집 : 세 가지 답변 모두 완벽하게 작동합니다. 감사.



group무시해야한다?
Bergi

예, 그룹을 무시할 수 있습니다. 동료가 다른 화면에서 다른 키를 사용하여 동일한 키를 사용하는 것이 유일한 아이디어 였지만 실제로 사용할 수는 없습니다. 그러나 그것은 훨씬 나중에 또 다른 질문입니다 :)
Marcel Grüger

답변:


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
호기심과 마찬가지로. 얼마 전 나는 객체를 파괴하기 위해 스프레드 연산자의 성능을 테스트하고 있었고 때로는 코드의 가독성을 향상시키는 것이 사실 이더라도
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 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);

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.