JavaScript中如何将带后缀的同名值视为同一值并避免重复赋值

这问题我太懂了——就是要把带数字后缀的名称和无后缀的同名值视为同一类，确保input_5不会和前四个输入框的核心值重复对吧？核心思路是先提取每个名称的「核心部分」（去掉末尾的数字），再基于核心值做重复检查。

具体步骤： #

1. 写一个辅助函数，用来提取名称的核心部分：
   这个函数会把任何末尾带数字的名称（比如RED1、JIM23）转换成无后缀的核心名（RED、JIM），用正则就能轻松实现。

2. 在生成input_5的值时，先收集input_1到input_4的核心名称，然后循环生成随机名称，直到找到一个核心名称不在已用集合里的选项。

修改后的完整代码： #

// 辅助函数：提取去掉末尾数字的核心名称
function getCoreName(name) {
  // 正则匹配末尾的一个或多个数字，替换为空字符串
  return name.replace(/\d+$/, '');
}

function getRandomName1() { var names = ['RED', 'GREEN', 'BLUE']; return names[Math.floor(Math.random() * names.length)]; }
function getRandomName2() { var names = ['BLACK', 'WHITE', 'GRAY']; return names[Math.floor(Math.random() * names.length)]; }
function getRandomName3() { var names = ['GOLD', 'SILVER', 'BRONZE']; return names[Math.floor(Math.random() * names.length)]; }
function getRandomName4() { var names = ['MAGENTA', 'CYAN', 'YELLOW']; return names[Math.floor(Math.random() * names.length)]; }
function getRandomName5() { var names = ['RED1', 'GREEN1', 'BLUE1', 'BLACK1', 'WHITE1', 'GRAY1', 'GOLD1', 'SILVER1', 'BRONZE1', 'MAGENTA1', 'CYAN1', 'YELLOW1']; return names[Math.floor(Math.random() * names.length)]; }

function myFunction1() {
  if (document.getElementById("input_A").value == "1") {
    // 生成前四个输入框的值
    const input1Val = getRandomName1();
    const input2Val = getRandomName2();
    const input3Val = getRandomName3();
    const input4Val = getRandomName4();
    
    document.getElementById("input_1").value = input1Val;
    document.getElementById("input_2").value = input2Val;
    document.getElementById("input_3").value = input3Val;
    document.getElementById("input_4").value = input4Val;
    
    // 收集前四个输入框的核心名称，存入集合方便快速查找
    const usedCoreNames = new Set([
      getCoreName(input1Val),
      getCoreName(input2Val),
      getCoreName(input3Val),
      getCoreName(input4Val)
    ]);
    
    // 循环生成input_5的值，直到找到核心名称未被使用的选项
    let input5Val;
    do {
      input5Val = getRandomName5();
    } while (usedCoreNames.has(getCoreName(input5Val)));
    
    document.getElementById("input_5").value = input5Val;
  }
}

<body onload="myFunction1()">
<select id="input_A">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select><br>
<input type="text" id="input_1"><br>
<input type="text" id="input_2"><br>
<input type="text" id="input_3"><br>
<input type="text" id="input_4"><br>
<input type="text" id="input_5">
</body>

代码说明： #

• getCoreName函数：用正则/\d+$/匹配名称末尾的所有数字，替换为空，完美处理RED1、JIM23这类带数字后缀的情况。
• usedCoreNames集合：把前四个输入框的核心名称存进去，用Set的has方法可以快速判断是否重复，效率比数组高。
• 循环生成input_5：用do-while循环，先生成一个值，再检查核心名称是否已被使用，直到找到符合条件的为止，确保不会出现重复的核心值。

比如如果input_1是RED，那么input_5就不会生成RED1、RED2（如果你的names数组里有的话），因为它们的核心都是RED，会被过滤掉。

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