本文介绍如何在前端 javascript 中将 laravel 返回的多层键值结构（如 `data1`、`data2`）中的所有子对象，按原键名合并为一个无嵌套层级的扁平对象，适用于购物车等动态数据聚合场景。
在 Laravel 中，当你通过 session()->get(‘cart.products’) 获取购物车数据时，后端可能返回一个包含多个命名数据块（如 data1、data2）的对象，每个块内部又以商品 ID 为键、商品信息为值的关联结构。但前端 Ajax 处理时，往往需要将其统一为一个扁平化的对象——即所有商品项直接挂载在同一级，保留原始 ID 作为键，便于遍历、查找或提交。
此时，不推荐在 Laravel 后端做复杂合并（易耦合、难复用），而应利用现代 JavaScript 高效处理。核心思路是：提取所有顶层属性的值（即 data1、data2 等对象），再将它们逐个合并到一个空对象中。
✅ 推荐方案（前端 JS，兼容性好、简洁高效）：
// 假设 Ajax 成功回调中收到响应 data
const response = {
data1: {
"1234543": { id: 1, title: "Product Title1", description: "Product Descrition1" },
"3453234": { id: 2, title: "Product Title2", description: "Product Descrition2" },
"4564234": { id: 3, title: "Product Title3", description: "Product Descrition3" }
},
data2: {
"4643345": { id: 4, title: "Product Title4", description: "Product Descrition4" },
"8679673": { id: 5, title: "Product Title5", description: "Product Descrition5" },
"2344565": { id: 6, title: "Product Title6", description: "Product Descrition6" }
}
};
// 一行代码实现扁平合并：Object.values → 数组；... 展开 → Object.assign 合并为单个对象
const merged = Object.assign({}, ...Object.values(response));
console.log(merged);
// 输出：
// {
// "1234543": { id: 1, title: "Product Title1", ... },
// "3453234": { id: 2, title: "Product Title2", ... },
// "4564234": { id: 3, title: "Product Title3", ... },
// "4643345": { id: 4, title: "Product Title4", ... },
// "8679673": { id: 5, title: "Product Title5", ... },
// "2344565": { id: 6, title: "Product Title6", ... }
// }
? 关键说明：
- Object.values(response) 提取 data1、data2 对应的对象数组；
- … 展开运算符将数组转为独立参数传入 Object.assign()；
- Object.assign({}, …) 确保不污染原对象，返回全新合并对象；
- 所有原始键（如 “1234543”）被完整保留，不是转成数组索引（注意：你示例中写的是 [key: value]，但实际 JS 对象字面量无法以方括号语法表示键名；你真正需要的是 plain object，而非 array —— 因为 array 不支持自定义字符串键）。
⚠️ 注意事项：
- 若存在重复键（例如 data1 和 data2 中都有 “1234543”），后者会覆盖前者；
- 如需去重或冲突处理，可改用 reduce + 自定义逻辑；
- Laravel 端若需预处理，也可用 collect($data)->collapse()->all()（要求 $data 是二维集合），但前端聚合更灵活、解耦。
总结：该方法轻量、语义清晰、无需额外依赖，是处理此类“多区块键值合并”场景的标准实践。