如何 return 一个新的对象数组从对象嵌套道具中减少 JavaScript

Question

我正在尝试从另一个 object 的嵌套属性中 return objects 的新 array。这是我目前的 object:

const teams = {
  GRYFFINDOR: {
    display: 'Gryffindor',
    channel: ['#team-gryffindor'],
    ui: 'lion',
  },
  HUFFLEPLUFF: {
    display: 'Hufflepuff',
    channel: ['#team-hufflepuff'],
    ui: '', // empty string on purpose
  },
  SLYTHERIN: {
    display: 'Slytherin',
    channel: ['#team-slytherin'],
    ui: 'snake',
  },
}

现在，我正在尝试 return 一个 objects 的 array，像这样：

[
  { value: 'lion' },
  { value: '' },
  { value: 'snake' },
]

这是我试过的：

const teamsUI = [Object.keys(teams).reduce((carry, item) => {
  return {...carry, ...{ ['value']: teams[item].ui  }}
}, {})];;

但是，我明白了：

console.log(teamsUI); // returns [ { value: 'snake' }]

我做错了什么？

Answer 1

除了嵌套的结果结构，您还可以获取值并解构所需的属性格式映射。

const
    teams = { GRYFFINDOR: { display: 'Gryffindor', channel: ['#team-gryffindor'], ui: 'lion' }, HUFFLEPLUFF: { display: 'Hufflepuff', channel: ['#team-hufflepuff'], ui: '' }, SLYTHERIN: { display: 'Slytherin', channel: ['#team-slytherin'], ui: 'snake' } },
    result = Object.values(teams).map(({ ui: value }) => ({ value }));
    
console.log(result);

Answer 2

你可以这样做：

const teams = {
  GRYFFINDOR: {
    display: 'Gryffindor',
    channel: ['#team-gryffindor'],
    ui: 'lion',
  },
  HUFFLEPLUFF: {
    display: 'Hufflepuff',
    channel: ['#team-hufflepuff'],
    ui: '', // empty string on purpose
  },
  SLYTHERIN: {
    display: 'Slytherin',
    channel: ['#team-slytherin'],
    ui: 'snake',
  },
}

const result = Object.values(teams).map(({ ui }) => ({ value: ui }));

console.log(result);

Answer 3

这是实现你想要的最短路径

Object.keys(teams).map(t=>({value: teams[t].ui}))

现在你做错了什么？

看看这部分

Object.keys(teams).reduce((carry, item) => {
  return {...carry, ...{ ['value']: teams[item].ui  }}
}, {});

您正在使用名为 value 的相同键将对象缩减为单个值。这意味着 reduce 函数中当前对象的 teams[item].ui 值将覆盖前一个对象，因此您最终将得到该 reduce 函数的最后一个对象。您最终将最后一个对象包装在一个数组中，该数组为您提供了您所拥有的。

一个更好的实现方式是做这样的事情

Object.keys(teams).reduce((carry, item, index)=>{
  carry[index] = { value: teams[item].ui };
  return carry;
}, []);

如何 return 一个新的对象数组从对象嵌套道具中减少 JavaScript

How to return a new array of object from object nested props with reduce in JavaScript

javascript

arrays

reduce

object