JavaScript中已知键值时如何向现有对象添加元素及数组分组问题求解

我来帮你排查下问题所在，你的需求是把相同order_id对应的product_id收集到对应数组中，但当前的reduce代码有两个关键问题导致没得到预期结果：

问题分析 #

1. 未返回累加器：reduce的回调函数必须返回累加器（也就是你代码里的order变量），否则下一次迭代时累加器会变成undefined，后续的属性操作都会失效。
2. 未设置初始值：如果不给reduce指定初始值，它会默认把数组的第一个元素作为初始累加器，这和我们需要从空对象开始构建分组的需求不符。

修正后的一次性分组代码 #

如果是要一次性处理现有的product数组，修正后的reduce写法如下：

const product = [{ 'product_id': 247, 'order_id': 4 }, { 'product_id': 245, 'order_id': 3 }, { 'product_id': 247, 'order_id': 3 }];

const groupedOrders = product.reduce((order, obj) => {
  const key = obj.order_id;
  // 若当前order_id未初始化，则创建空数组
  if (!order[key]) {
    order[key] = [];
  }
  // 将product_id添加到对应数组末尾
  order[key].push(obj.product_id);
  // 必须返回累加器，供下一次迭代使用
  return order;
}, {}); // 这里指定初始值为空对象

console.log(groupedOrders);
// 输出结果：{4: [247], 3: [245, 247]}

按钮点击时的动态更新方案 #

如果是每次点击按钮时传入product_id和order_id来动态添加数据，你需要维护一个持久的分组对象，比如：

// 初始化分组对象，可放在全局或组件状态中
let groupedOrders = {};

// 按钮点击事件处理函数
function handleAddProduct(productId, orderId) {
  // 检查当前order_id对应的数组是否存在，不存在则初始化
  if (!groupedOrders[orderId]) {
    groupedOrders[orderId] = [];
  }
  // 将新的product_id添加到对应数组末尾
  groupedOrders[orderId].push(productId);
  
  // 这里可以添加更新UI的逻辑，比如渲染最新的分组结果
  console.log('当前分组结果:', groupedOrders);
}

// 模拟按钮点击调用
handleAddProduct(247, 4); // 输出：当前分组结果: {4: [247]}
handleAddProduct(247, 4); // 输出：当前分组结果: {4: [247, 247]}
handleAddProduct(245, 3); // 输出：当前分组结果: {4: [247, 247], 3: [245]}

这样就能实现你想要的“每次点击后将product_id添加到对应order_id数组末尾”的效果了。

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