从百分比中获取数组索引？

Question

我正在开发一个Angular2滑块组件，目前的设置是滑块的值是一个百分比（基于滑块手柄从0％到100％的位置）。我有一个包含n个项目的数组，并希望根据百分比（手柄所在位置）从该数组中获取相应的索引。

这是当前拖动事件（当用户拖动滑块手柄时触发）：

handleDrag(evt, ui) {
    let maxWidth = $('#slideBar').width() - 15;
    let position = $('#slideHandle').css('left');
    position = position.replace('px', '');
    let percent = (+position / +maxWidth) * 100;
    this.year = percent;
  }

百分比计算正确，但我想知道如何构建算法以通过百分比获取数组索引。所以，如果我在50%，并且数组长度为146，则希望获取数组索引73。

有没有一种更简单的使用JavaScript实现的方法？我已经完成了一个类似的组件，其中我采用了表格方法，但想找出一种不需要向页面添加“辅助 HTML 元素”的方法。

- mwilson

Answer 1

你的想法听起来很好，因此通过使用数组的.length属性可以获得索引，具体操作如下：

var actualndex = Math.floor((array.length-1) * percentage);

// Where percentage is a value between 0 and 1

这应该返回一个在0到array.length-1之间的索引，具体取决于百分比值。

- Pineda

Answer 2

简而言之

这个答案对我没用。我做了一些实验，发现在这种情况下，Math.round比Math.floor更好，但是使用Math.floor并加入一些额外的逻辑最理想。为了达到最佳效果，请尝试以下操作：

var index = Math.min(Math.floor(array.length * percentage), (array.length-1));

简介

我知道这个问题似乎已经有答案了，但我发布另一个答案是因为使用所选答案给我的结果与预期不符，并且我想让其他人避免遇到同样的问题。

首先，我想澄清一下，如果你只需要一个近似值，而不是精确结果，所选答案将大多数情况下可行，特别是对于较大的数组。

然而，对于较小的数组，它经常不能返回预期的结果。例如，对于大小为2的数组，除非百分比恰好为100％，否则它总是返回第一个元素（索引0）。即使99％也会返回第1个元素（Math.floor((2-1) * 0.99) == 0）。实际上，只有100％才能产生最后一个索引（无论数组的大小如何）。

预期结果

通过“预期”结果，我指的是，如果一个数组有N个元素，则每个元素由0.0到1.0的1/Nth值表示。一个5个元素的数组会像这样分解：

给定的百分比	预期的索引
[0.00％，20.00％）	0
[20.00％，40.00％）	1
[40.00％，60.00％）	2
[60.00％，80.00％）	3
[80.00％，100.00％]	4

算法

我尝试了三种不同的算法，并测试了各种数组大小：

var indexFloor = Math.floor((array.length-1) * percentage);
var indexRound = Math.round((array.length-1) * percentage);
var indexCustom = Math.min(Math.floor(array.length * percentage), (array.length-1));

结果

随着数组大小的增加，所有三种算法都趋向于相同的结果，但第三种算法总是给出我所期望的结果。

看一下大小为2和5的数组的结果（不正确的结果用BOLD表示）（更美观的版本）：

百分比	向下取整 (尺寸2)	四舍五入 (尺寸2)	自定义 (尺寸2)	向下取整 (尺寸5)	四舍五入 (尺寸5)	自定义 (尺寸5)
0.00%	0	0	0	0	0	0
5.00%	0	0	0	0	0	0
10.00%	0	0	0	0	0	0
15.00%	0	0	0	0	1	0
20.00%	0	0	0	0	1	1
25.00%	0	0	0	1	1	1
30.00%	0	0	0	1	1	1
35.00%	0	0	0	1	1	1
40.00%	0	0	0	1	2	对于大小为2的情况，Round方法和自定义算法都能得到预期结果。然而，对于大小为5的情况，只有自定义算法可以得到预期结果。具体地说，Round方法有85%选择第三个元素（我希望80%以上选择最后一个元素），15%选择第二个元素（我希望需要20%）。我们在稍大的表格大小中看到类似的结果（错误结果以粗体显示）（更美观的版本）： 百分比 向下取整 (尺码为8) 四舍五入 (尺码为8) 自定义 (尺码为8) 向下取整 (尺码为10) 四舍五入 (尺码为10) 自定义 (尺码为10) 0.00% 0 0 0 0 0 0 5.00% 0 0 0 0 0 0 10.00% 0 1 0 0 1 1 15.00% 1 1 1 1 1 1 20.00% 1 1 1 1 2 2 25.00% 1 2 2 2 2 2 30.00% 2 2 2 2 3 3 35.00% 2 2 2 3 3 3 40.00% 2 3 3 3 var index = Math.min(Math.floor(array.length * percentage), (array.length-1)); 备份 所有测试过的数组大小和百分比的完整表格 我为测试制作的Excel文档

- Darrin Cullop