使用 Array.push() 和 Array.splice() 进行函数式编程

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);
});

Answer 2

对于那些只是想知道如何从功能上推送到数组的人，请参阅： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

关于使用扩展运算符。