← FC Coder · HomePhase 01 · Lesson 11 · 60 min
Lesson11
Phase One · First App · Matchday 11 · The Roster
一个名单
第一个数组
Today's 3 Jobs · 今天这三件事
- 01写第一个 const roster = ['哈兰德', '福登', '罗德里']一个盒子 · 装一串
- 02用 roster[0] / roster[1] / roster[2] 渲染 3 张卡从 0 数 · 程序员的约定
- 03用 roster.length 显示总数 · 加一个看变化数组自动数 · 你不用
上节课你的卡有一个名字。但 EA FC 里一支球队 23 人大名单。今天用一个盒子装一串——`const roster = ['哈兰德', '福登', '罗德里']`。用 `roster[0]` 取第一个、`[1]` 第二个 ——程序员的约定从 0 数。先手动 3 张,下节课 `.map` 自动 10 张。
Essence · 本质点
数组 = 一串同类东西
像一支球队的 23 人大名单 —— 有顺序,一个盒子装多个。
const roster = [
'哈兰德', '福登', '罗德里'
];
'哈兰德', '福登', '罗德里'
];
一个
const name = '哈兰德';
一串
const roster = ['哈兰德', '福登', '罗德里'];
取出
roster[0] / roster[1] / roster[2]
方括号 [ ] = 数组边界 · 逗号分元素。今天只装字 · 数字 / 对象等下节课和第 13 课。
Essence · 索引
第一个是 [0] · 不是 [1]
程序员 50 年前定下的约定 —— 计算机内存的事。接受就好。
roster.length → 3(数组的长度)
roster[roster.length - 1] → 罗德里(最后一个)
roster[roster.length - 1] → 罗德里(最后一个)
[0]
第 1 个 → 哈兰德
[1]
第 2 个 → 福登
[2]
第 3 个 → 罗德里
[10]
越界 → undefined
第 N 个 = [N - 1]。最后一个 = [length - 1]。Phase 0 第 3 课的「问浏览器」—— 今天问数组「第几个是谁」。
Roster · 今天 3 个新工具
字面量 · 索引 · 长度
抄着用 · 改顺序看变化 · 5 分钟就熟。
- 01['哈兰德', '福登', '罗德里']数组字面量 —— 方括号 + 逗号分。一个盒子装一串同类东西。像 23 人大名单 · 有顺序。今天只装字 —— 数字 / 对象后面学。
- 02roster[0] / roster[1] / roster[2]索引 —— 第一个是 [0] · 程序员的约定(50 年前的事 · 接受就好)。第 N 个 = [N-1]。越界返回 undefined。
- 03roster.length问数组有多长 —— 返回一个数。3 个元素就是 3。最后一个的索引 = length - 1。
Half 2 · 在屏幕上
回 sandbox · 造一份 3 人名单 · 3 张卡
先 Console 摸一下 · 再渲染。手动写 3 个 — 感受「笨」。
01造一份名单 · 在 Console 摸一下
01Min
Cursor + pnpm dev + 打开 sandbox
回 sandbox。看上节课的判断卡。
02Min
在最上面写 const roster = ['哈兰德', '福登', '罗德里'];
保存 · 浏览器不变(还没用)。
03Min
DevTools → Console · 摸一下 arr / arr[0] / arr.length / arr[10]
在 Console 手敲:const arr = ['a','b','c']; · arr · arr[0] · arr.length · arr[10] · 看返回值。Phase 0 第 3 课的 Console 复用。
02🌟 用 3 个索引渲染 3 张卡
04Min
<h1>{name}</h1> → <h1>{roster[0]}</h1>
把卡标题换成 roster[0]。保存 · 卡上还是「哈兰德」· 但这次来自数组。
05Min
改 roster 顺序 · 把福登放第一
['福登', '哈兰德', '罗德里'] · 保存 · 标题变「福登」。索引 0 永远是第一个。
06Min
🌟 复制 <article> 2 份 · 渲染 3 张卡
选中整个 <article>...</article> · Option + Shift + ↓(Mac)/ Alt + Shift + ↓(Win)向下复制 2 次。3 个 <article> 都用 roster[0] —— 3 张哈兰德。
07Min
第 2、第 3 改成 roster[1] / roster[2]
保存 · 3 张不同的卡。这是「手动渲染」—— 下节课 .map 让它自动化。
03用 .length 显示总数
08Min
加第 4 个球员 · '德布劳内'
['哈兰德','福登','罗德里','德布劳内'] · 保存。浏览器不变 —— 因为只写了 3 个 <article>。感受「数据加了但 JSX 没跟上」的笨。
09Min
顶部加 <p>我们队有 {roster.length} 个球员</p>
放在所有 <article> 上面。保存 · 显示「我们队有 4 个球员」。改 roster 加 / 减 —— 这个数字自动跟着变。
04玩 · 改顺序 · 截图
10Min
玩 5 分钟 · 改数组各种方式
加人 / 删人 / 改顺序 / 试 <p>最后一个是 {roster[roster.length - 1]}</p> · 看变化。
11Min
📸 截图战利品
Mac Shift + Cmd + 4 框选你的 3 / 4 张并排卡。存 2026-XX-XX-我的名单.png · Phase 1 第六张战利品。
Half Time · 中场 · 讲给爸爸听
4 题 · 重点:数组 = 一串同类
第 3 题预告下节课 —— 让他自己说出「希望自动」。
01什么是数组?用「23 人大名单」比喻讲。Hint ↓
一串同类东西 · 一个盒子装多个 · 有顺序。每支球队都有一份名单。
02为什么第一个是 [0] 不是 [1]?Hint ↓
程序员的约定。50 年前的内存历史。接受就好 —— Phase 5 学 Git 时可以聊。
03今天 3 张卡你手动写 3 个索引 —— 100 张怎么办?Hint ↓
这就是为什么下节课要学 .map —— 自动对每一个做。
04roster.length 是什么?roster 有 10 个元素,roster[10] 是什么?Hint ↓
.length 是长度;最后一个是 [length - 1];[10] 越界 → undefined。
Player Rating · 本课温度计
给「第一个数组」打个分
说真话。爸爸会看到。
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
你的卡从一张变成一份名单 —— 这是真程序的起点。
还有 11 步没打勾。Step 7 看到 3 张不同的卡那一刻已经命中本质点 —— 其他可以下次补。