Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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);
 };

Draft saved

Draft discarded

Edit Summary*

Cancel

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

JavaScript create two dimensional array

Answer*