不获取javascript中函数的预期返回值

Question

我是个javascript新手。我的sudoku游戏有一个9*9网格。html是这样的，网格中的每个框都是一个id类似于input的r1c4元素，其中1是行编号，4是列编号。我已经填充了一半的网格，我需要将所有数字存储在一个two多维array.I中，它创建了以下函数：

function getValues(){

    var grid = new Array();
    var colData = new Array();
    var targetId;

    for(var i=1;i<=9;i++)
    {
        for(var j=1;j<=9;j++)
        {   
            targetId = 'r' + i + 'c' + j;
            colData[j-1] = document.querySelector('#'+targetId).value;

        }
        grid[i-1] = colData;
        console.log(grid[i-1]); // here logged correctly
    }
    return grid; // here returned wrong
} 

我面临的问题是，返回的数组只包含最后一个重复了9次的元素。我每次使用console.log(grid[i-1]);记录存储的值，结果是正确的，我没有得到它。

致以问候。

Answer 1

grid[i-1] = colData;

您不是将colData复制到grid[i-1]，而是简单地将grid[i-1]作为对colData的引用。因此，数组中的所有元素都只是对同一个对象colData的引用。

要解决这个问题，您需要在每次迭代中创建一个新的Array。所以，我会这样做的

function getValues() {
    var grid = [], colData, targetId;

    for (var i = 1; i <= 9; i++) {
        colData = [];      // new Array on every iteration
        for (var j = 1; j <= 9; j++) {
            targetId = 'r' + i + 'c' + j;
            colData.push(document.querySelector('#' + targetId).value);
        }
        grid.push(colData);
    }
    return grid;
}

Answer 2

您需要在每次迭代中创建一个新的colData，而不是每次使用相同的。

for(var i=1;i<=9;i++)
{
  var colData = new Array();
   ...

Answer 3

尝试在colData = new Array() for循环中移动i (或者更好的是colData = [];)。

或者使用grid[i-1] = colData.slice(0);。

无论哪种方式，您都需要为每一行创建一个新数组，而不仅仅是重用旧的数组。