You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何创建基于输入值的查找表?含范围判断与数值计算需求

如何创建可扩展的范围匹配计算表

我明白你想要的是一个能根据输入值的范围规则和简单计算生成对应结果的逻辑,之前用object或array没成功大概率是没找对组织规则的方式。下面给你两种清晰且易扩展的实现思路,完美适配后续新增范围的需求:

方法一:使用规则数组(推荐,扩展性最强)

这种方法把每个判断规则和对应结果封装成数组元素,新增规则只需要追加元素,完全不用修改核心逻辑,非常灵活。

// 定义范围匹配规则:每个规则包含判断条件和对应的结果文本
// 注意:规则要按优先级从高到低排列(严格的范围放前面)
const sizeRules = [
  { condition: (val) => val > 500, result: 'huge' },
  { condition: (val) => val > 100, result: 'big' },
  { condition: (val) => val < 100, result: 'small' },
  // 后续新增规则直接在这里加就行,比如:
  // { condition: (val) => val > 1000, result: 'massive' },
  // { condition: (val) => val >= 100 && val <= 500, result: 'medium' }
];

// 核心计算函数
function getCalculatedTable(inputValue) {
  const numValue = parseInt(inputValue, 10); 
  if (isNaN(numValue)) return '请输入有效的数字';

  // 匹配对应的size文本:找到第一个满足条件的规则
  const sizeResult = sizeRules.find(rule => rule.condition(numValue))?.result || 'unknown';
  
  // 计算第三行的数值(输入值的一半)
  const halfValue = numValue / 2;

  // 返回整理后的结果(可根据需求改成表格格式)
  return {
    line1: `${numValue}cm`,
    line2: sizeResult,
    line3: halfValue
  };
}

测试示例

// 输入30的结果
console.log(getCalculatedTable('30'));
// 输出:{ line1: '30cm', line2: 'small', line3: 15 }

// 输入200的结果
console.log(getCalculatedTable('200'));
// 输出:{ line1: '200cm', line2: 'big', line3: 100 }

// 输入1000的结果
console.log(getCalculatedTable('1000'));
// 输出:{ line1: '1000cm', line2: 'huge', line3: 500 }

方法二:使用区间映射对象(适合有序连续区间)

如果你的范围是连续且有序的,用对象存区间边界的方式会更简洁,代码可读性也不错:

// 定义区间映射:键是区间的下限,值是对应结果
const sizeMap = {
  500: 'huge',
  100: 'big',
  // 新增区间直接加键值对即可,比如 1000: 'massive'
};

function getCalculatedTable(inputValue) {
  const numValue = parseInt(inputValue, 10);
  if (isNaN(numValue)) return '请输入有效的数字';

  let sizeResult = 'small'; // 默认值(对应<100的情况)
  // 按区间下限从高到低遍历,找到第一个匹配的区间
  for (const threshold of Object.keys(sizeMap).map(Number).sort((a,b) => b - a)) {
    if (numValue > threshold) {
      sizeResult = sizeMap[threshold];
      break;
    }
  }

  const halfValue = numValue / 2;

  return {
    line1: `${numValue}cm`,
    line2: sizeResult,
    line3: halfValue
  };
}

可选:生成HTML表格

如果需要把结果渲染成可视化表格,只需要在上面的基础上加一个渲染函数:

function renderTable(inputValue) {
  const data = getCalculatedTable(inputValue);
  if (typeof data === 'string') return `<p>${data}</p>`;
  
  return `
    <table border="1" cellpadding="8">
      <tr><td>Line 1</td><td>${data.line1}</td></tr>
      <tr><td>Line 2</td><td>${data.line2}</td></tr>
      <tr><td>Line 3</td><td>${data.line3}</td></tr>
    </table>
  `;
}

内容的提问来源于stack exchange,提问作者user3142695

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 07:30:06