JavaScript includes 方法

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/3

Unlocked Steps1/3

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 标签是否命中（数组）
实现 hasCourseTag(tags, target)。如果标签列表中包含 target，返回 true。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Define function: hasCourseTag(tags, target)
Self-check: hasCourseTag(["es6","frontend"], "frontend") => true
Self-check: hasCourseTag(["es6","frontend"], "backend") => false

2) Beginner Explanation (Current Step)

Step task: 实现 hasCourseTag(tags, target)。如果标签列表中包含 target，返回 true。
Define function(s): hasCourseTag, then verify results with test inputs.
This step has a specific expected result. Focus on making the function return the correct value.
A function is a reusable block of code. Define it first, then call it.
`return` sends a result back. Without return, you usually can't get the function's result.

3) Starter Template (Type along)

function hasCourseTag(tags, target) {
  return false;
}
// Self-check: hasCourseTag(["es6","frontend"], "frontend") should return true
console.log(hasCourseTag(["es6","frontend"], "frontend"));

4) Rule Validation & Hints

📋 当前任务 - Step 1

定义 hasCourseTag
命中返回 true
未命中返回 false

🔐 学习提示

📖 快速参考

大小写不统一会导致“看起来有、实际没命中”，先 toLowerCase 再 includes。

About This Exercise

你可以把 includes 理解成一句自然语言：“里面有没有这个值？”

这一关会让你在三个常见业务里反复练这个动作：

标签筛选（数组）
标题搜索（字符串）
批量过滤（数组 + filter）

写完后你会发现：很多判断题其实一行就能写清楚。

Beginner⏱ 12-18 min

Learning Objectives

看懂并写出 Array.includes 的基础判断
理解 String.includes 在关键词搜索里的作用
将 includes 和 filter 组合完成简单筛选

Scenario

你在做一个“课程搜索面板”：用户输入关键词、勾选标签后，页面要快速告诉用户“是否命中”并展示结果。

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

All rules for the current step passCan explain each line of your codeCan name a real-world business scenario for this

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?

Not confident yet, need more practiceCan complete similar tasks independentlyCan teach others how to do it