如何合并父数组属性与嵌套子数组元素，生成扁平化新数组？

问题根因 #

你现有代码出现嵌套数组、数据错误的原因有三个：

• 索引逻辑错误：内层循环的y是当前订单下data数组的子索引，不是全局pedidosExcel的索引，当处理第二个及以后的订单时，y会从0重新计数，会覆盖pedidosExcel前面对应位置的元素
• 额外嵌套了数组：你给pedidosExcel[y]赋值的时候，把构造好的对象用[]包裹了，相当于每个位置存的是包含单个对象的数组，才会出现嵌套结构
• 冗余操作：你先push了原始的data元素，紧接着又覆盖了该位置的值，属于无效的多余操作

正确实现 #

方案1：更简洁的flatMap实现（推荐） #

直接用数组的flatMap方法完成扁平化+属性合并，不需要手动控制循环索引，不会出现上述错误：

const pedidosExcel = pedidos.flatMap(pedido => {
  // 遍历当前订单的所有商品，合并订单属性和商品属性
  return pedido.data.map(item => ({
    id: pedido.id,
    nombre: pedido.nombre,
    escuela: pedido.escuela,
    grado: pedido.grado,
    fecha: pedido.fecha,
    descripcion: item.descripcion,
    tipo: item.tipo,
    editorial: item.editorial,
    precio: item.precio,
    // 需要补充其他字段直接在这里添加即可
  }))
})

方案2：嵌套for循环实现 #

如果要沿用你原来的for循环写法，修改为以下逻辑即可：

const pedidosExcel = []
for(let x = 0; x < pedidos.length; x++){
  const pedido = pedidos[x]
  for(let y = 0; y < pedido.data.length; y++){
    const item = pedido.data[y]
    // 直接构造合并后的对象，push到结果数组即可
    pedidosExcel.push({
      id: pedido.id,
      nombre: pedido.nombre,
      escuela: pedido.escuela,
      grado: pedido.grado,
      fecha: pedido.fecha,
      descripcion: item.descripcion,
      tipo: item.tipo,
      editorial: item.editorial,
      precio: item.precio,
    })
  }
}

两种方案最终得到的pedidosExcel都是扁平化的对象数组，长度等于所有订单的商品总数，每个元素同时包含你需要的订单属性和对应商品的属性。

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