JavaScript 对象字面量增强

✏️ 可编辑

加载编辑器...

实时预览

⌘+Enter 运行⌘+R 重置

当前步骤Step 1/3

已解锁步骤1/3

下一步建议

先完成当前 Step 1

1) 当前任务与操作步骤

当前任务：Step 1 - 第一步：属性简写
实现 buildUser(name, level)，返回 { name, level }

先在 `script.js` 完成当前 Step 的代码。
点击“运行验证”看规则是否通过。
当前 Step 通过后，下一步会自动解锁。
你当前需要先通过 Step 1，才会解锁 Step 2。

本步交付物（按这个检查）

定义函数：buildUser(name, level)
自检目标：buildUser("Amy", 2) => {"name":"Amy","level":2}

2) 零基础解释（当前 Step）

本步任务：实现 buildUser(name, level)，返回 { name, level }
你要先定义函数：buildUser，再用测试输入验证返回结果。
本步有明确目标结果，核心是让函数返回值与期望一致。
函数就是“可重复执行的一段小程序”，先定义，再调用。
`return` 是把结果“交还”出去，没有 return 通常拿不到函数结果。

3) 可直接照着敲的最小模板

function buildUser(name, level) {
  return null;
}
// 自检：buildUser("Amy", 2) 应返回 {"name":"Amy","level":2}
console.log(buildUser("Amy", 2));

4) 规则校验与提示

📋 当前任务 - Step 1

定义 buildUser
buildUser 返回正确

🔐 学习提示

📖 快速参考

动态 key 必须写成 [key]，写成 key 会得到固定字段名 "key"。

关于此练习

对象是前端最常见的数据结构之一。

ES6 让对象写法更短、更清楚，特别适合新手减少重复代码和拼写错误。

本关只练三个高频写法：属性简写、方法/字段简写、动态属性名。

入门⏱ 15-20 min

学习目标

掌握属性简写（变量名即属性名）
掌握对象内部字段组合写法
掌握计算属性名 [key] 动态生成字段

场景说明

你在做课程配置模块，需要快速组装对象，还要支持动态字段名。这正是对象字面量增强最常见的使用场景。

为什么这么做

前端 JS 不是“会写语法”就够，重点是能稳定地改 DOM 和处理交互状态。
先拆事件流（触发 -> 处理 -> 更新 UI），再写代码，错误率会明显下降。
通过规则验证能帮助你建立“可测试”的前端思维。

动手练习

先用注释写出事件流，再实现函数。
补一个“异常输入”或“空数据”分支。
解释每条验证规则为什么需要。

常见误区

只关注功能跑通，不验证边界输入和重复点击场景。
事件绑定和状态更新写在一起，后续难维护。
console 看起来对，但 UI 没有真实更新。

本节交付物

一份可复用的交互组件脚手架（事件流说明 + 关键函数 + 边界处理）。

我的进度

完成步骤0 / 3

总尝试次数0

最佳分数0%

达标标准（可勾选）

完成当前 Lab 前建议确认

当前步骤规则全部通过代码可复述并能说明每行作用能举出一个真实业务里的应用场景

反思题（建议完成）

请用 2-3 句话说明本 Lab 的事件流（触发 -> 处理 -> 更新）。

你补了哪个边界场景？为什么这个场景容易漏？

你现在对这个交互模式的掌握程度？

还不稳，需要更多练习能独立完成类似任务可以教别人做