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 - 先建模：创建用户对象并格式化
创建一个 user 对象，包含 name（"John"）和 age（25）属性。定义 getUserInfo 函数返回格式化的用户信息。

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)

Declare variables: user
Define function: getUserInfo(value)
Self-check: getUserInfo({"name":"Alice","age":30}) => "Alice is 30 years old"

2) Beginner Explanation (Current Step)

Step task: 创建一个 user 对象，包含 name（"John"）和 age（25）属性。定义 getUserInfo 函数返回格式化的用户信息。
Define function(s): getUserInfo, then verify results with test inputs.
Declare variable(s): user, then output or use them.
This step has a specific expected result. Focus on making the function return the correct value.
A variable is like giving data a name so you can reuse it later.

3) Starter Template (Type along)

let user;
function getUserInfo(value) {
  return null;
}
// Self-check: getUserInfo({"name":"Alice","age":30}) should return "Alice is 30 years old"
console.log(getUserInfo({"name":"Alice","age":30}));

4) Rule Validation & Hints

📋 当前任务 - Step 1

创建 user 对象
定义 getUserInfo 函数
返回正确格式

💡 步骤提示

🔐 学习提示

📖 快速参考

对象合并时，同名字段以后面的值为准。

About This Exercise

对象可以理解成“信息卡片”：每条信息都有名字（key）和值（value）。

比如一个用户可以写成：name、age、email 等字段。

你将学到：

创建对象并读取属性
通过函数格式化对象信息
用解构语法提取字段
用展开运算符合并对象

Beginner⏱ 20-25 min

Learning Objectives

理解对象是 key-value 结构
掌握点语法和解构读取字段
掌握对象合并基础写法
能将业务数据组织为对象

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