如何用JavaScript的map或for...of自动递增对象数组重复value属性值

问题分析 #

你需要处理对象数组，确保每个对象的value属性唯一，重复的value要自动递增直到不再重复。你的原代码存在几个核心问题：

• 嵌套循环逻辑错误，没有正确跟踪已使用的value值
• value: itm.value +1这种写法不是对对象属性的赋值，属于无效的语法使用
• 没有保留首次出现的value，只是无意义地遍历所有元素做重复比较

正确实现方案 #

可以用for...of循环配合Set来跟踪已出现的value，遍历数组时检查当前value是否已存在，若存在则持续递增直到找到未使用的值，再更新对象并记录到Set中。

const arrobj = [
  { value: 2},
  { value: 1},
  { value: 1},
  { value: 4},
];

const usedValues = new Set();

for (const item of arrobj) {
  let currentValue = item.value;
  // 循环找到第一个未被使用的value
  while (usedValues.has(currentValue)) {
    currentValue++;
  }
  // 更新当前对象的value
  item.value = currentValue;
  // 将新值存入已使用集合
  usedValues.add(currentValue);
}

console.log(arrobj);
// 输出结果：
// [ { value: 3 }, { value: 1 }, { value: 2 }, { value: 4 } ]

逻辑说明 #

1. 用Set存储已经出现过的value，保证查询的高效性
2. 遍历每个对象时，从原value开始检查，若已存在则自增
3. 找到未使用的value后，更新对象属性并把新值存入Set
4. 这样能保证所有value唯一，且重复值会递增到第一个可用值

如果想用map方法实现，也可以基于同样的逻辑，注意要维护一个共享的Set（不能在map回调内每次新建，否则无法跨元素跟踪）：

const arrobj = [
  { value: 2},
  { value: 1},
  { value: 1},
  { value: 4},
];

const usedValues = new Set();

const result = arrobj.map(item => {
  let currentValue = item.value;
  while (usedValues.has(currentValue)) {
    currentValue++;
  }
  usedValues.add(currentValue);
  // 返回新对象，不修改原数组（若需修改原数组可直接赋值item.value）
  return { ...item, value: currentValue };
});

console.log(result);
// 输出结果：
// [ { value: 3 }, { value: 1 }, { value: 2 }, { value: 4 } ]

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