JavaScript中如何用高阶函数展开数组嵌套对象及对比性能差异

你当前的双层for循环存在逻辑缺陷：当designs数组为空时（比如示例中的Lisa条目），不会被推入结果数组，和你预期的输出不符，需要先补充对应判断逻辑。
使用Array.prototype.flatMap+Array.prototype.map的高阶函数实现如下，完全匹配你的输出要求：

const result = tests.flatMap(item => {
  // 处理designs为空的场景
  if (item.designs.length === 0) {
    return [{
      id: item.id,
      name: item.name,
      designId: null,
      designName: null
    }]
  }
  // 存在design记录时展开
  return item.designs.map(design => ({
    id: item.id,
    name: item.name,
    designId: design.designId,
    designName: design.designName
  }))
})

• 极限性能：双层普通for循环性能更高。原因是高阶函数会产生额外的函数调用开销，同时会生成临时的中间数组，在数据量级达到十万级及以上的场景下，双层for循环的性能通常比高阶函数实现高30%以上，性能差距随数据量增大而变大。
• 常规业务场景差异可忽略：如果你的业务场景下数据量在万级以下，两种写法的性能差基本在毫秒甚至微秒级，用户完全无感知，优先选择逻辑更简洁、可读性更强的高阶函数写法即可，后续维护成本更低。
• 补充：如果你需要兼顾性能和可读性，可以选择for...of循环写法，性能接近普通for循环，同时代码可读性更高。

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