Javascript Array.fill和创建数组的for循环之间有什么区别

我正在使用React.js创建一个地牢爬虫游戏，我正在使用Array.fill（0）初始化棋盘。但是当我在2d数组中设置一个元素时，它会将整个数组（列）设置为

'player'

，而不是单个元素。我还有一个

createBoard（）

函数，注释掉了，它可以正常工作。那么，为什么会发生这种情况？如何正确使用Array.fill

这是我的电路板组件：

import React, {Component} from 'react';
import Cell from './Cell';

class Board extends Component {
  constructor(props) {
    super(props);
    const dim = 10;
    let board = this.createBoard(dim, dim);
    this.state = {
      board: board,
    };
  }

  createBoard = (row, col) => {
    return Array(row).fill(Array(col).fill(0));
  }

  // createBoard = (rows, cols) => {
  //   let board = [];
  //   for (let i = 0; i < rows; i++) {
  //     let row = [];
  //     for (let j = 0; j < cols; j++) {
  //       row.push(0);
  //     }
  //     board.push(row);
  //   }
  //   console.log(board);
  //   return board;
  // }

  movePlayer = () => {

  }

  componentDidMount() {
    this.setPiece(this.props.player);
  }

  setPiece = (loc) => {
    let brd = this.state.board;
    const row = loc[0];
    const col = loc[1];
    console.log('row: '+row+' col: '+col+' ==='+brd[row][col]);
    brd[row][col] = 'player';
    console.log('setPiece: ',brd);
    this.setState({board: brd});
  }

  renderCell = (cell) => {
    switch(cell) {
      case 0:
        return 'floor';
      case 1:
        return 'wall';
      case 'player':
        return 'player';
      default:
        return 'floor';
    }
  }

  render() {
    return (
      <div className='board'>
      {this.state.board.map((row, i) => {
        return row.map((cell, j) => {
          return (
            <Cell
              key={[i, j]}
              loc={[i, j]}
              type={this.renderCell(cell)}
            />
          );
        })
      })}
      </div>
    );
  }
}

export default Board;

import React，{Component}来自'React'；
从“./Cell”导入单元格；
类板扩展组件{
建造师（道具）{
超级（道具）；
常数dim=10；
让board=this.createBoard（dim，dim）；
此.state={
董事会：董事会，
};
}
createBoard=（行、列）=>{
返回数组（行）.fill（数组（列）.fill（0））；
}
//createBoard=（行、列）=>{
//让董事会=[]；
//for（设i=0；i{
}
componentDidMount（）{
这个.设定片（这个.道具.播放器）；
}
设定值=（loc）=>{
设brd=this.state.board；
const row=loc[0]；
const col=loc[1]；
log（'row:'+row+'列：'+col+'=='+brd[row][col]）；
brd[row][col]=“玩家”；
console.log（'setPiece:'，brd）；
this.setState（{board:brd}）；
}
renderCell=（单元格）=>{
开关（单元）{
案例0：
返回“楼层”；
案例1：
返回“墙”；
案例“玩家”：
返回“玩家”；
违约：
返回“楼层”；
}
}
render（）{
返回(
{this.state.board.map（（行，i）=>{
返回row.map（（单元格，j）=>{
返回(
);
})
})}
);
}
}
导出默认板；

您正在正确使用<代码>数组#填充使用相同的值填充数组单元格：

子数组已创建-数组（列）.fill（0）

所有行数组都用数组引用-array（row.fill）（数组（col.fill）（0））填充

为了防止这种情况，您可以使用其他数组创建方法，即创建而不是克隆值。例如：

const行=10；
常数col=5；
const result=Array.from（{length:row}，（）=>newarray（col.fill）（0））；
结果[0][2]=5
控制台日志（结果）您可以在array的帮助下填充2D数组。填充方式如下：

let arr = Array(5).fill(0).map(x => Array(5).fill(0))

因为您的第一次填充只是用对同一数组的引用填充每个列位置。这一次看起来很棒！这对我来说很有意义！这并没有回答工作方法和非工作方法之间的区别是什么以及为什么非工作方法不起作用的问题。问题是
.fill（新数组（
..
）
将使用相同的数组引用填充数组。