这个 JavaScript 多维数组有什么问题？

Question

我正在使用数字和形状构建一个简单的基于数学的游戏。我正在尝试创建一个 javascript 多维数组，但我很难过。 数组键用于引用 CSS 样式，数组值是数字，以便我可以将它们用于数学计算。

我无法访问数组中的元素。这就是我的多维数组目前的样子。

var sides = [{'1':1},{'3':3},{'3a':3}];

上面的数组将引用以下形状（其中 a 表示该形状是颠倒的）。它们使用下面的 CSS 显示。

.sides-1 {
    background: url(../img/shape_1.png);
}

.sides-3 {
    background: url(../img/shape_3.png);
}

.sides-3a {
    background: url(../img/shape_3a.png);
}

我还使用下面的 CSS 定义了在形状内显示的数字：

.number-1 {
    background: url(../img/number_1.png);
}

.number-2 {
    background: url(../img/number_2.png);
}

在 for 循环 I 中，我使用以下代码计算出要显示的形状和数字：（这是伪代码，仅供参考）

for(i = 0; i < 15; i++) {
    <div class='col-xs-4 num'>
        <div class='cont'>
            <div class='sides-" + sides[0] + "'></div>
            <div class='number-" + number + "'>" + (number*sides[1]) + "</div>
        </div>
    </div>
}

<div class='sides-" + sides[0] + "'></div>

这应该显示适当的形状，如下所示：

我目前遇到的问题是，当我计算乘法时出现 NaN 错误，并且形状未显示，这表明我没有正确引用数组。 p>

Answer 1

问题

你所拥有的实际上是一个对象数组。 [] 用于数组，{} 用于对象。

当您尝试访问sides[1] 时，您将获得对象{'3':3}，因为它是索引1 处的项目。

有很多方法可以解决这个问题，这里有几个：

---

多维数组方法

对于数组数组（多维）试试这个：

var sides = [['1', 1],['3', 3],['3a', 3]];

并像这样使用它：

<div class='sides-" + sides[i][0] + "'></div>
<div class='number-" + number + "'>" + (number * sides[i][1]) + "</div>

---

对象数组方法

如果您更喜欢可读性更高的方法（在我看来），您可以坚持使用对象数组，但为您的值使用适当的属性。当然，选择权在您手中（您可以通过可重用的对象定义来更进一步），但希望这能让您了解使用对象的不同之处：

var sides = [
    { name: '1', number: 1 },
    { name: '3', number: 3 },
    { name: '3a', number: 3 }
];

你可以这样使用：

<div class='sides-" + sides[i].name + "'></div>
<div class='number-" + number + "'>" + (number * sides[i].number) + "</div>