Get the next and previous element of an array given an index

Question

Given I have an array in Javascript, with values as such;

0     => 0x0000FF
1200  => 0x00CCFF
28800 => 0xFF0AFF
36000 => 0xFFFFFF

How can I determine which elements a given index value falls between? With the previous example, if I have the value 31073, I need to retrieve 28800 => 0xFF0AFF and 36000 => 0xFFFFFF

Answer 1

There's no "built-in" way to accomplish this with Javascript's sparse arrays. The simplest way to do this for arbitrary sparse indexes while maintaining some efficiency is to keep another lookaside sorted array of the indexes into the main array. Then you can walk the lookaside list to find the right neighbor indexes, and go back to the main array to get their values.

If your array will be huge or accesses need to be faster than O(items), you could look into various tree structures for the lookaside object.

Answer 2

Here's one way that simply uses a couple while() loops with no body.

It assumes the starting point will always be in between. You'll need a couple of quick additional tests if that's not the case.

Also, I wasn't sure what should happen if the starting point is directly on a color, so I didn't account for that.

Example: http://jsfiddle.net/tcVxP/4/

var num = 31234,
    curr = num,
    prev,
    next;

while( !colors[--curr] && curr );
prev = colors[curr];

curr = num;
while( !colors[++curr] );
next = colors[curr];

Answer 3

I just wanted to follow up here;

Thanks to both quixoto and patrick dw for your detailed comments and answers. I have however, gone with a slightly different solution. While I wanted to maintain my initial approach of using a one dimensional array, it's much easier and efficient from what I can see, to add another dimension as shown below. The array used here does exhibit predictability, but that may not be the case once the project is finalized.

var colors = [  
    [0,     '121D4A'],
    [10800, '000000'],
    [21600, 'FF5900'],
    [32400, 'D3EEF0'],
    [43200, '7DCDFF'],
    [54000, '7DA6FF'],
    [64800, 'FF5900'],
    [75600, '31428C'],
    [86399, '121D4A'],
];

function gradientStop(color1, color2, gradStop){
    var r = Math.floor(gradStop * parseInt(color2.substr(0, 2), 16) + (1 - gradStop) * parseInt(color1.substr(0, 2), 16)).toString(16);
    var g = Math.floor(gradStop * parseInt(color2.substr(2, 2), 16) + (1 - gradStop) * parseInt(color1.substr(2, 2), 16)).toString(16);
    var b = Math.floor(gradStop * parseInt(color2.substr(4, 2), 16) + (1 - gradStop) * parseInt(color1.substr(4, 2), 16)).toString(16);
    return (r.length < 2 ? '0' + r : r) + (g.length < 2 ? '0' + g : g) + (b.length < 2 ? '0' + b : b);
}

function getColor(colors, currentIndex){
    for(var i = 0, m = colors.length; i < m; i++){
        if(currentIndex >= colors[i][0]){
            if(typeof(colors[i + 1]) !== 'undefined'){
                if(currentIndex <= colors[i + 1][0]){
                    return gradientStop(colors[i][1], colors[i + 1][1], (currentIndex - colors[i][0]) / (colors[i + 1][0] - colors[i][0]));
                }
            }
        }
    }
}

And also; Yes Hemlock it was an expansion on my question at Programmatic gradient stops with Javascript , hence the gradientStop() function.