如何基于myObj数组长度动态设置进度条高度避免超出100%

核心逻辑是用对应level单词数 / 总单词数的实际占比计算高度，替代固定乘10的硬编码逻辑，永远不会超出100%。

具体实现步骤 #

• 第一步：统计各level的单词数量，同时获取数组总长度作为计算基数

// 初始化各level计数
const levelCount = {
  0: 0,
  1: 0,
  2: 0
}
// 遍历数组统计数量
myObj.forEach(item => {
  levelCount[item.level] += 1
})
// 获取总单词数
const total = myObj.length

• 第二步：判断总长度是否为0，避免除以0报错，再按实际占比设置进度条高度

if (total > 0) {
  // 假设三个进度条分别对应类名 progress-0、progress-1、progress-2
  $('.progress-0').css('height', (levelCount[0] / total * 100).toFixed(2) + '%')
  $('.progress-1').css('height', (levelCount[1] / total * 100).toFixed(2) + '%')
  $('.progress-2').css('height', (levelCount[2] / total * 100).toFixed(2) + '%')
} else {
  // 数组为空时所有进度条高度置为0
  $('.progressBar').css('height', '0%')
}

效果验证 #

拿你给出的示例测试：总长度17，level2有13个、level1和level0各2个：

• level2占比：13/17*100≈76.47%
• level1占比：2/17*100≈11.76%
• level0占比：2/17*100≈11.76%
  三个数值加总刚好为100%，既不会超出进度条最大高度，也能准确反映各level的真实占比。

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