如何将多组键值对象合并为一个扁平化对象（仅保留值，丢弃外层键）

本文介绍在 laravel + ajax 场景下，将嵌套的会话购物车数据（如 `data1`、`data2` 等键下的产品对象）合并为单一对象的高效方法，支持纯 javascript（es6+）与 laravel 后端双重实现。

在 Laravel 应用中，购物车数据常以关联数组形式存储于 Session（例如 session()->get('cart.products')），其结构可能包含多个顶层键（如 data1、data2），每个键下又以动态商品 ID 为键、商品信息为值的对象集合。而前端 Ajax 接收后，往往需要将其「扁平化」——即忽略 data1/data2 这类分组键，直接将所有内部商品对象（以 ID 为键）合并到一个统一对象中，便于后续遍历或提交。

✅ 推荐方案：前端 JavaScript 合并（简洁高效）

利用 ES6 的 Object.values() 和展开运算符 ...，配合 Object.assign()，一行代码即可完成合并：

// 假设 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' }
  }
};

// ✅ 关键：提取所有子对象，合并为单一层级对象
const flattened = Object.assign(...Object.values(response));
console.log(flattened);
// 输出：
// {
//   1234543: { id: 1, ... },
//   3453234: { id: 2, ... },
//   4564234: { id: 3, ... },
//   4643345: { id: 4, ... },
//   8679673: { id: 5, ... },
//   2344565: { id: 6, ... }
// }

⚠️ 注意：Object.assign() 要求传入的对象均为 plain object；若某 dataX 值为 null 或 undefined，需提前过滤，否则会报错。增强健壮性写法：const flattened = Object.assign( {}, ...Object.values(response).filter(obj => obj && typeof obj === 'object') );

✅ 备选方案：Laravel 后端预处理（更可控）

若希望减少前端逻辑、统一数据格式，可在 Laravel 控制器中直接合并：

// 在控制器中
$cartProducts = session()->get('cart.products', []);

// 使用 array_merge(...array_values()) 扁平化多维关联数组
$flattenedProducts = array_merge(...array_values($cartProducts));

return response()->json($flattenedProducts);

此方式返回给前端的就是已合并的对象，Ajax 直接使用 data 即可，无需额外转换。

? 补充说明

• 你示例中目标格式 [ ... ] 实际是对象（非数组），因为键为数字字符串（如 1234543），JavaScript 中带非连续数字键的对象应使用 Object 类型，而非数组（Array）。若真需转为数组（忽略原始 ID 键），可用：

  const productArray = Object.values(flattened); // → [{id:1,...}, {id:2,...}, ...]

• Laravel 的 array_merge(...array_values($arr)) 与 JS 的 Object.assign(...Object.values(obj)) 逻辑完全对应，体现了前后端数据结构设计的一致性。

综上，优先推荐前端一行式合并——轻量、灵活、不侵入后端逻辑；对数据一致性要求极高的场景，再考虑后端统一处理。