JavaScript ES7 特性
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
这一关会带你认识 ES7 里最常用、最容易马上用起来的两个能力：
includes：判断“有没有”**：计算“几次方”
很多新手会把判断和计算写得很绕，这关的目标就是把它写清楚、写短、写对。
你不需要先懂复杂理论，只要按步骤完成，就能把 ES7 的核心语法真正用起来。
Beginner⏱ 15-20 min
Learning Objectives
- 理解 includes 的用途：快速判断数组/字符串中是否包含目标
- 掌握 ** 运算符：比 Math.pow 更直观
- 能把“存在性判断 + 简单计算”组合到一个小功能中
Scenario
你在做课程页面的小工具：
1) 判断某个标签是否已存在；
2) 判断标题里是否出现关键词；
3) 输出学习指数的平方和立方。
这就是前端开发里最常见的“判断 + 计算”组合任务。
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
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?
Tags
JavaScriptES7includesExponentiation