Array.fill和for循環創建數組有什麼區別

我使用React.js創建了一個地牢爬蟲遊戲，並且我正在使用Array.fill（0）初始化棋盤。但是當我在2d數組中設置一個元素時，它將整個數組（列）設置爲'player'而不是單個元素。我有另一個createBoard()函數，註釋，這是正常工作。那麼爲什麼會發生這種情況，我如何正確使用Array.fill？Array.fill和for循環創建數組有什麼區別

這裏是我的主板組件：

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;

來源

2017-06-25 ChrisR

因爲你的第一個填充僅僅是填補每一個列位置引用相同的數組。 – pvg

您可以Array.fill的以這樣的方式幫助填補二維數組：

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

來源

2017-06-25 19:17:06

這個看起來不錯！這對我來說非常合理！ – ChrisR

我很高興它適合你:) –

@ChrisR將此主題標記爲已解決 –

您正確使用Array#fill。 Array#fill填充具有相同值的陣列單元：

創建子陣列 - 陣列（COL）.fill僞（0）
所有行數組填充有數組引用 - 陣列（行）.fill僞（Array（col）.fill（0））

爲了防止出現這種情況，您可以使用其他創建數組的方法，即創建而不是克隆該值。例如Array#from：

const row = 10; 
 
const col = 5; 
 
const result = Array.from({ length: row },() => new Array(col).fill(0)); 
 

 
result[0][2] = 5 
 

 
console.log(result);

來源

2017-06-25 19:10:17

Array.fill和for循環創建數組有什麼區別

回答

相關問題