JavaScript 数组

✏️ 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 - 先建立基础：创建并访问数组
创建一个 fruits 数组包含三种水果，然后定义 getFirst 函数返回数组的第一个元素。

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)

Declare variables: fruits
Define function: getFirst(value)
Self-check: getFirst(["a","b","c"]) => "a"

2) Beginner Explanation (Current Step)

Step task: 创建一个 fruits 数组包含三种水果，然后定义 getFirst 函数返回数组的第一个元素。
Define function(s): getFirst, then verify results with test inputs.
Declare variable(s): fruits, then output or use them.
This step has a specific expected result. Focus on making the function return the correct value.
A variable is like giving data a name so you can reuse it later.

3) Starter Template (Type along)

let fruits;
function getFirst(value) {
  return [];
}
// Self-check: getFirst(["a","b","c"]) should return "a"
console.log(getFirst(["a","b","c"]));

4) Rule Validation & Hints

📋 当前任务 - Step 1

创建 fruits 数组
定义 getFirst 函数
返回第一个元素

💡 步骤提示

🔐 学习提示

📖 快速参考

数组索引从 0 开始，不是从 1 开始。

About This Exercise

数组可以理解成“按顺序摆放的一排盒子”，每个盒子里放一个值。

前端里几乎所有列表数据都离不开数组：课程列表、消息列表、任务列表。

你将学到：

创建数组并按索引访问元素
用 filter 筛选符合条件的数据
用 find 查找单个目标元素
把数组操作应用到真实业务场景

Beginner⏱ 20-25 min

Learning Objectives

理解数组是有序集合，索引从 0 开始
掌握 filter 的筛选逻辑
掌握 find 的单个查找逻辑
能把数组方法用于任务列表类需求

Scenario

你正在开发一个待办事项应用：需要保存任务列表、筛选符合条件的任务、按 id 找到某条任务详情。

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