JavaScript循环向空对象添加同键多值时仅存最后一项的问题

我是StackOverflow新手，若此问题已有解答深表歉意，此前查找的内容反而让我更困惑，已为此耗费数小时。我的问题是：尝试通过for循环向空对象添加多个同键对应的值时，仅能保留最后一组键值对。我使用if/else语句尝试实现需求，以下是我的代码：

var itemData = [{
    category: 'fruit',
    itemName: 'apple',
    onSale: false
  },
  {
    category: 'canned',
    itemName: 'beans',
    onSale: false
  },
  {
    category: 'canned',
    itemName: 'corn',
    onSale: true
  },
  {
    category: 'frozen',
    itemName: 'pizza',
    onSale: false
  },
  {
    category: 'fruit',
    itemName: 'melon',
    onSale: true
  },
  {
    category: 'canned',
    itemName: 'soup',
    onSale: false
  },
];

let list = {  }


for (let i = 0; i < items.length; i++) {
  
if (items[i].category === 'fruit' && items[i].onSale === false) { 
       Object.assign(list, {fruit : [`${items[i].itemName}`]})  
       
   }
  else if (items[i].category === 'fruit' && items[i].onSale === true) { 
     list.fruit.push(`${items[i].itemName}${'($)'}`)
   
   }
else if (items[i].category === 'canned' && items[i].onSale === false) {

Object.assign(list, {canned : [`${items[i].itemName}`,] })  
    list.canned.push(`${items[i].itemName}`)
  }
  
}

当前console.log(list)输出为：

{
  canned: ["soup", "soup"],
  fruit: ["apple", "melon($)"]
}

但我期望的输出是：

{
  canned: ["beans", "soup"],
  fruit: ["apple", "melon($)"]
}

恳请各位提供帮助，谢谢。

解答 #

问题根源有两点：

1. 变量名不匹配：循环中使用的items未定义，实际数据源变量是itemData，这会导致循环逻辑异常；
2. 重复覆盖数组：处理canned类别的非折扣商品时，每次都用Object.assign重新创建新数组覆盖原有数据，再重复push当前项，最终只保留最后一次循环的内容。

修改后的代码如下：

var itemData = [{
    category: 'fruit',
    itemName: 'apple',
    onSale: false
  },
  {
    category: 'canned',
    itemName: 'beans',
    onSale: false
  },
  {
    category: 'canned',
    itemName: 'corn',
    onSale: true
  },
  {
    category: 'frozen',
    itemName: 'pizza',
    onSale: false
  },
  {
    category: 'fruit',
    itemName: 'melon',
    onSale: true
  },
  {
    category: 'canned',
    itemName: 'soup',
    onSale: false
  },
];

let list = {};

// 修正变量名，遍历正确的数据源
for (let i = 0; i < itemData.length; i++) {
  const item = itemData[i];
  
  if (item.category === 'fruit') {
    // 先判断数组是否存在，不存在则初始化
    if (!list.fruit) list.fruit = [];
    list.fruit.push(item.onSale ? `${item.itemName}($)` : item.itemName);
  } else if (item.category === 'canned' && !item.onSale) {
    // 先判断数组是否存在，不存在则初始化
    if (!list.canned) list.canned = [];
    list.canned.push(item.itemName);
  }
}

console.log(list);

执行后输出符合预期：

{
  canned: ["beans", "soup"],
  fruit: ["apple", "melon($)"]
}

也可以用Array.reduce简化逻辑，代码更简洁：

const list = itemData.reduce((acc, item) => {
  if (item.category === 'fruit') {
    acc.fruit = acc.fruit || [];
    acc.fruit.push(item.onSale ? `${item.itemName}($)` : item.itemName);
  } else if (item.category === 'canned' && !item.onSale) {
    acc.canned = acc.canned || [];
    acc.canned.push(item.itemName);
  }
  return acc;
}, {});

console.log(list);

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