JavaScript合并多维数组指定key的子数组问题求解

原数组结构 #

[{"__typename": "ConfigurableProduct","uid": "MzY3","name": "AISLING BODYSUIT","crosssell_products": [{"__typename": "ConfigurableProduct","uid": "NTI=","name": "Product 1"},{"__typename": "ConfigurableProduct","name": "Product 2"},{"__typename": "ConfigurableProduct","name": "Product 3"}]},{"__typename": "ConfigurableProduct","uid": "MzI4","name": "CERYS BODYSUIT","crosssell_products": [{"__typename": "ConfigurableProduct","name": "Product 4"},{"__typename": "ConfigurableProduct","name": "Product 5"},{"__typename": "ConfigurableProduct","name": "Product 6"}]}]

需求 #

将所有元素中的crosssell_products子数组合并为一个单独的crosssell_products数组，期望结果：

"crosssell_products": [{"__typename": "ConfigurableProduct","uid": "NTI=","name": "Product 1"},{"__typename": "ConfigurableProduct","name": "Product 2"},{"__typename": "ConfigurableProduct","name": "Product 3"},{"__typename": "ConfigurableProduct","name": "Product 4"},{"__typename": "ConfigurableProduct","name": "Product 5"},{"__typename": "ConfigurableProduct","name": "Product 6"}]

原代码问题 #

你之前的代码直接用a.concat(b)，但b是整个产品对象，不是对应的crosssell_products子数组，因此无法得到正确结果。

正确实现 #

方法1：使用reduce遍历合并

通过reduce遍历数组，每次将当前元素的crosssell_products子数组合并到累加器中，同时处理可能的空值（避免部分元素无crosssell_products时出错）：

const mergedCrosssell = getRelatedData?.products?.items.reduce((acc, item) => {
  return acc.concat(item.crosssell_products || []);
}, []);

// 包裹为需求格式的对象
const result = { crosssell_products: mergedCrosssell };
console.log(result);

方法2：使用flatMap简化写法（ES2019+支持）

flatMap可以直接提取子数组并扁平化，写法更简洁：

const mergedCrosssell = getRelatedData?.products?.items.flatMap(item => item.crosssell_products || []);
const result = { crosssell_products: mergedCrosssell };
console.log(result);

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