JavaScript 错误处理

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/3

Unlocked Steps1/3

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 先处理高风险点：JSON 解析
实现 safeParse(text)，成功返回对象，失败返回 null

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Define function: safeParse(text)
Self-check: safeParse("{\"ok\":true}") => {"ok":true}
Self-check: safeParse("not-json") => null

2) Beginner Explanation (Current Step)

Step task: 实现 safeParse(text)，成功返回对象，失败返回 null
Define function(s): safeParse, then verify results with test inputs.
This step has a specific expected result. Focus on making the function return the correct value.
A function is a reusable block of code. Define it first, then call it.
`return` sends a result back. Without return, you usually can't get the function's result.

3) Starter Template (Type along)

function safeParse(text) {
  return {};
}
// Self-check: safeParse("{\"ok\":true}") should return {"ok":true}
console.log(safeParse("{\"ok\":true}"));

4) Rule Validation & Hints

📋 当前任务 - Step 1

定义 safeParse
有效 JSON 返回字段值
无效 JSON 返回 null

🔐 学习提示

📖 快速参考

只处理“正常输入”会导致线上问题，练习时就要把异常路径一起写上。

About This Exercise

真实项目里，输入经常是“脏数据”：格式错误、缺字段、类型不对。

如果不处理，页面可能直接报错中断。

这关核心不是“写得花哨”，而是学会一句工程化原则：

出现异常时，给出可预期的兜底结果。

Beginner⏱ 20-25 min

Learning Objectives

掌握 try/catch 的基本结构
能为失败场景返回稳定默认值
养成边界校验习惯，减少运行时崩溃

Scenario

你在处理用户输入和第三方接口数据：有些数据能正常解析，有些会出错。你要保证即使遇到坏数据，页面也能继续工作。

Why Do This

Frontend JS is not just about knowing the syntax — the key is reliably manipulating the DOM and managing interaction state.
Break down the event flow (trigger -> handle -> update UI) before coding, and you will make significantly fewer errors.
Rule-based validation helps you develop a testable frontend mindset.

Hands-on Practice

Write out the event flow in comments first, then implement the functions.
Add an edge case branch for invalid input or empty data.
Explain why each validation rule is needed.

Common Mistakes

Only testing the happy path without verifying edge inputs or repeated clicks.
Mixing event binding and state updates together, making future maintenance difficult.
Console output looks correct but the UI is not actually updated.

Deliverable

A reusable interaction component scaffold (event flow description + key functions + edge case handling).

My Progress

Completed Steps0 / 3

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passCan explain each line of your codeCan name a real-world business scenario for this

Reflection Questions (Recommended)

Describe the event flow of this Lab in 2-3 sentences (trigger -> handle -> update).

What edge case did you add? Why is it easy to miss?

How confident are you with this interaction pattern now?

Not confident yet, need more practiceCan complete similar tasks independentlyCan teach others how to do it