JavaScript create two dimensional array

I’m new to JavaScript, I’m trying to solve leetcode question 37. I need to a create a blank two dimensional array, I initially used the method in the comments; however, it doesn’t work correctly, it will change all the value. Then, I used the for loop method to create array and currently it worked correctly. But I still cannot figured out why this will happen, could anyone explain the reason why this will happen, is this because of shallow copy?

var solveSudoku = function (board) {
    // let rows = new Array(9).fill(new Array(10).fill(0)),
    let rows = new Array(9);
    for (let i = 0; i < 9; i++) {
        rows[i] = new Array(10).fill(0);
    }
    let cols = new Array(9);
    for (let i = 0; i < 9; i++) {
        cols[i] = new Array(10).fill(0);
    }
    let boxes = new Array(9);
    for (let i = 0; i < 9; i++) {
        boxes[i] = new Array(10).fill(0);
    }
    // let cols = new Array(9).fill(new Array(10).fill(0)),
    //     boxes = new Array(9).fill(new Array(10).fill(0));

    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            let c = board[i][j];
            if (c !== '.') {
                let n = parseInt(c),

                    bx = Math.floor(j / 3),
                    by = Math.floor(i / 3);
                //                 0代表为使用，1为使用过
                rows[i][n] = 1;
                console.log(i, n)
                cols[j][n] = 1;
                //                     box索引
                boxes[by * 3 + bx][n] = 1;
            }
        }
    }
    
    fill(board, 0, 0)
    
    function fill(board, x, y) {
        //     完成填充条件
        if (y === 9) return true;   
        //     下一个点的坐标
        let nx = (x + 1) % 9,
            //         判断进入是否下一行
            ny = (nx === 0) ? y + 1 : y;
        //     如果已经填充，则进入下一个点
        if (board[y][x] !== '.') return fill(board, nx, ny);
        //  没有被填充过
        for (let i = 1; i <= 9; i++) {

            let bx = Math.floor(x / 3),
                by = Math.floor(y / 3),
                box_key = by * 3 + bx;
            if (!rows[y][i] && !cols[x][i] && !boxes[box_key][i]) {
                rows[y][i] = 1;
                cols[x][i] = 1;
                boxes[box_key][i] = 1;
                board[y][x] = i.toString();
                console.log(board[y][x])
                //                 递归向下一个点求解
                if (fill(board, nx, ny)) return true;
                //                 恢复初始状态
                board[y][x] = '.';
                boxes[box_key][i] = 0;
                rows[y][i] = 0;
                cols[x][i] = 0;
            }
        }
        return false;
    }
    console.log(board);
};

Answer

The problem with fill(), at least with object, is that it passes the same object, by reference, to all element of the array. So if you mutate this object, then it will mutate every object of every arrays.

Note that in your case, you are creating a new Array object using it’s constructor ( new Array() ) which makes them objects.

const matrix = new Array(5).fill(new Array(5).fill(0));
console.log(matrix);

In the previous snippet, you can see that the values of the other rows, from the second one to the end, are reference to the initial row.

To get around that, you can fill you array with empty values and then use the map() to create unique object for each position in the array.

const matrix = new Array(5).fill().map(function() { return new Array(5).fill(0); });
console.log(matrix);

As you can see in the previous snippet, all the rows are now their unique reference.

This is the reason all of your values were changed.

I’ve applied this solution to your code. I wasn’t able to test it, because I wasn’t sure of the initial parameters to pass.

I’ve also used anonymous function here ( function() { return; } ), but I would success using arrow function ( () => {} ) instead, if you are comfortable with them. It’s cleaner.

var solveSudoku = function (board) {
    let rows = new Array(9).fill().map(function() { return new Array(10).fill(0); }),
      cols = new Array(9).fill().map(function() { return new Array(10).fill(0); }),
      boxes = new Array(9).fill().map(function() { return new Array(10).fill(0); });

    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            let c = board[i][j];
            if (c !== '.') {
                let n = parseInt(c),

                    bx = Math.floor(j / 3),
                    by = Math.floor(i / 3);
                //                 0代表为使用，1为使用过
                rows[i][n] = 1;
                console.log(i, n)
                cols[j][n] = 1;
                //                     box索引
                boxes[by * 3 + bx][n] = 1;
            }
        }
    }
    
    fill(board, 0, 0)
    
    function fill(board, x, y) {
        //     完成填充条件
        if (y === 9) return true;   
        //     下一个点的坐标
        let nx = (x + 1) % 9,
            //         判断进入是否下一行
            ny = (nx === 0) ? y + 1 : y;
        //     如果已经填充，则进入下一个点
        if (board[y][x] !== '.') return fill(board, nx, ny);
        //  没有被填充过
        for (let i = 1; i <= 9; i++) {

            let bx = Math.floor(x / 3),
                by = Math.floor(y / 3),
                box_key = by * 3 + bx;
            if (!rows[y][i] && !cols[x][i] && !boxes[box_key][i]) {
                rows[y][i] = 1;
                cols[x][i] = 1;
                boxes[box_key][i] = 1;
                board[y][x] = i.toString();
                console.log(board[y][x])
                //                 递归向下一个点求解
                if (fill(board, nx, ny)) return true;
                //                 恢复初始状态
                board[y][x] = '.';
                boxes[box_key][i] = 0;
                rows[y][i] = 0;
                cols[x][i] = 0;
            }
        }
        return false;
    }
    console.log(board);
};