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

3yhwsihp  于 2023-10-14  发布在  Java
关注(0)|答案(2)|浏览(97)

我刚刚开始学习函数式编程,并希望将其应用于我个人的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));
}
rsl1atfo

rsl1atfo1#

不,这可能不应该被认为是功能上的最佳方式-就像你说的,函数式编程应该避免突变,在这种情况下(像大多数情况下一样)(许多)突变是不必要的。考虑使用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);
});
3ks5zfa0

3ks5zfa02#

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

const arr = [1, 2, 3];
console.log([...arr, 4]);
// [1, 2, 3, 4]

相关问题