过滤后将数组合并为一个数组答案

【问题标题】：Merge arrays to one array after filtering过滤后将数组合并为一个数组
【发布时间】：2020-05-17 19:57:12
【问题描述】：

我有对象数组，我只取位置数组。我的目标是将这些位置数组合并到一个数组中，但是我没有这样做并得到空数组。我就是这样做的：

let results = [{
    id: '1',
    locations: ['aaaa', 'bbbbbb', 'cccccc']
  },
  {
    id: '2',
    locations: []
  },
  {
    id: '3',
    locations: ['ddd', 'aaadsad', 'sefd']
  },
  {
    id: '4',
    locations: ['ffff', 'eeee', 'sfdsfsd']
  },
];
const locationIds = [].concat.apply([], ...results.filter(s => s.locations && s.locations.length > 0).map(({
  locations
}) => ({
  locations
})));

console.log(locationIds);

我在这里做错了什么？结果应该是 ['aaaa', 'bbbbbb', 'cccccc', 'ddd', 'aaadsad', 'sefd', 'ffff', 'eeee', 'sfdsfsd'];

【问题讨论】：

标签： javascript arrays typescript

【解决方案1】：

这里不需要filter。只需通过传递 callback 提供的函数来使用 map 方法，该函数应用于数组中的每个项目。

let results = [{ id: '1', locations: ['aaaa', 'bbbbbb', 'cccccc'] }, { id: '2', locations: [] }, { id: '3', locations: ['ddd', 'aaadsad', 'sefd'] }, { id: '4', locations: ['ffff', 'eeee', 'sfdsfsd'] }, ];

const locationIds = [].concat(...results.map(s => s.locations));

console.log(locationIds);

【讨论】：

@user122222，不客气！您可以创建自己的 flatMap 实现，如下所示：stackoverflow.com/questions/39837678/…

【解决方案2】：

你可以试试flatMap():

flatMap() 方法首先使用映射函数映射每个元素，然后将结果展平为一个新数组。它与 map() 后跟 深度 1 的 flat() 相同，但 flatMap() 通常非常有用，因为将两者合并到一个方法中会稍微更有效。

let results = [{
    id: '1',
    locations: ['aaaa', 'bbbbbb', 'cccccc']
  },
  {
    id: '2',
    locations: []
  },
  {
    id: '3',
    locations: ['ddd', 'aaadsad', 'sefd']
  },
  {
    id: '4',
    locations: ['ffff', 'eeee', 'sfdsfsd']
  },
];
const locationIds = results.flatMap(i => i.locations);
console.log(locationIds);

【讨论】：

【解决方案3】：

您可以将Array#flatMap 与想要的财产联系起来。如果没有给出属性，则添加一个默认数组|| []。

let results = [{ id: '1', locations: ['aaaa', 'bbbbbb', 'cccccc'] }, { id: '2', locations: [] }, { id: '3', locations: ['ddd', 'aaadsad', 'sefd'] }, { id: '4', locations: ['ffff', 'eeee', 'sfdsfsd'] }],
    locationIds = results.flatMap(({ locations }) => locations);

console.log(locationIds);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

值得一提的是 .flatMap 在没有 polyfill 的情况下无法在 Edge 和 IE 中工作。

【解决方案4】：

也可以使用 Array.prototype 中的Reduce 函数求解。

var newResults = results.reduce(function(acc, curr) {
    return acc.concat(curr.locations)
  },[]
)

希望对你有帮助

【讨论】：

【解决方案5】：

我花了太长时间才没有发布我自己的解决方案 - 对我来说很有趣的谜题，尽管其他答案无疑更具性能和可读性。它使用与您的原始帖子相同的策略，这可能有助于指出哪里出了问题。

const locationIds = [].concat
                    .apply([], results.filter(result => 
                    result.locations && result.locations.length > 0)
                    .map(result => { return result.locations }));

【讨论】：