Question

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

每个“ 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坐标错误！我将附上片段，向您展示我的意思

// tile class
class tile {
    constructor(x,y) {
        this.x = x;
        this.y = y;
        console.log(`Genned Tile: ${x} , ${y}`);
    }
}

var width = 5;
var height = 5;
var tiles = new Array(width,height);

// populates array
for (var x = 0; x < width; x++) {
    for (var y = 0; y < height; y++) {
        tiles[x,y] = new tile(x,y);
    }
}

// displays each item in the array
for (var x = 0; x < width; x++) {
    for (var y = 0; y < height; y++) {
        let tile = tiles[x,y];
        console.log(`Checked Tile: ${tile.x} , ${tile.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中，没有多维数组。而是有数组数组。您创建一个数组：

var tiles = [];

，然后将数组放入其中：

tiles[x] = [];

，然后在其中放置瓷砖：

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

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

// tile class
class tile {
    constructor(x,y) {
        this.x = x;
        this.y = y;
        console.log(`Genned Tile: ${x} , ${y}`);
    }
}

var width = 5;
var height = 5;
var tiles = [];                         // ***

// populates array
for (var x = 0; x < width; x++) {
    tiles[x] = [];                      // ***
    for (var y = 0; y < height; y++) {
        tiles[x][y] = new tile(x,y);    // ***
    }
}

// displays each item in the array
for (var x = 0; x < width; x++) {
    for (var y = 0; y < height; y++) {
        let tile = tiles[x][y];         // ***
        console.log(`Checked Tile: ${tile.x} , ${tile.y}`);
    }
}

.as-console-wrapper {
  max-height: 100% !important;
}

侧面说明：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的值）的数组：

// Example 1:
const width = 5;
const height = 5;
const tiles = new Array(width,height);
console.log(tiles);  // [5, 5]

// Example 2:
const array2 = new Array("10"); // <== Note that the "10" is a string
console.log(array2); // ["10"]

一种更好的编写方式（如果您愿意的话）是：

var tiles = [width, height];

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

这个比较棘手：

new Array(width, height)

JavaScript有一个不寻常的运算符：逗号运算符。它评估其左手操作数，丢弃该结果，评估其右手操作数，并将右手结果作为其结果。因此，tiles[x,y] = new tile(x,y)实际上只是tile[x,y]，因为尽管评估了tile[y]，但其结果却被丢弃了，只有x用于查找数组中的条目。示例：

即使应通过值

1 个答案: