Store a table of data in a JavaScript variable
I am making a special "calculator" which accepts user input and looks up data in a table to find a result. But I'm having trouble with how best to do this, to avoid tons and tons of if statements.
As an example, say there are some sets of radio buttons, and each combination of buttons has a unique value which I want to show the user. What sort of data structure would I use in JavaScript to account for each combination of buttons and look up the corresponding value?
Edit: upon request, here is some example data:
| Type | Color | Output value |
| small | red | 21.9 |
| small | blue | 27.3 |
| small | yellow | 26.8 |
| large | red | 19.2 |
...
The user is then presented with two radio sets or dropdowns, one for type and one for color. Upon choosing the combination and pressing the button, the output value is sho开发者_如何学JAVAwn.
In my specific case I have a table with 4 different columns and many combinations. It looks like an array will do, but if it's an array of objects then I have to type the column names on every row (i.e.: {type: 'small', color: 'red', output: 21.9}, ...
) -- is there a way to keep the associative nature of objects with the compact array syntax such as ['small','red',21.9]
?
Something like this?
var table = [
["High", 1, 2, 1, 0],
["Medium", 0, 1, 3, 2],
...
]
The first element in each array is the result of your "calculator"; the subsequent ones represent the selected indices of each set of radio buttons (though they could be the radio buttons' values too).
So say the user selects these radio buttons:
var selection = [0, 1, 3, 2];
Then iterate through the table
, slicing each "row" to exclude the first element, and doing an array compare with selection
:
for (var i = 0, row; row = table[i]; i++) {
var sRow = row.slice(1);
// Array compare sRow and selection (function arrayEqual not included)
if (arrayEqual(sRow, selection)) {
return row[0];
}
}
// Will return "Medium"
Update: Using the poster's example data, the table would look like:
var table = [
[21.9, "small", "red"],
[27.3, "small", "blue"],
...
]
Maybe not be the best solution in terms of memory but very fast to look up, would be a lookup table like so:
var table = {
'small': {
'red': ...,
'blue': ...
},
'large': {
'red': ...,
'blue':...
},
...
}
Then you could access a value with just:
var value = table[type][color]
The drawback is that you have to repeat a lot of properties. But if you have not so many different values then this would be ok I think.
If you want to save memory, the best way would be to figure out some formula, assign numbers to your text values and compute the values on the fly (and cache the results).
An object, I guess?
var states = {
state1: value1,
state2: value2,
state3: value3,
(etc)
}
Well, we're working with JavaScript, so your choices are Arrays and Objects. The key factor determining which you should use is probably based on how you want to look things up. Arrays will have numeric indexes and must be sequential starting at 0, while Objects use Strings as their indexes (keys) and can contain anything you want them to.
If you're interested in a database-like library of sorts for JavaScript I'd look at TaffyDB. It allows you to query collections by passing in objects that represent the conditions that determine what you want returned.
A better option might be to keep the table in a string form, just like you've posted it:
table =
" small red 21.9" +
" small blue 27.3" +
" small yellow 26.8" +
" large red 19.2"
For searching for a specific value you can use regular expressions, for example:
function find(type, color) {
var re = new RegExp("\\b" + type + "\\s+" + color + "\\s+(\\S+)", "m");
var m = table.match(re)
return m ? m[1] : null;
}
The advantages of this method are 1) the "database" remains readable and easy to maintain 2) regexps will probably be faster than looping through nested arrays.
精彩评论