JavaScript中基于子数组展开父数组元素的实现咨询

嘿，我懂你要实现的需求了——你需要把每个Campaign和它旗下的每本书拆分成独立的条目，生成一个扁平数组，每个条目同时包含Campaign的名称以及Book的标题和ISBN对吧？之前用_.flattenDeep没搞定是因为它只处理了Books数组的扁平化，没把Campaign的关键信息关联进去。下面给你两种实用的实现方式：

一、原生JavaScript实现（无需依赖库） #

利用ES6的flatMap方法，它可以先对数组元素做映射，再自动将结果扁平化，完美适配这个场景：

const originalData = {
  "campaigns": [
    {
      "name": "1st Campaign",
      "books": [
        {"title": "1st book", "primary_isbn": "isbn1"},
        {"title": "2nd book", "primary_isbn": "isbn2"},
        {"title": "3rd book", "primary_isbn": "isbn3"}
      ]
    },
    {
      "name": "2nd cam",
      "books": [
        {"title": "4th book", "primary_isbn": "isbn4"},
        {"title": "5th book", "primary_isbn": "isbn5"}
      ]
    }
  ]
};

// 生成目标数组
const result = originalData.campaigns.flatMap(campaign => {
  // 对当前Campaign下的每本书，生成包含Campaign名称的新对象
  return campaign.books.map(book => ({
    campaignName: campaign.name,
    title: book.title,
    primary_isbn: book.primary_isbn
  }));
});

二、Lodash实现（结合你熟悉的工具库） #

如果你更倾向用Lodash，可以用_.flatMap替代原生的flatMap，逻辑和原生一致，但兼容性更好（比如支持旧版浏览器）：

const _ = require('lodash'); // 确保已引入Lodash

const result = _.flatMap(originalData.campaigns, campaign => {
  // 遍历当前Campaign的Books，组合成新对象
  return _.map(campaign.books, book => ({
    campaignName: campaign.name,
    ...book // 用扩展运算符直接展开Book的所有字段，更简洁
  }));
});

最终输出结果 #

两种方式都会得到如下结构的扁平数组：

[
  { campaignName: '1st Campaign', title: '1st book', primary_isbn: 'isbn1' },
  { campaignName: '1st Campaign', title: '2nd book', primary_isbn: 'isbn2' },
  { campaignName: '1st Campaign', title: '3rd book', primary_isbn: 'isbn3' },
  { campaignName: '2nd cam', title: '4th book', primary_isbn: 'isbn4' },
  { campaignName: '2nd cam', title: '5th book', primary_isbn: 'isbn5' }
]

为什么之前的_.flattenDeep没用？ #

你之前尝试的_.flattenDeep(data.campaigns.books)有两个问题：

• data.campaigns是数组，不能直接通过.books访问子元素的books属性，得先遍历每个Campaign；
• 就算你拿到所有Campaign的Books数组，_.flattenDeep只是把这些数组合并成一个纯Books数组，完全丢失了每个Book对应的Campaign名称，这显然不是你需要的关联结构。

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