Javascript：将数字放入数组中，分成段

Question

我有一个使用 Angular CDK 制作的自定义 HTML 滑块。它适用于拖放。它是垂直的，原始位置在底部。此滑块分为 10 段，每段大小相同。

我能够获得滑块手柄位置和滑块总高度。

滑块将用于确定一种颜色，由 10 种颜色组成。它应该是页面的整个高度（这意味着我不能像任何普通滑块那样使用刻度）。

假设总高度为600px，手柄位置是随机生成的。

我希望能够知道手柄掉落在哪个部分（由手柄位置给出）。

下面sn-p中的方法我用过，但是觉得效率不是很高。

有人能告诉我是否有更好的方法吗？甚至是为此而存在的数组运算符？

const interval = 600; // Slider total size
const segmentsNb = 10; // Total number of segments
const segmentSize = interval / segmentsNb; // Size of a single segment

function doTheThing() {
  const nb = (Math.random() * 600); // random number generation to simulate slider handle pos
  let pos = -1;
  let index = 0;
  
  do {
     if (nb > segmentSize * (index + 1)) {
       index++;
       continue;
     }
     pos = index;
  } while(pos === -1 && index <= segmentsNb);
  
  console.log('number is', Math.round(nb), 'at position', pos);
}

<button onclick="doTheThing()">Do something</button>

Answer 1

你可以拿

Math.floor(nb / segmentSize)

如你所见。也许你需要调整

const interval = 600; // Slider total size
const segmentsNb = 10; // Total number of segments
const segmentSize = interval / segmentsNb; // Size of a single segment

function doTheThing(nb) {
  //const nb = (Math.random() * 600); // random number generation to simulate slider handle pos
  let pos = -1;
  let index = 0;
  
  do {
     if (nb > segmentSize * (index + 1)) {
       index++;
       continue;
     }
     pos = index;
  } while(pos === -1 && index <= segmentsNb);
  
  return [pos, Math.floor(nb / segmentSize)].join(' ');

}

for (var i = 0; i <= 600; i++) document.getElementById('out').innerHTML += [i, doTheThing(i)].join(' ') + '\n';

<pre id="out"></pre>

Answer 2

您可以执行相同的过程来获得职位：

Math.ceil((segmentsNb / interval) * nb))

这应该返回正确的位置。