如何筛选嵌套数组并映射为指定结构的新数据模型？

我有一个包含数组的对象currentElement，希望根据type筛选数组内的对象，已通过.filter实现筛选。接下来需要将符合条件对象的subItems数组提取出来，整理为与currentElement结构一致的新对象newElement。

原数据 #

const currentElement = {
  items: [
   {
    "name": 'item',
    "subItems": [
     {
      "name": 'item 1',
      "type": 'item'
     },
     {
      "name": 'item 2',
      "type": 'item'
     }
    ],
    "type": 'subItems'
   },
   {
    "name": 'item',
    "type": 'item'
   }
  ]
}

目标数据 #

const newElement= {
      items: [
         {
          "name": 'item 1',
          "type": 'item'
         },
         {
          "name": 'item 2',
          "type": 'item'
         }
      ]
    }

尝试的代码 #

returnItems() {
    const items= this.currentElement.items.filter(item => item.type === 'subItems')
.map(({subItems}) => subItems);
    
    return items;
 }

这段代码返回了嵌套数组，无法得到预期的newElement结构，该如何解决？

解决方案 #

你之前的代码返回嵌套数组，是因为filter筛选出符合条件的对象后，map会把每个对象的subItems数组单独返回，最终得到的是数组的数组（比如[[item1, item2]]），而不是平级的item列表。同时你也没把结果包装成和原结构一致的{ items: [...] }对象。

这里提供两种简单的解决方法：

方法1：使用flatMap一步完成筛选+提取+扁平化 #

flatMap可以先对每个元素执行map操作，再自动将结果扁平化一层，非常适合这种场景：

returnItems() {
  // 遍历每个item，符合条件就返回subItems，否则返回空数组，最后自动扁平化
  const items = this.currentElement.items.flatMap(item => 
    item.type === 'subItems' ? item.subItems : []
  );
  // 包装成目标结构的对象
  return { items };
}

方法2：兼容旧环境的filter+map+flat #

如果你的运行环境不支持flatMap，可以用filter+map后再调用flat()扁平化数组：

returnItems() {
  const items = this.currentElement.items
    .filter(item => item.type === 'subItems') // 筛选出带subItems的对象
    .map(item => item.subItems) // 提取每个对象的subItems数组
    .flat(); // 将数组的数组扁平化一维数组
  return { items }; // 包装成目标结构
}

两种方法最终都会返回你需要的newElement结构。

内容的提问来源于stack exchange，提问作者Can