如何用单行代码过滤和修改对象数组？

Question

我的数据库中包含以下对象数组：

dataFromDB = [
  { src: 'stringWithSource1',
    selected: true
  },
  { src: 'stringWithSource2',
    selected: false
  },
  { src: 'stringWithSource3',
    selected: true
  },
  AND SO ON...
];

当我从数据库中获取它，我需要在客户端侧商店state即必须是一个字符串数组，包含仅src属于对象的属性selected: true。

例：

myState = [
  'stringWithSource1',
  'stringWithSource3',
  AND SO ON...
]

题

我为其分配代码的行如下所示（请参见下面的代码）：

我试过了，但是那行不通，因为我保留未选择的内容src，null而不是跳过它们。

setProductDetails({
  // ... other properties,
  images: dataFromDB.images.map((item) => {
    return item.selected ? item.src : null;
  }
});

如何在这样的一行中实现此行为？我知道我可以创建一个辅助变量并进行处理。但在这种情况下，我想要单线。这可能吗？感觉我应该同时过滤和映射？

Answer 1

您需要两部分，因为过滤不会映射值，而是原始项目。

您可以过滤依据selected，然后映射src。

images: dataFromDB.images
    .filter(({ selected }) => selected)
    .map(({ src }) => src)