Question

我遇到了一个问题，我创建了一个包含对象（“方形”）的二维数组（称为“网格”）。在这个简化的例子中，对象只跟踪选择（点击）方块的次数。

我的初始网格数据在创建之后看起来像 ......

this.grid = [   
    [{"selected":0},{"selected":0},{"selected":0}]
    ,[{"selected":0},{"selected":0},{"selected":0}]
    ,[{"selected":0},{"selected":0},{"selected":0}]  
];

目前，当点击一个正方形时，我尝试仅使用this.grid[x][y].selected += 1;之类的简单内容在一个对象中增加所选值。相反，行中的所有值都会递增，最后会以......

结束

[   [{"selected":0},{"selected":1},{"selected":0}]
    ,[{"selected":0},{"selected":1},{"selected":0}]
    ,[{"selected":0},{"selected":1},{"selected":0}]  ]

整行选择增加，而不只是一个对象。不是我想要的。：（

我认为问题在于网格的数组创建，因为如果我对网格的值进行硬编码就可以了。可能导致问题的原因是什么？解决方案是什么？

这是JavaScript代码......

function GridClass () {
    this.$grid = $('.grid');
    this.grid = [[]]; 

    this.createGrid = function () { // I think this is where the problem lies
        var baseSize = 3;
        this.grid = [];
        var blankYArray = [];
        for (var y = 0; y < baseSize; y++) {
            blankYArray.push({
                "selected" : 0
            });
        }
        for (var x = 0; x < baseSize; x++) {
            this.grid.push(blankYArray);
        }
    }

    this.selectSquare = function (x, y) {
        this.grid[x][y].selected += 1;
        this.drawGrid();
    }

    this.drawGrid = function () {
        var h = "", rowClass = "";
        var xLen = this.grid.length;
        var yLen = this.grid[0].length;
        for (var y = 0; y < yLen; y++) {
            for (var x = 0; x < xLen; x++) {
                var g = this.grid[x][y];
                h += '<div class="' + rowClass 
                + ' alt' + g.selected + '"'
                + ' data-x="' + x + '"'
                + ' data-y="' + y + '">'
                + x + "," + y + '</div>';
            }
            h += '<br />';
        }
        this.$grid.html(h);
    }

    this.createGrid();
    this.drawGrid();
}
grid = new GridClass();

grid.$grid.on("click", "div", function(e){ // Click event for each square
    var $thisSquare = $(this);
    var x = $thisSquare.data("x");
    var y = $thisSquare.data("y");
    grid.selectSquare(x, y);
});

HTML只是：<div id="gridFrame"><div class="grid"></div></div>

整个事情（包括CSS）在jsfiddle上：http://jsfiddle.net/luken/fu4yW/

Answer 1

塞尔吉奥说，每次在循环中只尝试创建一个新阵列......

for (var x = 0; x < baseSize; x++) {
        var blankYArray = [];

        for (var y = 0; y < baseSize; y++) {
            blankYArray.push({
                "selected" : 0
            });
        }

            this.grid.push(blankYArray);
        }

小提琴：http://jsfiddle.net/larsmaultsby/fu4yW/8/

Answer 2

您要多次将相同的数组添加到网格中，将代码更改为：

for (var x = 0; x < baseSize; x++) {
  this.grid.push(blankYArray.slice(0));
}

slice方法将返回原始子数组。 slice(0)只返回一个与原始值相同的新值。

<强>更新

实际上，此解决方案不适用于对象数组。原因是数组包含对象，因此方法slice将返回对新数组的引用，但该数组仍将包含对原始数组对象的引用。为了完成这项工作，您需要在每次迭代中使用不同的对象创建一个新数组（如user1133128的答案）：

for (var x = 0; x < baseSize; x++) {
    var blankYArray = [];
    for (var y = 0; y < baseSize; y++) {
        blankYArray.push({
            "selected" : 0
        });
    }
    this.grid.push(blankYArray);
}

更新2D数组中的对象值

2 个答案: