如何重构数值映射对象？滑块最大值拟升至100的代码优化

我需要根据滑块的取值显示对应特定数字。当前用冗长的对象做数值映射，若要把滑块最大值提升到100，这种写法效率极低，该如何重构？

原代码 #

JavaScript #

const p = document.getElementById("price");
const result = document.getElementById("result");

const rangeObj = {
    0: 0,
    1: 0,
    2: 0,
    3: 1,
    4: 1,
    5: 1,
    6: 2,
    7: 2,
    8: 3,
    9: 3,
    10: 4,
    11: 4,
    12: 4,
    13: 5,
    14: 6,
    15: 6,
    16: 7,
    17: 7,
    18: 8,
    19: 8,
    20: 9
}

p.addEventListener("input", function() {
    console.log(p.value);
    result.innerText = rangeObj[p.value];
}, false);

HTML #

<input id="price" type="range" value="" max="20"  />

<div id="result"></div>

重构方案 #

方案一：使用区间映射数组 #

把每个结果对应的滑块值区间起点整理成数组，通过查找区间匹配结果，扩展和维护都更高效。

const p = document.getElementById("price");
const result = document.getElementById("result");

// 按滑块起始值升序定义映射规则：[起始值, 对应显示值]
const valueMap = [
  [0, 0],
  [3, 1],
  [6, 2],
  [8, 3],
  [10, 4],
  [13, 5],
  [14, 6],
  [16, 7],
  [18, 8],
  [20, 9],
  // 扩展到100时，直接添加新的区间规则即可
];

p.addEventListener("input", function() {
  const currentValue = Number(this.value);
  // 从后往前查找第一个起始值小于等于当前滑块值的区间
  const matchedRule = valueMap.slice().reverse().find(rule => rule[0] <= currentValue);
  // 兜底处理（理论上不会触发）
  result.innerText = matchedRule ? matchedRule[1] : 0;
}, false);

修改HTML的滑块最大值为100：

<input id="price" type="range" value="" max="100" />
<div id="result"></div>

方案二：使用分段条件判断 #

如果映射规则逻辑清晰，直接用条件判断实现，可读性更强，代码更简洁。

const p = document.getElementById("price");
const result = document.getElementById("result");

function getMappedValue(val) {
  if (val <= 2) return 0;
  if (val <= 5) return 1;
  if (val <= 7) return 2;
  if (val <= 9) return 3;
  if (val <= 12) return 4;
  if (val === 13) return 5;
  if (val <= 15) return 6;
  if (val <= 17) return 7;
  if (val <= 19) return 8;
  if (val === 20) return 9;
  // 扩展到100时，继续添加对应的条件分支
}

p.addEventListener("input", function() {
  const currentValue = Number(this.value);
  result.innerText = getMappedValue(currentValue);
}, false);

方案选择 #

• 若后续需要频繁调整或添加大量区间规则，优先选区间映射数组，便于统一管理和修改；
• 若规则逻辑简单、分支少，选分段条件判断，代码更直观易读。

内容的提问来源于stack exchange，提问作者Дмитрий Качуринец