Question

我刚刚开始学习函数式编程，并希望将其应用于我的个人React开发中，以开发函数式思维方式。

这是问题： 在函数式编程中，不变性是其特征的一部分，可以避免对数据进行适当的突变。但是请考虑在下面的方法中使用push()和splice()，如果const squares = [];和const boardRows = [];都不是可接受的，那么在函数式编程中，两者的用法是否可以接受全局定义的变量？

renderBoard() {
    const squares = [];
    const boardRows = [];
    const rowBlock = (squares) => (<div className="board-row">{squares[0]}{squares[1]}{squares[2]}</div>);
    const div = (boardRows) => (<div>{boardRows[0]}{boardRows[1]}{boardRows[2]}</div>);

    let index = 0;
    for (var j = 3; j > 0; j--) {
        for (var i = 0; i < 3; i++) {
            const square = this.renderSquare(index++, [j, i + 1]);
            squares.push(square);
        }

        const boardRow = rowBlock(squares);
        boardRows.push(boardRow);
        squares.splice(0); //clear array to store squares of next board row
    }

    return(div(boardRows));
}

Answer 1

不，这可能不应该被认为是实现功能的最佳方法-正如您所说的那样，函数式编程应避免突变，并且在这种情况下（像大多数情况下一样），不需要（很多）突变。考虑改用Array.from一次创建所有数组，这不需要任何突变或重新分配：

const length = 3;
const boardRows = Array.from({ length }, (_, outer) => {
  const j = 3 - outer;
  const boardRow = Array.from({ length }, (_, i) => (
    this.renderSquare(outer * length + i, [j, i + 1])
  ))
  return rowBlock(boardRow);
});

使用Array.push（）和Array.splice（）进行功能编程

1 个答案: