基于输入值匹配steps区间返回对应colors数组元素的实现需求

架构老林

2026-8-17

实现returnColor颜色匹配函数

给定两个等长数组：

const colors = ["#00876c", "#50a26f", "#88bb72", "#c1d379", "#fde987", "#fac067", "#f49654", "#e86b4e", "#d43d51"];
const steps  = [13.5, 13.6875, 13.875, 14.0625, 14.25, 14.4375, 14.625, 14.8125, 15];

对应规则与函数要求

同索引的steps元素与colors元素一一对应
returnColor函数规则：
- 输入值小于steps最小值时，返回第一个颜色
- 输入值大于steps最大值时，返回最后一个颜色
- 输入值处于相邻steps元素之间时，返回前一个steps对应的颜色（示例：returnColor(13.2)返回#00876c，returnColor(13.7)返回#50a26f）

实现方案

方法一：遍历匹配

function returnColor(input) {
  const minStep = steps[0];
  const maxStep = steps[steps.length - 1];

  if (input < minStep) {
    return colors[0];
  }
  if (input > maxStep) {
    return colors[colors.length - 1];
  }

  for (let i = 1; i < steps.length; i++) {
    if (input < steps[i]) {
      return colors[i - 1];
    }
  }

  return colors[colors.length - 1];
}

方法二：用`findIndex`简化逻辑

function returnColor(input) {
  const minStep = steps[0];
  const maxStep = steps.at(-1);

  if (input < minStep) return colors[0];
  if (input > maxStep) return colors.at(-1);

  const targetIndex = steps.findIndex(step => step > input);
  return targetIndex !== -1 ? colors[targetIndex - 1] : colors.at(-1);
}