如何在JavaScript对象构造函数中正确声明多维数组？

Hey there! Let's tackle your two questions about multi-dimensional arrays in JavaScript constructor functions clearly and with practical examples.

You can work with multi-dimensional arrays (like 2D grids, matrices, or game boards) in a constructor in a few straightforward ways, depending on whether you need an empty structure or pre-filled values.

Initializing an empty multi-dimensional array #

If you need to create a dynamic size (e.g., a grid with rows and cols parameters), use nested loops to build each row as a separate array:

function Matrix(rows, cols) {
  // Initialize the outer array
  this.grid = [];
  
  for (let i = 0; i < rows; i++) {
    // Create a new inner array for each row
    this.grid[i] = [];
    for (let j = 0; j < cols; j++) {
      // Fill each cell with a default value (here, 0)
      this.grid[i][j] = 0;
    }
  }
}

// Usage example
const my3x3Matrix = new Matrix(3, 3);
console.log(my3x3Matrix.grid); // Outputs a 3x3 grid filled with 0s

Using pre-filled multi-dimensional arrays #

If you know the initial values upfront, you can directly assign a literal multi-dimensional array to the instance property:

function TicTacToeBoard() {
  // Pre-defined 3x3 game board
  this.board = [
    ['X', '', 'O'],
    ['', 'X', ''],
    ['O', '', '']
  ];
}

const gameBoard = new TicTacToeBoard();
console.log(gameBoard.board[0][2]); // Outputs 'O'

The key here is avoiding a common pitfall: accidentally creating rows that reference the same array (which leads to unexpected behavior when modifying values). Let's break down what to avoid and what to do instead.

❌ What NOT to do #

Using Array.fill() directly to populate rows will make all inner arrays reference the same object. Changing one cell will affect all rows:

// Bad practice: Shared array references
function FlawedMatrix(rows, cols) {
  this.grid = Array(rows).fill(Array(cols).fill(0));
}

const badMatrix = new FlawedMatrix(2, 2);
badMatrix.grid[0][0] = 5;
console.log(badMatrix.grid[1][0]); // Outputs 5 (unintended!)

✅ Correct approaches #

Option 1: Use Array.from() to create independent rows

Array.from() lets you generate a new array and map each element to a fresh inner array:

function ProperMatrix(rows, cols) {
  this.grid = Array.from({ length: rows }, () => Array(cols).fill(0));
}

const goodMatrix = new ProperMatrix(2, 2);
goodMatrix.grid[0][0] = 5;
console.log(goodMatrix.grid[1][0]); // Outputs 0 (correct!)

Option 2: Nested loops (explicit and easy to read)

If you prefer more explicit code, stick with nested loops as shown in the first section—it's foolproof and avoids reference issues:

function ClearMatrix(rows, cols) {
  this.grid = [];
  for (let i = 0; i < rows; i++) {
    this.grid.push([]); // Add a new empty row
    for (let j = 0; j < cols; j++) {
      this.grid[i].push(0); // Fill the row with values
    }
  }
}

Option 3: Add rows dynamically with a method

If you need to build the multi-dimensional array after initialization, add a method to the constructor that pushes new, independent rows:

function DynamicGrid() {
  this.grid = [];

  // Method to add a row with custom values
  this.addRow = function(rowValues) {
    // Use the spread operator to create a copy of the input array
    this.grid.push([...rowValues]);
  };
}

const myGrid = new DynamicGrid();
myGrid.addRow([1, 2, 3]);
myGrid.addRow([4, 5, 6]);
console.log(myGrid.grid[1][1]); // Outputs 5

Quick recap #

• Always ensure each inner array in your multi-dimensional structure is a separate instance (no shared references)
• Use nested loops, Array.from(), or literal assignments for safe initialization
• Avoid Array.fill() for creating inner arrays unless you intentionally want shared references (rare case)

内容的提问来源于stack exchange，提问作者scifi6546