如何在JavaScript中正确比较数字以匹配图例颜色（不使用取整方法）

原来使用toFixed(2)的逻辑存在两个明显问题：一是toFixed返回的是字符串，转换过程本身包含四舍五入取整逻辑，不符合要求；二是只有四舍五入后等于阈值两位小数的数值才能匹配成功，其余数值会返回undefined，无法覆盖所有场景。

优化后的逻辑全程使用原生数值比较，不涉及任何取整类操作，也不需要toFixed转换，同时兼容浮点数精度误差问题：

const colors = [
  [ 0.00, 255, 13, 186 ],
  [ 0.25, 254, 4, 135 ],
  [ 0.50, 73, 255, 35 ],
  [ 0.75, 185, 116, 255 ],
  [ 1.00, 32, 50, 255 ]
]
// 浮点数比较容差，仅用于抵消二进制存储带来的精度误差，不属于取整操作
const EPSILON = 1e-8
const point = 0.388920938 // 动态获取的后端返回数值

// 兼容全版本JS的实现方案
let matchedColor = colors[0]
// 颜色数组默认按阈值升序排列，若数据源不保证顺序可先执行：colors.sort((a,b) => a[0] - b[0])
for (let i = 1; i < colors.length; i++) {
  const currentThreshold = colors[i][0]
  if (point + EPSILON >= currentThreshold) {
    matchedColor = colors[i]
  } else {
    // 数组已升序，后续阈值更大无需继续遍历
    break
  }
}

// 如果你使用ES2022及以上版本，可直接用更简洁的findLast写法
// const matchedColor = colors.findLast(item => point + EPSILON >= item[0])

逻辑说明 #

默认采用左闭右开的区间匹配规则，和通用色阶映射逻辑一致：

• point < 0.25 → 匹配0.00对应颜色
• 0.25 ≤ point < 0.5 → 匹配0.25对应颜色
• 0.5 ≤ point < 0.75 → 匹配0.50对应颜色
• 0.75 ≤ point < 1.0 → 匹配0.75对应颜色
• point ≥ 1.0 → 匹配1.00对应颜色

如果需要调整区间规则，只需修改比较运算符即可。

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