React-使用.map和.fill用随机数填充2D数组

时间:2018-09-23 01:49:50

标签: arrays reactjs multidimensional-array iteration array.prototype.map

我在状态/构造函数定义的React项目中有一个二维数组,如下所示:

constructor(props){
    super(props);

    this.state = {
      boardHeight: 50,
      boardWidth: 30,
      iterations: 10,
      reset: false,
      alive: false,
      board: [],
      randomNum: ''
    };

    this.state.board = new Array(this.state.boardHeight).fill(new Array(this.state.boardWidth).fill(0));
  }

稍后在我的程序中,我想用0到1之间的随机数填充2D数组。如果我使用.map函数,可以将随机数放入数组中,如下所示:

  componentDidMount = () => {
    const data = this.state.board;

    // Generates Array of random numbers
    const startingBoard = data.map(Math.random)

    console.log('Starting board contains ' + startingBoard);

    // After startingBoard is working I can set state with startingBoard
    this.setState({
       board: startingBoard
    });
  }

const startingBoard = data.map(Math.random)成功将随机数放入2D数组的一维中。如何嵌套第二个.map函数,以便可以为此数组的两个维度创建随机数?

我正在将此阵列用于游戏板网格。我需要为网格中的任何正方形生成随机数(即[0] [0],[0] [1]等),因此我需要能够为该2D内的两个数组创建随机数数组。

类似这样的东西:

 const starting - data.map((x, index) => {
                      x.map((y, index) => {
                        return Math.random;
                      })
    }) 

1 个答案:

答案 0 :(得分:1)

.fill(new Array(this.state.boardWidth).fill(0))用相同的数组实例填充所有行,因此更改一行会更改所有行。 map之后可以使用fill来创建单独的数组:

board = Array(this.state.boardHeight).fill().map(_ => 
          Array(this.state.boardWidth).fill().map(_ => Math.random() ) );