JavaScript井字棋项目：静态数据手动创建还是函数构建更简洁？

两种写法对比与选择 #

先看你手动编写的静态数据（调整格式后更易读）：

const squares = [
  // 第一行
  { row: 1, col: 1, type: 'corner1' },
  { row: 1, col: 2, type: 'edge' },
  { row: 1, col: 3, type: 'corner2' },
  // 第二行
  { row: 2, col: 1, type: 'edge' },
  { row: 2, col: 2, type: 'center' },
  { row: 2, col: 3, type: 'edge' },
  // 第三行
  { row: 3, col: 1, type: 'corner2' },
  { row: 3, col: 2, type: 'edge' },
  { row: 3, col: 3, type: 'corner1' }
];

手动静态定义的优劣势 #

• 优点：直观性拉满，每个格子的属性一眼就能看明白，完全不需要额外逻辑，新手能快速理解数据结构，排查问题也简单。
• 缺点：如果以后要扩展棋盘（比如改成5x5），就得重复写大量相似代码，容易出错。但井字棋固定是3x3，这个缺点基本可以忽略。

函数生成的写法示例 #

如果用函数构建，代码大概是这样：

const createBoard = () => {
  const board = [];
  // 遍历3行3列
  for (let row = 1; row <= 3; row++) {
    for (let col = 1; col <= 3; col++) {
      let type;
      if (row === 2 && col === 2) {
        type = 'center';
      } else if ((row === 1 || row === 3) && (col === 1 || col === 3)) {
        // 对角线角落为corner1，其余角落为corner2
        type = row === col ? 'corner1' : 'corner2';
      } else {
        type = 'edge';
      }
      board.push({ row, col, type });
    }
  }
  return board;
};

// 生成不可修改的棋盘数据
const squares = createBoard();

函数生成的优劣势 #

• 优点：代码更紧凑，调整棋盘尺寸时只需要修改循环边界值（比如把3改成5），不用重复写对象；逻辑集中，修改类型规则时只改一处即可。
• 缺点：新手需要理解嵌套循环和条件判断，不如手动写法直观，第一次写可能还要调试逻辑是否正确。

哪种更简洁？ #

对于井字棋这种固定3x3的场景，两种写法的代码量差不多，但手动静态定义对新手更友好——毕竟不需要额外理解函数逻辑，写出来的东西一眼就能验证对错。如果是更大的棋盘，函数生成显然更简洁高效。

JS新手通用建议 #

• 优先保证代码可读性：别为了“少写几行”搞复杂逻辑，新手阶段，能让自己（和别人）一眼看懂的代码才是好代码。
• 用const声明不可变数据：你的squares不会被修改，一定要用const而不是let或者直接赋值全局变量，避免意外修改和命名冲突。
• 静态数据适当加注释：像上面手动写法那样给每行加注释，哪怕自己写的代码，过几天回头看也能快速回忆结构。
• 多调试验证：不管是手动写的还是函数生成的数据，都用console.log(squares)打印出来看看，确保每个格子的row、col、type都符合预期。
• 避免全局变量污染：尽量把代码放在函数或者模块里，别直接在全局作用域定义大量变量，不然很容易和其他代码冲突。

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