这个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循环中，我使用以下代码计算出要显示的形状和数字:(这是伪代码，只是为了给你一个想法）

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 错误，而且没有显示形状，这表明我没有正确引用数组。

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>