使用变量名称字符串访问变量值-JavaScript

Question

If I have:

var red = ["#F33121", "#F06562", "#90A4AE"]; //my array called red.
var blue = ["#345678", "#234423", "#435223"]; //my array called blue.
var color = $('.element').text(); // = red

So now, console.log(color); returns red .

How can I get

console.log(color[0]) to return the contents of red[0] ?

Sorry if it doesn't make sense, I can't think of a simpler way to put it.

Answer 1

Bad practice:

If the arrays are global variables you can use bracket notation with window object to access the array.

window[color][0]

 var red = ["#F33121", "#F06562", "#90A4AE"]; //my array called red. var blue = ["#345678", "#234423", "#435223"]; //my array called blue. $('input').on('keyup', function() { var color = $.trim($(this).val()); $('pre').html(window[color] ? JSON.stringify(window[color], 0, 4) : 'No color found'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input type="text" /> <pre></pre> 

Better alternative:

Use the object to store the key-value pair as follow:

var colors = {
    red: ["#F33121", "#F06562", "#90A4AE"],
    blue: ["#345678", "#234423", "#435223"]
};

and access the array using

colors[color]

 var colors = { red: ["#F33121", "#F06562", "#90A4AE"], blue: ["#345678", "#234423", "#435223"] }; $('input').on('keyup', function() { var color = $.trim($(this).val()); $('pre').html(colors[color] ? JSON.stringify(colors[color], 0, 4) : 'No color found'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input type="text" /> <pre></pre> 

Answer 2

If provided code is under the global context (window), you can access property of the window object using [] notation.

I suggest you to have object of arrays like var obj = {red:[...],blue:[...] } so that you can easily access the key of the object.

Try this:

 var red = ["#F33121", "#F06562", "#90A4AE"]; var blue = ["#345678", "#234423", "#435223"]; var color = 'red' console.log(window[color][0]);//will not work if variables are local and do not belong to `window` 

Using object:

 (function() { var input = { red: ["#F33121", "#F06562", "#90A4AE"], blue: ["#345678", "#234423", "#435223"] } var color = 'red' console.log(input[color][0]); })(); 

Answer 3

Change your code to be an object and you can just use bracket notation

var colors = { 
    red : ["#F33121", "#F06562", "#90A4AE"], 
    blue : ["#345678", "#234423", "#435223"]
};
var color = $('.element').text(); 
console.log(colors[color]);