Tic-Tac-Toe游戏模块数组重置后无法修改的问题求解

问题背景 #

跟着TOP开发井字棋，不存在代写需求，核心是对数组引用与作用域存在误解。编写的Game模块负责存储游戏信息，代码如下：

const Game = (()=>{

    //Beginning state of the board, what I want to reset after every win/draw  
    let board = [null, null, null, null, null, null, null, null, null];
    const add = (value, index) =>{
        board[index] = value;
    }

    const reset = () => {
     board = [null, null, null, null, null, null, null, null, null]
    }

    return {board, add, reset}

})();

该模块由控制器管控玩家设置、回合流转等操作，页面刷新后第一回合运行正常，但重置棋盘进入下一回合时出现异常：部分重置方法能将数组设为全null，但重置后无法通过点击格子修改数组；部分方法甚至无法完成重置。

问题成因 #

核心问题出在数组引用与作用域的匹配上：
模块初始化时，返回的board是初始数组的引用。当调用reset()时，内部的board变量被重新赋值为一个全新的数组，但外部代码持有的依然是初始化时的旧数组引用。此时外部操作的还是旧数组，而内部新数组完全没被外部访问到，就会出现“重置后无法修改”或者“重置无效”的现象。

解决方法 #

有两种可靠的修复方案：

方案1：修改原数组内容（不创建新数组） #

重置时不生成新数组，而是直接修改原数组的每个元素为null，这样内部和外部的数组引用保持一致：

const Game = (()=>{
    let board = [null, null, null, null, null, null, null, null, null];
    const add = (value, index) =>{
        board[index] = value;
    }

    const reset = () => {
        // 用fill方法快速将数组所有元素设为null
        board.fill(null);
    }

    return {board, add, reset}
})();

这种方式保留了原数组引用，外部操作的始终是同一个数组，重置后能正常修改。

方案2：提供获取棋盘的方法（支持创建新数组） #

如果需要保留“创建新数组”的重置逻辑，不要直接返回board变量，而是提供一个getBoard()方法来获取最新的棋盘引用：

const Game = (()=>{
    let board = [null, null, null, null, null, null, null, null, null];
    const add = (value, index) =>{
        board[index] = value;
    }

    const reset = () => {
        board = [null, null, null, null, null, null, null, null, null];
    }

    // 新增方法，返回当前最新的board引用
    const getBoard = () => board;

    return {add, reset, getBoard}
})();

后续外部需要访问棋盘时，调用Game.getBoard()而非直接访问Game.board，这样每次获取的都是内部最新的数组引用，重置后也能正常操作。

内容的提问来源于stack exchange，提问作者sljafna