jQuery实现服装尺码查找：更优雅的数组数值搜索方案

当前通过枚举每个厘米值、多层if/else判断的写法扩展性非常差，后续调整尺码区间、新增其他测量维度时维护成本极高，更合理的实现是采用区间配置+通用匹配逻辑的方案，完全不需要冗余判断。

核心思路 #

把所有尺码对应的测量范围统一收拢为可配置的规则表，写一个通用的范围匹配函数，传入测量值和对应部位的配置就能直接返回匹配到的尺码，后续调整规则只需要修改配置，不需要动核心逻辑。

实现代码 #

1. 定义尺码配置表 #

所有尺码规则统一在这里维护，不需要单独给每个尺码定义数组：

// 尺码配置，可按需扩展维度、调整区间
const sizeRules = {
  // 胸围尺码区间
  bust: [
    { size: 'XS', min: 78, max: 81 },
    { size: 'S', min: 82, max: 85 },
    { size: 'M', min: 86, max: 89 },
    { size: 'L', min: 90, max: 97 },
    { size: 'XL', min: 98, max: 102 }
  ],
  // 后续要加腰围、臀围、肩宽等维度，直接在这里新增对应配置即可
  // waist: [], shoulder: [] ...
}

2. 编写通用匹配函数 #

不需要写多层if/else，一个函数覆盖所有部位的尺码匹配：

/**
 * 尺码匹配通用方法
 * @param {string|number} inputVal 用户输入的测量值
 * @param {Array} rangeConf 对应部位的尺码区间配置
 * @returns {string} 匹配到的尺码，无匹配返回空字符串
 */
function getMatchedSize(inputVal, rangeConf) {
  const measure = Number(inputVal);
  if (isNaN(measure)) return '';
  const matchItem = rangeConf.find(item => measure >= item.min && measure <= item.max);
  return matchItem ? matchItem.size : '';
}

3. 业务逻辑调用 #

替换原有点击事件逻辑即可：

$('.sub').click(function(){
  const bustValue = $('#brust').val();
  const result = getMatchedSize(bustValue, sizeRules.bust);
  if (result) {
    alert(`匹配到的尺码为：${result}`);
  } else {
    alert('未找到对应尺码，请确认测量值是否输入正确');
  }
})

对应的HTML输入框建议改成number类型，减少用户非法输入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input label="胸围" value="80" type="number" id="brust" min="0">
<input type="submit" class="sub">

方案优势 #

• 维护成本极低：所有尺码规则集中管理，调整区间、新增尺码、新增测量维度都不需要修改匹配逻辑，只需要改配置项
• 无冗余代码：不需要枚举每个厘米的数值，也不需要堆叠if/else分支，逻辑清晰简洁
• 复用性强：同一个匹配函数可以支持所有部位的尺码查询，后续如果要做多维度综合匹配（比如同时参考胸围、腰围选码），只需要在配置基础上扩展少量逻辑即可
• 容错性更好：提前做了数值类型转换，不会因为输入值是字符串类型导致匹配失效，也能兼容非数字输入的异常场景

如果需要支持不同版型（修身/宽松/Oversize）、不同品类（上衣/裤子/连衣裙）的尺码规则，只需要在配置表中新增对应层级的规则即可，核心匹配逻辑完全不需要改动。

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