如何用JavaScript在哈希映射中避免ID冲突存储用户输入

我有一个算法，需要接收如下格式的JSON文件作为参数：

{"quiz": { "algorithm_id_1": "4", "algorithm_id_2": "2", "algorithm_id_3": "3" }}

其中algorithm_id是输入字段的ID，其后的数字是用户为该输入字段选择的值（多数为滑块输入）。

我的问题是：当存在ID相同的输入字段时，如何避免值被覆盖？我想要实现"algorithm_id_1": ["2", "3"]这样的数组格式，而不是重复的键导致后面的值覆盖前面的（比如"algorithm_id_1": "2", ... "algorithm_id_1": "3"）。

我目前正在获取每个输入字段的ID及其对应值，但每个响应都被存储为独立对象。当前代码如下：

const allInputs = $(":input"); // retrieve
for (var i = 0; i < allInputs.length; i++) {
  allInputs[i].value = localStorage.getItem(i);
} // populate
jQuery(":input").change(function() {
  for (var i = 0; i < allInputs.length; i++) {
    localStorage.setItem(i, allInputs[i].value);
    // console.log($(":input").get(i).id);
    var map = {};
    var vals = allInputs[i].value;
    var keys = allInputs.get(i).id;
    map[keys] = vals;
    console.log(keys)
  }
});

背景说明：我知道有更简便的实现方式，但受限于当前技术栈（Node.js和EJS），无法自主选择工具。该函数的作用是收集用户响应并输入到推荐算法中，恳请各位提供帮助。

要解决重复ID导致值被覆盖的问题，核心思路是在构建键值映射时，先检查当前ID是否已经存在：如果是首次出现就直接赋值，要是已经存在就把值转成数组（或者往已有的数组里加新值）。另外你当前的代码在change事件里每次循环都新建map对象，这会导致之前的收集结果全部丢失，得先把这个逻辑调整过来。

修改后的代码示例 #

const allInputs = $(":input"); 

// 初始化填充输入框：用ID+索引作为localStorage的key，避免重复ID的输入值被覆盖
for (var i = 0; i < allInputs.length; i++) {
  const storageKey = `input_${allInputs[i].id}_${i}`;
  allInputs[i].value = localStorage.getItem(storageKey) || '';
}

jQuery(":input").change(function() {
  // 统一创建一个映射对象，把所有输入的键值对都收集到这里
  const quizMap = { quiz: {} };

  // 遍历所有输入，处理重复ID的情况
  allInputs.each(function(index, input) {
    const inputId = input.id;
    const inputValue = input.value;

    // 先把当前输入的值存到localStorage，用唯一key区分重复ID的输入
    const storageKey = `input_${inputId}_${index}`;
    localStorage.setItem(storageKey, inputValue);

    // 处理映射中的重复ID逻辑
    if (!quizMap.quiz[inputId]) {
      // 这个ID第一次出现，直接赋值
      quizMap.quiz[inputId] = inputValue;
    } else {
      // ID已经存在，先检查当前值是不是数组
      if (!Array.isArray(quizMap.quiz[inputId])) {
        // 不是数组的话，把旧值转成数组
        quizMap.quiz[inputId] = [quizMap.quiz[inputId]];
      }
      // 把新值添加到数组里
      quizMap.quiz[inputId].push(inputValue);
    }
  });

  // 现在quizMap就是你需要的格式，可以传给你的推荐算法了
  console.log(JSON.stringify(quizMap));
});

关键修改点说明 #

1. 统一映射对象：把map的创建移到循环外面，确保所有输入的键值对都被收集到同一个对象中，不会每次循环都重置。
2. 重复ID处理逻辑：
   • 首次出现的ID：直接将值赋值给对应的键。
   • 重复出现的ID：如果当前值不是数组，先把旧值转为数组，再添加新值；如果已经是数组，直接push新值。
3. localStorage存储优化：之前用索引i作为存储key会导致重复ID的输入值被覆盖，现在改成input_${inputId}_${index}，每个输入（哪怕ID相同）都有独立的存储项，初始化填充时也能正确恢复每个输入的值。

额外提示 #

如果你的算法期望数组中的值是唯一的（比如用户多次调整同一个重复ID的滑块，只保留最新值），可以在push前先检查数组中是否已存在该值，或者直接替换数组的最后一项——根据你的实际业务需求调整就行。

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