如何基于数组长度用JavaScript动态生成步骤索引值？

我有一个元素数组，希望根据元素的索引和数组长度生成步骤值，要求最小值为0，最大值为100。以下是两个示例数组：

示例1：5个元素的数组 #

const RAMmarks = [
    {
      value: 0,
      label: ">1024 MB",
    },
    {
      value: 25,
      label: ">2048 MB",
    },
    {
      value: 50,
      label: ">4096 MB",
    },
    {
      value: 75,
      label: ">6144 MB",
    },
    {
      value: 100,
      label: ">8192 MB",
    },
  ];

示例2：4个元素的数组 #

const diskMarks = [
    {
      value: 0,
      label: ">20 GB",
    },
    {
      value: 33,
      label: ">45 GB",
    },
    {
      value: 66,
      label: ">75 GB",
    },
    {
      value: 99,
      label: ">100 GB",
    },
  ];

解决方案 #

核心思路是利用线性分布公式计算每个元素的value值：
value = (当前索引 / (数组总长度 - 1)) * 100

这个公式能保证第一个元素（索引0）的value为0，最后一个元素（索引为数组长度-1）的value为100，中间元素均匀分布。结合精度处理，就能生成符合需求的数组。

通用生成函数 #

function generateMarks(labels) {
  const totalItems = labels.length;
  // 处理数组长度为1的边界情况
  if (totalItems === 1) {
    return [{ value: 0, label: labels[0] }];
  }

  return labels.map((label, index) => {
    // 计算基础值
    let value = (index / (totalItems - 1)) * 100;
    // 取整处理，避免小数
    value = Math.round(value);
    // 强制最后一个元素为100，规避浮点运算精度误差
    if (index === totalItems - 1) {
      value = 100;
    }
    return { value, label };
  });
}

使用示例 #

生成示例1的RAMmarks：

const RAMlabels = [">1024 MB", ">2048 MB", ">4096 MB", ">6144 MB", ">8192 MB"];
const RAMmarks = generateMarks(RAMlabels);
// 输出结果与示例1完全一致

生成示例2的diskMarks（适配最后一个元素为99的需求）：

function generateDiskMarks(labels) {
  const totalItems = labels.length;
  if (totalItems === 1) {
    return [{ value: 0, label: labels[0] }];
  }

  return labels.map((label, index) => {
    let value = Math.floor((index / (totalItems - 1)) * 100);
    // 最后一个元素设为99
    if (index === totalItems - 1) {
      value = 99;
    }
    return { value, label };
  });
}

const diskLabels = [">20 GB", ">45 GB", ">75 GB", ">100 GB"];
const diskMarks = generateDiskMarks(diskLabels);
// 输出结果与示例2完全一致

说明 #

• 可以根据需求调整精度处理逻辑：比如用Math.floor()取整、保留指定小数位等
• 数组长度为1时，可根据需求返回value为0或100的元素
• 若需要非线性分布（如对数分布），可替换核心公式的逻辑

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