Loop arrays to set value = vals[0] || vals[1] || vals[2] in jQuery

I have two arrays. For example:

var bool = [true, false, true];
var vals = ['hi','med','lo'];

Using jQuery, I'd like to loop through them so that I can test each bool, and set a var equal to the highest a开发者_JAVA百科vailable value from the vals array after the first true from the bool array:

var value = ( bool[0] ) ? vals[0] || vals[1] || vals[2] :
                        ( bool[1] ) ? vals[1] || vals[2] : vals[2] ;

I'd like to make this work in a way that the arrays could have more values (but the size of the one would always match each.) Is it possible to pull this off with an .each function?

How about Array.indexOf:

var bool = [true, false, true];
var vals = ['hi','med','lo'];

var result = vals.slice(bool.indexOf(true));

var finalValue = result.reduce(function (a,b) {return a || b} );

This needs to be shimmed for IE8 and below, but there's a nice shim in that link above.

So slice the values array from the index of the first true. Then reduce the sliced array until you reach the first truthy value.

EDIT: It appears that you need the first truthy value from vals and bool. Here's a solution that doesn't require any functions.

var value, i = 0;

while( !bool[i] && ++i < bool.length );

while( !(value = vals[i]) && ++i < vals.length );

I misunderstood the question to think that the arrays need to be truthy at the same indices. Now I see that the first true bool index is just the starting point for vals. Fixed.

To explain, we have two while loops. In both of them, the typical {...} block statement has been replaced by an ; empty statement. This is because all the work is done by the expressions between the (...).

The first loop simply increments i until a truthy value is found in bool. That sets i to the starting point for the second loop.

The second loop does the same thing as the first, except that each time the expression runs, it sets the current val[i] to the value variable. It does this as long as value is assigned a "falsey" value.

This is effectively the same as your val[0] || val[1] || val[2] part, except it will always begin wherever the bool loop left i.

So once value gets a "truthy" value, or i exceeds the last index in the vals array, the loop will quit. At this point, value will hold either the "truthy" value that was found, or undefined if none was found.

As a function:

DEMO: http://jsfiddle.net/W9uBb/

function filterValsFromBools(bool, vals) {
    var value, i = 0;

    while (!bool[i] && ++i < bool.length);

    while (!(value = vals[i]) && ++i < vals.length);

    return value;
}

var a = filterValsFromBools(
    [true, false, true], 
    ['hi', 'med', 'lo']
);

var b = filterValsFromBools(
    [false, true, true], 
    ['hi', 'med', 'lo']
);

var c = filterValsFromBools(
    [false, true, true], 
    ['hi', 0, 'lo']
);

console.log( a, b, c );  // "hi" "med" "lo"

See jQuery.each. The important parts are:

The signature...

jQuery.each( collection, callback(indexInArray, valueOfElement) )

...and how to "break":

We can break the $.each() loop at a particular iteration by making the callback function return false.

var bool = [true, false, true];
var vals = ['hi','med','lo'];
var result
jQuery.each(bool, function (index, val) {
   if (val) { // or val === true or whatever
     // got it, save value, stop iterating
     result = vals[index]
     return false
   }
})

Happy coding.

Try this:

var goal;
var bools = [true, false, true];
var vals = ['high', 'med', 'lo'];
jQuery.each(vals, function(i, value) {
    if (bools[i] === true) // or use if (bools[i]) but that will also be true for "truthy" non-bools
    {
        goal = value;
        return false; // this breaks from the each loop
    }
});