Javascript 数组对象未定义

Question

我有以下功能:

function get_stoplight_color(count, position) {
    console.log(count + ', ' + position);

    var colors = {
        'QB' : ['#8b3a25', '#ceca63', '#68c24c', '#68c24c', '#68c24c'],
        'RB' : ['#8b3a25', '#ceca63', '#ceca63', '#ceca63', '#68c24c'],
        'WR' : ['#8b3a25', '#ceca63', '#ceca63', '#ceca63', '#ceca63'],
        'TE' : ['#8b3a25', '#ceca63', '#68c24c', '#68c24c', '#68c24c'],
        'DST' : ['#8b3a25', '#68c24c', '#68c24c', '#68c24c', '#68c24c'],
        'K' : ['#8b3a25', '#68c24c', '#68c24c', '#68c24c', '#68c24c']
    };

    console.log(colors);
    if (count <= 4) return colors.position[count];
    else return '#68c24c';
}

如您所见，我已将几个变量记录到控制台，它们在那里似乎很好。但是，在运行时我收到以下错误:

未捕获类型错误:无法读取未定义的属性“4”

(此时 count = 4。)

同样，对象 colors 显然存在，因为 console.log(colors) 输出:

Object {QB: Array[5], RB: Array[5], WR: Array[5], TE: Array[5], DST: Array[5]…}

因此，当 position = 'QB' 且 count< 时，我希望 colors.position[count] 返回 #68c24c/ = 4。

为什么在这种情况下对象仍然返回undefined？谢谢，如有必要，我将提供更多详细信息(我已经预先提供了我想到的所有内容)。

Answer 1

表达式colors.position[count]使用colors上的position属性。我认为您的意思是 colors[position][count]，它将查找由变量 position 命名的属性(例如 QB)改为使用 colors，然后在结果中查找由 count 命名的属性(例如 4)。

如果有可能未定义position，我会在最后稍微更改一下该位。而不是:

if (count <= 4) return colors.position[count];
else return '#68c24c';

也许:

return (colors[position] && colors[position][count]) || '#68c24c';

...它利用了 JavaScript 的 curiously-powerful || and && operators .

<小时/>

在下面回复您的评论:

Wow, OK, that worked, but I'm not sure how? I didn't even try that since I view [] operands as indexes of an array, while colors is an object (not an array).

在 JavaScript 中(与许多语言不同)，您可以通过两种方式访问​​对象属性:

1. 使用点表示法和文字属性名称，例如obj.foo (前提是属性名称是有效的 identifier name )，或

2. 使用括号表示法和字符串属性名称，例如obj["foo"](在这种情况下，属性名称可以是任何内容，不必是有效的标识符名称)。

在第二种情况下，字符串可以来自任何表达式，包括变量查找。所以所有这些都引用 obj.foo:

obj.foo
obj["foo"]
obj["f" + "o" + "o"]
var x = "o";
obj["f" + x + x]

...事实上，这与处理数组时使用的符号相同，因为在 JavaScript 中，arrays aren't really arrays ，它们只是对象。