国际象棋棋盘重置异常：调用setBoard时无法清空squares数组

问题根源 #

你的代码核心问题是闭包内数组引用不一致：

• board函数返回的squares是初始空数组的引用
• setBoard中执行squares = []时，内部变量指向了新数组，但外部代码（如drawBoard）拿到的仍是旧数组引用
• 保留squares = []：外部用旧空数组绘制导致异常；去掉该语句：新棋子叠加到旧数组中

解决方案1：清空原数组（推荐） #

不要重新创建新数组，而是清空原数组的内容，保持引用不变：

const board = () => {
    let squares = [];

    const setBoard = fen => {
        // 清空原数组，保留引用
        squares.length = 0;
        // 继续执行解析FEN并填充squares的逻辑
        // 示例：
        // const pieces = parseFEN(fen);
        // squares.push(...pieces);
    };

    return { squares, setBoard };
};

这样setBoard修改的始终是同一个数组，外部调用chessBoard.squares时能拿到最新内容。

解决方案2：使用getter返回最新数组 #

如果需要重新赋值数组，通过getter方法确保外部每次拿到的都是最新的引用：

const board = () => {
    let squares = [];

    const setBoard = fen => {
        squares = [];
        // 解析FEN并填充squares的逻辑
    };

    return { 
        // 用getter返回当前最新的squares
        get squares() {
            return squares;
        },
        setBoard 
    };
};

调用方式不变，chessBoard.squares会自动获取最新的数组。

原代码失效原因 #

当你返回{ squares, setBoard }时，返回对象中的squares是初始数组的引用副本。后续setBoard中squares = []只是改变了内部变量的指向，不会更新返回对象里的引用，导致外部始终访问的是最初的空数组。

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