JavaScript ES8 对象工具

✏️ 可编辑

加载编辑器...

实时预览

⌘+Enter 运行⌘+R 重置

当前步骤Step 1/3

已解锁步骤1/3

下一步建议

先完成当前 Step 1

1) 当前任务与操作步骤

当前任务：Step 1 - 统计总分：对象值求和
实现 sumValues(obj)，把对象中所有数值字段加总。

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

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

定义函数：sumValues(obj)
自检目标：sumValues({"a":1,"b":2,"c":3}) => 6

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

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

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

function sumValues(obj) {
  return 0;
}
// 自检：sumValues({"a":1,"b":2,"c":3}) 应返回 6
console.log(sumValues({"a":1,"b":2,"c":3}));

4) 规则校验与提示

📋 当前任务 - Step 1

定义 sumValues
sumValues({a:1,b:2,c:3}) = 6

🔐 学习提示

📖 快速参考

对象先转 entries，处理后再 fromEntries，是前端数据处理高频写法。

关于此练习

你会经常拿到这样的数据：{a: 1, b: 2, c: 3}。

问题是：对象本身不方便直接做过滤、映射、统计。

ES8 给了你一条很实用的路线：

Object.values：先拿值，做求和统计
Object.entries：拿到 [key, value] 对，做格式化和过滤
Object.fromEntries：把过滤后的键值对再组装回对象

中级⏱ 20-25 min

学习目标

理解 Object.values / entries / fromEntries 的分工
能把对象数据做求和、格式化、筛选
形成“对象 <-> 数组”双向转换思维

场景说明

你在做学习看板的数据处理：需要统计分数、展示键值明细，并把无效项过滤后返回干净对象。

为什么这么做

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

动手练习

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

常见误区

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

本节交付物

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

我的进度

完成步骤0 / 3

总尝试次数0

最佳分数0%

达标标准（可勾选）

完成当前 Lab 前建议确认

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

反思题（建议完成）

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

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

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

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