JavaScript 数组高阶方法

✏️ 可编辑

加载编辑器...

实时预览

⌘+Enter 运行⌘+R 重置

当前步骤Step 1/3

已解锁步骤1/3

下一步建议

先完成当前 Step 1

1) 当前任务与操作步骤

当前任务：Step 1 - 第一步：筛选完成任务并提取标题
实现 getCompletedTitles(tasks)，返回已完成任务标题，用逗号连接

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

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

定义函数：getCompletedTitles(tasks)
自检目标：getCompletedTitles([{"title":"A","done":true},{"title":"B","done":false},{"title":"C","done":true}]) => "A,C"

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

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

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

function getCompletedTitles(tasks) {
  return null;
}
// 自检：getCompletedTitles([{"title":"A","done":true},{"title":"B","done":false},{"title":"C","done":true}]) 应返回 "A,C"
console.log(getCompletedTitles([{"title":"A","done":true},{"title":"B","done":false},{"title":"C","done":true}]));

4) 规则校验与提示

📋 当前任务 - Step 1

定义 getCompletedTitles
返回完成任务标题

🔐 学习提示

📖 快速参考

some 返回 true/false，不会返回满足条件的那个值。

关于此练习

数组高阶方法的目标是：用更短、更清晰的代码处理列表数据。

你可以先记四个分工：

filter：筛选“要哪些”
map：转换“变成什么”
reduce：汇总“算成一个值”
some：判断“有没有至少一个满足”

入门⏱ 25-30 min

学习目标

理解四个高频数组方法的职责分工
掌握 filter + map 的链式写法
掌握 reduce 进行金额/分数汇总
掌握 some 进行风险条件检测

场景说明

你在做一个学习看板：需要展示已完成任务标题、统计总金额，并检测是否存在高风险分数。

为什么这么做

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

动手练习

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

常见误区

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

本节交付物

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

我的进度

完成步骤0 / 3

总尝试次数0

最佳分数0%

达标标准（可勾选）

完成当前 Lab 前建议确认

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

反思题（建议完成）

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

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

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

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