Lodash 中使用双层 map 将嵌套对象数组转换为纯数组结构

12次阅读

Lodash 中使用双层 map 将嵌套对象数组转换为纯数组结构

本文介绍如何利用 lodash 的链式调用(或原生 javascript)对多维嵌套数据进行结构扁平化处理,特别是将形如 `[ { nodes: […] } ]` 的对象数组批量提取为 `[[…], […]]` 的纯数组结构。

要实现从原始嵌套结构(外层数组 → 内层数组 → 每个对象含 nodes 字段)到目标结构(外层数组 → 内层数组 → 直接为 nodes 数组)的转换,关键在于保留外层数组的维度,仅对每一内层数组执行“提取 .nodes”操作。这本质上是二维映射(double map,而非扁平化(flatMap 会破坏层级)。

✅ 正确方案:双层 map(推荐)

使用 _.map 嵌套调用,外层遍历最外层数组(即每个 graphql 结果批次),内层遍历该批次中的每个对象并提取其 nodes 字段:

const result = _.chain(resp.data.data.projects.nodes)   .map(subArray => _.map(subArray, 'nodes')) // 外层 map + 内层 map(支持字符串路径)   .value();

等价于更直观的函数写法:

const result = _.chain(resp.data.data.projects.nodes)   .map(subArray => subArray.map(item => item.nodes))   .value();

? 提示:_.map(array, ‘path’) 是 Lodash 的便捷语法,等价于 array.map(x => x.path),可安全用于提取 nodes。

为什么 flatMap(‘ciVariables.nodes’) 不适用?

  • flatMap 会将所有子数组合并到同一层级,导致结果变成一维大数组(如 [[…], […], […]] → […, …, …]),丢失原始的外层分组结构;
  • 同时,你当前数据中并无 ciVariables 字段(示例中是 nodes),路径错误也会导致返回 undefined

? 完整示例(含类型安全提示)

// 假设 resp.data.data.projects.nodes 符合预期结构 const transformed = _.chain(resp.data.data.projects.nodes)   .map(batch => _.map(batch, 'nodes')) // ✅ 保持 batch 分组,仅提取 nodes   .value();  // 类型提示(typescript 可选) // const transformed: Array>> = ...

⚠️ 注意事项

  • 确保每项 subArray 中的对象都存在 nodes 属性,否则会得到 undefined;如需容错,可改用 _.map(batch, item => _.get(item, ‘nodes’, []));
  • 若后续还需对 nodes 数组进一步处理(如过滤、映射字段),可在内层 map 中链式组合,例如:
    _.map(batch, item => _.map(item.nodes, { id: ‘id’, name: ‘name’ }));
  • 在现代项目中,若无其他 Lodash 依赖,纯 JS 的 resp.data.data.projects.nodes.map(b => b.map(x => x.nodes)) 同样简洁高效,无需引入库。

通过双层 map,你既能精准控制数据层级,又能保持函数式编程的清晰性与可维护性。

text=ZqhQzanResources