在数组值之间的范围内发生某些行为？答案

【问题标题】：Having certain behavior occur within the ranges between array values?在数组值之间的范围内发生某些行为？
【发布时间】：2018-05-18 00:04:21
【问题描述】：

我有一个值数组，特别是某种元素的像素偏移量。

假设它们位于数组arrScroll[] 中，值为[5, 10, 15, 50, 100, 250]。

如果我的窗口滚动超过 5 像素但没有超过 10 像素，我得到索引 0。如果我的窗口滚动超过 15 像素但没有超过 50 像素，我得到索引 2。如果它回滚到 10 像素以下但没有低于 5，我又得到索引 0。

我正在尝试做的是找到一种优雅的方式（而不是每个可能范围的大量条件，因为范围的数量可以改变）始终获得滚动范围的两个索引中的较低者我在，除了在 0 到 arrScroll[0] 的范围内，在这种情况下，我传递的值与索引不同。

另一个例子：如果我在arrScroll[3]和arrScroll[4]的范围内，那么我将获得索引3。只有通过更高索引号的位置，我才能获得它的索引。

这与排序无关，因为值已经从小到大排序。在滚动事件侦听器上，我只想获取组成索引的两个值中较低者的索引。

最好的组织方式是什么，以便它可以用于任意长度的数组？

更完整的例子：

我有红色、蓝色和绿色。我有一个值[100, 200, 300] 的数组。当我的窗口滚动超过 100 像素但不超过 200 像素时，我将看到类似 $(element).css('background-color', colorArr[index]) 的内容，其中索引 0 处的 colorArr[] 中的颜色为红色。

然后，如果窗口滚动超过 200，但不超过 300，我运行相同的代码 sn-p，但索引现在为 1，颜色为蓝色。

如果我向后滚动到 200 像素以下但不低于 100 像素，则索引再次为 0，传递的颜色为红色。

如果数组的长度已知，则使用 if 语句创建是微不足道的，但我不知道如何为任意长度的数组创建。

【问题讨论】：

您想要较低的索引，还是该索引处的较低值？
Sort by two values prioritizing on one of them的可能重复
@Taplar 没关系，只要我有较低的索引，我就可以从数组中提取值。
@ThomasEdwards 这与排序无关，因为值已经排序。
这实际上没有意义，因为数组已经排序，较小的索引总是获胜。

标签： javascript jquery

【解决方案1】：

如果我没记错的话，您是在寻找基于值的索引吗？

let arr = [5, 10, 15, 50, 100, 250];
let colorArr = ["red", "blue", "green", "yellow", "orange", "black"]
//fake listener
let scrollListener = (pixelScrolled) => {
   let index = (arr.findIndex((element)=>pixelScrolled<element)+arr.length)%(arr.length+1);
   $(document.body).css('background-color', colorArr[index])
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="(()=>scrollListener(9))()">fake scroll toggle : 9</button>
<button onclick="(()=>scrollListener(49))()">fake scroll toggle : 49</button>
<button onclick="(()=>scrollListener(250))()">fake scroll toggle :  250</button>

【讨论】：

工作就像一个魅力！谢谢！

【解决方案2】：

我会从头开始迭代你的 arrScroll 值，假设你的偏移量总是按递增的顺序排序，一旦你的测试位置大于测试的索引就会中断

var test = function (position, offsets) {
    for (var index = 0; index < offsets.length - 1; index++) {
      if (position < offsets[index]) break;
    }
    
    return index > 0 ? index - 1 : 'something';
}

// will return index 1 cuz 4 is bw 1 and 5
console.log(test(4, [0, 1, 5, 10, 20, 42]))

// will return 3
console.log(test(12, [0, 1, 5, 10, 20, 42]))

// would return 0, but would return "something" since this is your special case
console.log(test(16, [20, 100]))

这样你只迭代你的部分偏移数组，尽快退出

【讨论】：