⚡ JavaScript Practice
Complete 11 exercises from syntax to async, stage by stage. Each exercise runs instantly with validation feedback.
Start your JavaScript journey
Systematically learn core JS concepts from variables to async programming
How to master JavaScript Lab efficiently
Complete exercises in order. Try each one independently first, then review with hints and solutions. This builds transferable skills.
Recommended Learning Path
Build syntax foundations first, then strengthen data processing, and finally complete DOM + async. Self-check at the end of each stage to ensure skills transfer to real projects.
Syntax & Control Flow
- Variables, operators, conditionals, loops, functions
- Goal: Write reusable small functions
Data Structures & Expressions
- Strings, arrays, objects
- Goal: Extract info from data and produce results
Page Interaction & Async
- DOM, events, Promise, async/await
- Goal: Implement real interaction flows
Completion Criteria
- Pass all steps in each exercise at least once
- Can rewrite core code without looking at the solution
- Can explain why the code is written this way (not just that it works)
Common Pitfalls
- Mixing variable declarations: standardize on const/let first, then refactor
- Focusing only on results, not edge cases: add null and error branches
- Missing await in async code: map out the call chain first, then debug step by step
JavaScript 变量与数据类型
面向零基础：先理解“变量是什么”，再学会声明字符串、数字、布尔值并打印结果。
JavaScript let/const 作用域
面向初学者理解 let/const：变量为什么会“作用域错乱”，以及如何避免。
JavaScript 运算符
从“加减乘除”到“条件判断”，用学生熟悉的例子理解运算符。
JavaScript 条件语句
面向新手：先学会“程序如何做决定”，再练 if/else 与三元表达式。
JavaScript 循环
从“重复做一件事”出发，理解 for/forEach/map 在新手任务中的区别。
JavaScript 函数
新手必修：把“重复逻辑”封装成函数，理解参数输入与返回输出。
JavaScript 箭头函数
给已会基础函数的新手做升级：把 function 写法迁移到箭头函数。
JavaScript 默认参数
面向新手理解“不给参数也能跑”的写法，提升函数稳定性。
JavaScript 模板字符串
从“字符串拼接很乱”出发，教新手用模板字符串写出更清晰文案。
JavaScript 解构赋值
把“从对象/数组里取值”这件事简化成一行，适合新手进阶 ES6。
JavaScript 展开与剩余参数
用“合并数组”和“不定参数求和”两个新手常见任务理解 ... 的两种角色。
JavaScript 对象字面量增强
把 ES6 对象语法写清楚：减少重复代码、支持动态 key，让对象构建更直观、更少拼写错误。
JavaScript Class 基础
先把 class 当作“对象工厂”，再理解 constructor 和方法的分工。
JavaScript 迭代器与生成器
把 generator 从抽象语法变成可操作工具：按需产出序列、筛选序列、生成步长序列。
JavaScript 防抖与节流
通过搜索框和滚动加载两个真实场景，理解“什么时候用防抖、什么时候用节流”，避免只背概念。
JavaScript 模块模式
用学生能理解的方式学习封装：为什么要隐藏内部变量、如何只暴露必要 API、怎样避免全局污染。
JavaScript 发布订阅模式
把“模块之间怎么通信”讲清楚：A 只发事件、B 负责监听，降低耦合并提升可维护性。
JavaScript 状态机模式
把流程控制写成可读规则：状态 + 事件 -> 下一状态，避免流程乱跳，提升可维护性。
JavaScript 记忆化缓存
从学生视角理解记忆化：当输入重复时不必重复计算，学会用 Map 做缓存并计算命中率。
JavaScript 不可变数据更新
以学生视角掌握不可变更新：数组追加、对象改字段、列表项切换，避免副作用导致状态错乱。
JavaScript ES7 特性
面向初学者：先学会“是否包含”的判断，再学会用 ** 做平方/立方，建立 ES7 的第一套实战语法感。
JavaScript includes 方法
面向零基础：一步步学会数组 includes 与字符串 includes，理解“命中判断”在搜索、筛选里的真实用途。
JavaScript 指数运算符
面向初学者：从平方/立方开始，逐步理解 ** 和 **=，学会把公式需求转成可运行代码。
JavaScript ES8 对象工具
从学生视角理解“对象转数组再转回对象”的核心流程，掌握 ES8 对象工具在统计与筛选中的用法。
JavaScript 字符串补位
从“看起来乱”到“整齐可读”：学习 padStart/padEnd，让编号和名称在控制台或表格文本中对齐。
JavaScript Async/Await 模式
以学生视角学习 async/await：先拿到单个异步结果，再做并发加载，最后学会失败兜底，理解前端真实请求流程。
JavaScript 字符串方法
面向初学者：学习字符串大小写处理、模板字符串拼接和包含判断，建立文本处理的基础能力。
JavaScript 数组
面向新手：理解数组为什么是前端高频数据结构，并通过创建、筛选、查找三个步骤建立数组思维。
JavaScript 对象
从学生视角理解对象：先存用户信息，再解构读取，再合并对象，建立“现实实体 -> 代码对象”的映射思维。
JavaScript 数组高阶方法
从学生视角掌握数组高阶方法：先筛选再提取、再做汇总、最后做条件判断，形成前端数据处理通用套路。
JavaScript Set 与 Map
从学生视角掌握 ES6 集合：先用 Set 去重，再用 Map 建字典查询，理解它们和数组/对象的区别。
JavaScript 实用算法函数
从业务角度学习常见算法工具：去重排序、词频统计、榜单求和，建立可复用函数思维。
JavaScript DOM 操作基础
面向初学者：学习如何选中页面元素并修改文字、样式、class，理解 JavaScript 如何真实影响页面显示。
JavaScript 事件处理
从零理解事件驱动：点击、输入、提交分别怎么监听，如何把用户动作变成页面变化。
JavaScript 异步编程
面向新手：先理解“为什么要异步”，再一步步写 delay、await 和 try/catch，掌握前端请求最常见的代码骨架。
JavaScript Promise 并发
以学生视角学习 Promise.all：从两个异步值并发获取开始，逐步完成拼接和汇总，理解为什么并发通常比串行更高效。
JavaScript 异步循环模式
用学生能跟上的方式理解异步循环：先写单个 async 转换，再用 Promise.all 批量处理，最后做结果汇总。
JavaScript 可选链与空值合并
面向初学者：解决“字段缺失就报错”的常见问题，学会 ?. 安全访问与 ?? 默认值兜底。
JavaScript 错误处理
从学生角度理解 try/catch 和边界校验：输入不可信时如何给出安全返回，保证页面稳定运行。