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

I am building a simple maths based game using numbers and shapes. I am trying to create a javascript multidimensional array but I am stumped. The array keys are to be used to refer to CSS styles and the array values are numbers so that I can use them for mathematical calculations.

我正在构建一个基于数字和形状的简单数学游戏。我正在尝试创建一个javascript多维数组，但我被难住了。数组键用于引用CSS样式，数组值是数字，因此我可以用它们进行数学计算。

I am having trouble in accessing the elements in the array. This is what my multidimensional array looks like currently.

我在访问数组中的元素时遇到了麻烦。这就是我的多维数组当前的样子。

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

The above array would refer to the following shapes (where a denotes that the shape is upside down). They are displayed using the CSS below.

上面的数组将引用以下形状(其中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);
}

I also define what number is displayed inside the shape using the CSS below:

我还定义了什么数字显示在形状内使用CSS如下:

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

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

Within a for loop I I work out which shape and number to display using the following code: (this is pseudocode, and just to give you an idea)

在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>

This should display the appropriate shape, like the ones below:

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

The issue that I am having at the moment is that I get NaN errors when I calculate the multiplication and also the shape is not displayed which suggests that I am not referencing the array correctly.

我现在遇到的问题是，当我计算乘法时，会得到NaN错误，而且图形没有显示，这表明我没有正确地引用数组。

1 个解决方案

#1

Problem

问题

What you have there is actually an array of objects. [] is for arrays, {} is for objects.

这里有一个对象数组。[]是数组，{}是对象。

When you try to access sides[1] you are getting the object {'3':3}, as that is the item at index 1.

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

There are numerous way you could approach this problem, here are a couple of them:

有很多方法可以解决这个问题，以下是其中的几个:

---

Multidimensional Array Approach

多维数组的方法

For an array of arrays (multi-dimensional) try this:

对于数组的数组(多维)尝试如下:

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

and use it like so:

像这样使用它:

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

---

Array of Objects Approach

数组对象的方法

If you prefer a more readable approach (in my opinion) you could stick with an array of objects, but use proper properties for your values. The choice of course is yours (and you could take this much further by having reusable object definition), but hopefully this will give you an idea of the difference with using objects:

如果您喜欢更可读的方法(在我看来)，您可以使用一个对象数组，但是要为您的值使用适当的属性。选择当然是你自己的(你可以通过可重用的对象定义更进一步)，但希望这能让你了解使用对象的区别:

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

which you can use like so:

你可以这样使用:

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