理解 TypeError: Cannot read properties of undefined
当javascript尝试访问一个undefined值的属性时，就会抛出typeerror: cannot read properties of undefined错误。在处理二维数组（如游戏棋盘）时，这通常意味着你试图访问一个不存在的行或列索引，即发生了“数组越界”错误。
在井字棋的赢家判断场景中，如果你的代码尝试访问bd[r+1]或bd[r+2]，而此时r+1或r+2超出了棋盘的行数范围，那么bd[r+1]或bd[r+2]将是undefined，随后的[c]访问操作就会触发这个错误。
井字棋赢家判断逻辑分析与修正
井字棋（3x3棋盘）的赢家判断涉及检查三条横线、三条竖线和两条对角线。每条赢线都由三个连续的相同标记组成。问题的核心在于，当检查这些固定长度的赢线时，不应过度迭代。
让我们以原代码中的 checkWinner 函数为例，分析并修正其中的错误。
function checkWinner (bd) {
// 辅助函数，检查三个单元格是否构成赢线
function checkLine (a,b,c) {
return ((a != 0) && (a == b) && (a == c));
}
// 原始的垂直赢线检查（存在问题）
for (r = 0; r < 3; r++) // 外层循环不应存在
for (c = 0; c < 3; c++)
if (checkLine(bd[r][c], bd[r+1][c], bd[r+2][c])) {
return bd[r][c];
}
// 原始的水平赢线检查（存在问题）
for (r = 0; r < 3; r++)
for (c = 0; c < 3; c++) // 内层循环不应存在
if (checkLine(bd[r][c], bd[r][c+1], bd[r][c+2])) {
return bd[r][c];
}
return 0; // 没有赢家
};1. 垂直赢线检查的修正
对于一个3x3的井字棋盘，每列只有一条垂直赢线需要检查：即bd[0][c], bd[1][c], bd[2][c]。原代码中的外层 for (r = 0; r
立即学习“Java免费学习笔记（深入）”；
问题分析： 当 r 为 0 时，检查 bd[0][c], bd[1][c], bd[2][c]，这是正确的。 当 r 为 1 时，检查 bd[1][c], bd[2][c], bd[3][c]。此时 bd[3] 是 undefined，导致 bd[3][c] 抛出 TypeError。 当 r 为 2 时，检查 bd[2][c], bd[3][c], bd[4][c]。同样会越界。
修正后的代码：
// 修正后的垂直赢线检查
for (let c = 0; c < 3; c++) { // 只需遍历列
// 对于每一列，固定检查第0、1、2行
if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
return bd[0][c];
}
}这里，我们只用一个循环遍历列 c，对于每一列，我们直接检查其第0、1、2行的单元格。这样就避免了越界问题。
2. 水平赢线检查的修正
同理，对于一个3x3的井字棋盘，每行也只有一条水平赢线需要检查：即bd[r][0], bd[r][1], bd[r][2]。原代码中的内层 for (c = 0; c c++) 循环是多余的，并且会导致 c+1 和 c+2 在 c 为 1 或 2 时越界。
问题分析： 当 c 为 0 时，检查 bd[r][0], bd[r][1], bd[r][2]，这是正确的。 当 c 为 1 时，检查 bd[r][1], bd[r][2], bd[r][3]。此时 bd[r][3] 是 undefined，导致 TypeError。 当 c 为 2 时，检查 bd[r][2], bd[r][3], bd[r][4]。同样会越界。
修正后的代码：
// 修正后的水平赢线检查
for (let r = 0; r < 3; r++) { // 只需遍历行
// 对于每一行，固定检查第0、1、2列
if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
return bd[r][0];
}
}这里，我们只用一个循环遍历行 r，对于每一行，我们直接检查其第0、1、2列的单元格。
3. 对角线赢线检查（补充）
井字棋还需要检查两条对角线。这两条对角线也是固定长度的，因此不需要循环，直接检查即可。
- 主对角线： bd[0][0], bd[1][1], bd[2][2]
- 副对角线： bd[0][2], bd[1][1], bd[2][0]
// 主对角线检查
if (checkLine(bd[0][0], bd[1][1], bd[2][2])) {
return bd[0][0];
}
// 副对角线检查
if (checkLine(bd[0][2], bd[1][1], bd[2][0])) {
return bd[0][2];
}完整的 checkWinner 函数
综合以上修正和补充，一个完整的 checkWinner 函数应该如下所示：
function gameController(
playerOneName = "Player One",
playerTwoName = "Player Two"
) {
// ... 其他游戏控制器代码 ...
function checkLine (a,b,c) {
// 确保单元格不为初始值0，并且三个单元格值相同
return ((a !== 0) && (a === b) && (a === c));
}
function checkWinner (bd) { // bd 是游戏棋盘的二维数组
// 1. 检查垂直赢线
for (let c = 0; c < 3; c++) {
if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
return bd[0][c]; // 返回赢家标记
}
}
// 2. 检查水平赢线
for (let r = 0; r < 3; r++) {
if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
return bd[r][0]; // 返回赢家标记
}
}
// 3. 检查主对角线
if (checkLine(bd[0][0], bd[1][1], bd[2][2])) {
return bd[0][0]; // 返回赢家标记
}
// 4. 检查副对角线
if (checkLine(bd[0][2], bd[1][1], bd[2][0])) {
return bd[0][2]; // 返回赢家标记
}
return 0; // 如果没有赢家，返回0
};
// ... 其他游戏控制器代码 ...
return {
// ... 返回其他函数和属性 ...
checkWinner
};
}注意事项与总结
- 循环边界与棋盘尺寸： 在处理网格类游戏（如井字棋、四子棋等）的赢家判断逻辑时，务必根据赢线的实际长度和棋盘尺寸来精确设置循环边界。对于固定长度的赢线（例如井字棋的3个棋子），通常只需要遍历起始点，而不是遍历赢线中的每一个棋子。
- 避免冗余循环： 如果赢线长度与棋盘维度相同（如3x3井字棋的横竖线），则不需要嵌套循环来检查整条线，一个循环遍历行或列即可。
- 调试技巧： 当遇到 TypeError: Cannot read properties of undefined 错误时，首先检查代码中所有涉及数组索引访问的地方，特别是那些使用了 i+1、j+2 等表达式的索引，确认它们在循环的任何迭代中都不会超出数组的实际边界。使用 console.log() 打印出循环变量和数组访问表达式的值，可以帮助快速定位问题。
- 模块化设计： 将 checkLine 这样的辅助函数独立出来，可以提高代码的可读性和复用性。
通过以上修正，checkWinner 函数将能够正确、高效地判断井字棋的赢家，同时避免因数组越界导致的运行时错误。掌握正确的循环和索引处理方式，是开发健壮游戏逻辑的基础。
