Question

进度映射，比较只有 10%的进度，确要显示 50%的进度的场景。

代码

function adjustProgress(progress: number, mapping: { real: number; target: number }[] = []) {
  if (progress <= 0) {
    return 0;
  }
  if (!mapping || mapping.length <= 0) {
    return progress;
  }
  // 第一个
  const f = mapping[0];
  if (progress <= f.real) {
    return progress * (f.target / f.real);
  }
  // 最后一个
  const l = mapping[mapping.length - 1];
  if (progress >= l.target) {
    return l.target;
  }
  const curIndex = mapping.findIndex(m => m.real >= progress);
  if (!curIndex) {
    return progress;
  }
  const cur = mapping[curIndex];
  const pre = mapping[curIndex - 1];
  //   原基数   +   实际进度/最大实际进度 * 期望间距
  return pre.target + (progress - pre.real) / (cur.real - pre.real) * (cur.target - pre.target);
}

示例

const mapping = [{
  real: 0,
  target: 0,
}, {
  real: 30,
  target: 50
}, {
  real: 60,
  target: 80
}, {
  real: 100,
  target: 100
}];


console.log("15", adjustProgress(15, mapping));  // 15 25
console.log("25", adjustProgress(25, mapping)); // 25 41.66666666666667
console.log("50", adjustProgress(50, mapping)); // 50 70
console.log("60", adjustProgress(60, mapping)); // 60 80
console.log("100", adjustProgress(100, mapping)); // 100 100