B.1 JavaScript 错误 转载

来源:https://github.com/datawhalechina/vibe-vibe

99-appendix_b-1-content.png

遇到错误别慌!这一节列出了最常见的 JavaScript 错误,以及对应的解决方法。遇到问题时,直接查表就行。

undefined 错误

错误信息

Uncaught TypeError: Cannot read properties of undefined (reading 'xxx')

通俗解释:你在试图使用一个「不存在」的东西。就像你问「小明的手机号」,但小明这个人不存在。

常见原因
| 原因 | 示例代码 | 修复方法 |
|------|----------|----------|
| 变量没有赋值 | let user; console.log(user.name) | 先检查变量是否有值 |
| 数组越界 | arr[10] 但数组只有 3 个元素 | 检查数组长度 |
| 对象属性拼写错误 | user.nmae(应该是 name) | 检查属性名拼写 |
| 函数没有返回值 | function get() {} 然后用返回值 | 确保函数有 return |

快速修复 Prompt

我的代码报错:Cannot read properties of undefined (reading 'xxx')

错误出现在这行:[粘贴报错的那行代码]

请帮我分析原因并修复。

null 错误

错误信息

Uncaught TypeError: Cannot read properties of null (reading 'xxx')

通俗解释:你在试图使用一个「明确是空」的东西。就像一个空盒子,你却想从里面拿东西。

常见原因
| 原因 | 示例代码 | 修复方法 |
|------|----------|----------|
| DOM 元素没找到 | document.getElementById('btn') 返回 null | 检查 ID 是否正确,或元素是否存在 |
| API 返回 null | 后端返回了 null | 添加空值判断 |
| LocalStorage 没数据 | JSON.parse(localStorage.getItem('data')) | 添加默认值:|| [] |

快速修复 Prompt

我的代码报错:Cannot read properties of null

我想获取页面上 ID 为 [xxx] 的元素,但返回了 null。

请帮我检查可能的原因。

TypeError

错误信息

Uncaught TypeError: xxx is not a function

通俗解释:你把一个不是函数的东西当函数用了。就像你对着一块石头说「给我唱首歌」。

常见原因
| 原因 | 示例代码 | 修复方法 |
|------|----------|----------|
| 变量名覆盖了函数名 | 定义了 let alert = 'hi',然后 alert('hello') | 避免用内置函数名作变量名 |
| 方法名拼写错误 | arr.pushs(1)(应该是 push) | 检查方法名拼写 |
| 调用了不存在的方法 | 对数字调用字符串方法 | 检查数据类型 |

ReferenceError

错误信息

Uncaught ReferenceError: xxx is not defined

通俗解释:你用了一个根本没有定义过的变量。就像你说「请把 xxx 递给我」,但屋子里根本没有这个东西。

常见原因
| 原因 | 示例代码 | 修复方法 |
|------|----------|----------|
| 变量名拼写错误 | consle.log(应该是 console) | 检查拼写 |
| 变量作用域问题 | 在函数外访问函数内的变量 | 理解作用域,或把变量定义在外面 |
| 忘记引入库 | 使用了 jQuery 但没引入 | 确保依赖已加载 |

SyntaxError

错误信息

Uncaught SyntaxError: Unexpected token 'xxx'

通俗解释:代码的「语法」写错了。就像中文里少了标点符号,句子读不通。

常见原因
| 原因 | 示例代码 | 修复方法 |
|------|----------|----------|
| 少了括号 | if (x > 1 { | 补上缺少的括号 |
| 多了逗号 | [1, 2, 3,](某些情况) | 删掉多余的逗号 |
| 引号不匹配 | 'hello" | 使用配对的引号 |
| JSON 格式错误 | {name: 'test'} 应该是 {"name": "test"} | JSON 的 key 必须用双引号 |

💡 语法错误的特点

语法错误通常在代码运行前就会报错,而且浏览器会告诉你在哪一行。仔细看那一行和它的上一行,问题通常就在那附近。

错误排查通用流程

flowchart TD
    A[看到红色错误] --> B[复制错误信息]
    B --> C[看是哪一行报错]
    C --> D{能看懂吗?}
    D -->|能| E[自己修]
    D -->|不能| F[把错误信息发给 AI]
    F --> G[AI 给出解决方案]
    G --> H[试一试]
    H --> I{解决了吗?}
    I -->|是| J[继续开发]
    I -->|否| K[把新的错误再发给 AI]
    K --> G

记住:报错不可怕,复制粘贴给 AI 就行

最后编辑:Alex 2026-03-05 11:39:50