更改对象的属性，即使它们应该通过Value传递

Question

我当时在做一个小JavaScript项目，以制作基于图块的游戏（不用做作业，不用担心！），但是我的“ tile”类遇到了问题。

每个“平铺”都具有X和Y属性，因为其在网格上的X和Y位置。网格存储为这些图块的二维数组。磁贴的构造如下：

class tile {
    constructor(x,y) {
        this.x = x;
        this.y = y;
        console.log(`Genned Tile: ${x} , ${y}`);
    }
}

还有一个小的日志消息

因此，我写了一个小循环，用“ tile”对象填充数组：

for (var x = 0; x < width; x++) {
    for (var y = 0; y < height; y++) {
        tiles[x,y] = new tile(x,y);
    }
}

宽度和高度都设置为5。这应该填充插槽0-4。

但是，显示图块时，X坐标是错误的！我将附上片段，向您展示我的意思

class tile {
    constructor(x,y) {
        this.x = x;
        this.y = y;
        console.log(`Genned Tile: ${x} , ${y}`);
    }
}

Y坐标看起来正确，但是X坐标仍然为4！记录消息似乎告诉我，它在构造函数中输入了正确的数字，因此我不确定X坐标为什么会像这样更改。我做了一些研究，发现“ x”和“ y”数字应该按值传递（它们是基元），因此循环中对“ x”和“ y”的任何更改都不会影响我的课程，对吧？

任何帮助将不胜感激。

谢谢阅读！:)

Answer 1

这些都不适用于JavaScript：

var tiles = new Array(width,height);
// ...
tiles[x,y] = new tile(x,y)

这种符号在其他语言中有效，但在JavaScript（或Java或类似语言）中无效。

在JavaScript中，没有多维数组。相反，存在arrays的数组。您创建一个数组：

var tiles = [];

然后将数组放入其中：

tiles[x] = [];

然后在其中放置磁贴：

tiles[x][y] = new tile(x, y);

实时示例，请参见以下***行：

var tiles = new Array(width,height);
// ...
tiles[x,y] = new tile(x,y)

var tiles = [];

旁注：JavaScript中的压倒性约定是，构造函数（用调用的函数new）以大写字母开头。因此，Tile而不是tile。

您可能想知道，如果这些不正确：

var tiles = new Array(width,height);
// ...
tiles[x,y] = new tile(x,y)

...为什么它们不引起语法（或其他）错误？

原因是它们都是有效的，只是没有按照您的预期去做（以及他们在某些其他语言中会做的事情）。

这个：

var tiles = new Array(width,height);

创建在其与两个条目的阵列（的值width和height）：

tiles[x] = [];

编写它的更好方法（如果您想这样做）将是：

var tiles = [width, height];

几乎没有任何理由Array在JavaScript中调用构造函数，这有点令人困惑：如果用一个数字参数调用它，它将使用该参数的值作为数组长度来创建一个空数组（听起来很奇怪，但是JavaScript的数组可以是稀疏的，因此长度为[say] 10，但没有条目是JavaScript数组的有效状态）。如果您传递了多个参数（“示例1”）或一个不是数字的参数（“示例2”），则会将其参数作为要放入数组的初始值，因此new Array(width, height)创建了一个包含两个值的数组。

这个比较棘手：

tiles[x,y] = new tile(x,y)

JavaScript有一个不寻常的运算符：逗号运算符。它评估其左手操作数，丢弃该结果，评估其右手操作数，并将右手结果作为其结果。这样tile[x,y]实际上是有效的tile[y]，因为尽管x对其进行了评估，但其结果却被丢弃了，并且仅y用于查找数组中的条目。例：

tiles[x][y] = new tile(x, y);