如何用JavaScript将含items数组的Shipment数组展开为单条目数组？

原始数据结构 #

我有一个包含多个Shipment对象的数组，每个Shipment包含shipmentNumber字段和items数组（每个item包含productId、price、quantity属性），具体结构如下：

[
    {
        "shipmentNumber":12345678,
        "items":[
            {
                "productId":80000000000001,
                "price":100,
                "quantity":1
            },
            {
                "productId":80000000000002,
                "price":80,
                "quantity":1
            }
        ]
    },
    {
        "shipmentNumber":89675645,
        "items":[
            {
                "productId":80000000000003,
                "price":100,
                "quantity":1
            }
        ]
    }
]

目标转换结构 #

需要将上述数组转换为每个元素对应一个Shipment-item组合的数组，即每个item单独对应一个包含原shipmentNumber和该item的对象，目标结构如下：

[
    {
        "shipmentNumber":12345678,
        "items": {
                "productId":80000000000001,
                "price":100,
                "quantity":1
            }
    },
    {
        "shipmentNumber":12345678,
        "items":
            {
                "productId":80000000000002,
                "price":80,
                "quantity":1
            }
    },
    {
        "shipmentNumber":89675645,
        "items":
            {
                "productId":80000000000003,
                "price":100,
                "quantity":1
            }
    }
]

JavaScript实现方案 #

方案一：使用flatMap（简洁高效） #

flatMap可以一步完成映射与数组扁平化操作，非常适合这种一对多的拆分场景，性能足以应对5000+元素的规模：

// 假设shipments是原始的Shipment数组
const transformedShipments = shipments.flatMap(shipment => 
  shipment.items.map(item => ({
    shipmentNumber: shipment.shipmentNumber,
    items: item
  }))
);

方案二：传统循环（兼容性好） #

如果需要兼容不支持flatMap的环境，使用双层循环的方式性能同样稳定，且无额外数组创建开销：

// 假设shipments是原始的Shipment数组
const transformedShipments = [];

for (const shipment of shipments) {
  for (const item of shipment.items) {
    transformedShipments.push({
      shipmentNumber: shipment.shipmentNumber,
      items: item
    });
  }
}

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