如何在某些范围内映射数字

Question

我有一个值范围，例如[0, 100] = [minValue, maxValue]和波段数，例如BANDS_NUMBER = 5。 所以我可以获得这些波段：

[0 - 20]
[21 - 40]
[41 - 60]
[61 - 80]
[81 - 100]

然后我想在每个范围内关联一个比例值：

i: 0   -->  [0 - 20]   -->  0.2
i: 1   -->  [21 - 40]  -->  0.4
i: 2   -->  [41 - 60]  -->  0.6
i: 3   -->  [61 - 80]  -->  0.8
i: 4   -->  [81 - 100] -->  1

此值按以下方式计算：(i + 1) / BANDS_NUMBER其中i是假设循环的索引。

然后我有一个输入n其值在范围[minValue, maxValue] = [0, 100].

我想要的是与此数字相关的比例值。 因此，例如，如果：

n = 0  --> scaleValue = 0.2 
n = 10 --> scaleValue = 0.2 
n = 20 --> scaleValue = 0.2 
n = 35 --> scaleValue = 0.4
n = 68 --> scaleValue = 0.8 
n = 99 --> scaleValue = 1
...

如何创建这样的函数？我想象这样的函数：

function map(n, minValue, maxValue, bandsNumber) {
const scaleValue = ...
return scaleValue
}

这里的所有值都是示例，我希望所有值都适用于任何其他值。

我不知道该怎么做。我需要一些帮助...

Answer 1

Nina Scholz的回答是错误的。她的规范化函数返回0.4而不是0.2值20：

function normalize(min, max, bands, n) {
return n === max
? 1
: Math.floor(1 + ((n - min) / (max - min)) * bands) / bands;
}
console.log(normalize(0, 100, 5, 20)); // expected 0.2, actual 0.4

由于20位于第一个波段，因此其值应为0.2：

i: 0   -->  [0  - 20]  -->  0.2
i: 1   -->  [21 - 40]  -->  0.4
i: 2   -->  [41 - 60]  -->  0.6
i: 3   -->  [61 - 80]  -->  0.8
i: 4   -->  [81 - 100] -->  1

正确答案是：

const index = (min, max, bands, n) =>
Math.floor(bands * (n - min) / (max - min + 1));
const band = n => index(0, 100, 5, n);
console.log(band(0),  band(20));  // 0 0
console.log(band(21), band(40));  // 1 1
console.log(band(41), band(60));  // 2 2
console.log(band(61), band(80));  // 3 3
console.log(band(81), band(100)); // 4 4

如您所见，边缘情况得到了正确处理。我们是如何得到这个答案的？

1. 首先，我们找到范围的长度，即max - min + 1。+ 1很重要，因为[0 - 100]包含的范围中有 101 个元素。
2. 接下来，我们得到给定范围内n数的索引(即n - min)。
3. 然后，我们将n的索引除以范围内的元素数量，得到范围[0 - 1)中的值。请注意，1不在范围内。
4. 最后，我们将该值乘以波段数并丢弃小数部分。结果就是我们的索引。

请注意，如果范围的长度不能被波段数整除，则前x波段将有一个附加元素，其中x是将范围的长度除以波段数的余数。

最后，我们可以通过递增结果索引，然后将其除以波段数来获得您想要的值：

const index = (min, max, bands, n) =>
Math.floor(bands * (n - min) / (max - min + 1));
const value = (min, max, bands, n) =>
(index(min, max, bands, n) + 1) / bands;
const result = n => value(0, 100, 5, n);
console.log(result(0),  result(20));  // 0.2 0.2
console.log(result(21), result(40));  // 0.4 0.4
console.log(result(41), result(60));  // 0.6 0.6
console.log(result(61), result(80));  // 0.8 0.8
console.log(result(81), result(100)); // 1 1

希望有帮助。

Answer 2

你可以采用一个公式，该公式采用范围和槽并返回一个规范化值。

由于范围有点太长(最后一个值包含在间隔中)，您需要检查最后一个值，并防止在所需间隔之外获取下一个值。

function normalize(min, max, bands, n) {
return n === max
? 1
: Math.floor(1 + ((n - min) / (max - min)) * bands) / bands;
}
// 0.2 0.2 0.4 0.4 0.8 1 1
console.log(...[0, 10, 20, 35, 68, 99, 100].map(normalize.bind(null, 0, 100, 5)));

Answer 3

您可以使用本机Array.map函数来映射每个值。

像这样：

const vals = [
[0, 20],
[21, 40],
[41, 60],
[61, 80],
[81, 100],
];
const BANDS_NUMBER = 5;
const result = vals.map((range, index) => (index + 1) / BANDS_NUMBER);
console.log(result);