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

Question

如果我有：

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

所以现在， console.log(color); 返回red 。

我怎样才能得到

console.log(color[0])返回red[0]的内容？

抱歉，如果没有意义，我想不出一种更简单的方法来表达它。

Answer 1

不良做法：

如果数组是全局变量，则可以对window对象使用括号符号来访问数组。

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> 

更好的选择：

使用该对象来存储键值对，如下所示：

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

并使用访问数组

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

如果提供的代码在全局context （窗口）下，则可以使用[]表示法访问window对象的属性。

我建议您使用数组object ，如var obj = {red:[...],blue:[...] }以便您可以轻松访问该对象的键。

尝试这个：

 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` 

使用对象：

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

Answer 3

将代码更改为对象，然后可以使用方括号表示法

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