← FC Coder · HomePhase 01 · Lesson 14 · 60 min
Lesson14
Phase One · First App · Matchday 14 · The Big Push
50 人 JSON
第一个函数
Today's 3 Jobs · 今天这三件事
- 01新建 app/data/players.json · 父子合作写 22 人今天 22 人上线 · 50 本周完成
- 02sandbox 里 import players · 替换硬编码 roster数据 vs 代码分离
- 03写第一个 function byRating(min) · 战术可复用的步骤
Phase 1 最大投入的一节。把数据从 .tsx 搬到 JSON 文件 · 父子合作写 22 人(50 本周完成)· 写第一个 function byRating(min) —— 战术。函数 = 可复用的步骤。Phase 1 第 6 个本质点击中。
Essence · 本质点
函数 = 可复用的步骤
教练写「4-3-3 + 高位逼抢」一次 · 整个赛季用。函数 = 数据界的战术。
function byRating(min) {
return players.filter(p => p.rating >= min);
}
return players.filter(p => p.rating >= min);
}
关键字
function
名字
byRating
参数
(min)
返回
return players.filter(...)
byRating(85) / byRating(90) —— 一个函数管不同情况。参数 = 函数的可调节旋钮。
Essence · 数据 vs 代码分离
数据进 JSON · 代码留 .tsx
Phase 0 第 5 课 Data vs UI 分离的升级 —— 今天再升一层。
app/data/players.json ← 数据
app/lessons/.../page.tsx ← 代码
import players from '...' ← 桥
app/lessons/.../page.tsx ← 代码
import players from '...' ← 桥
JSON 的事
谁在队 · 评分多少 · 哪国人
.tsx 的事
怎么显示 · 怎么筛 · 怎么排
桥
import players from '...'
改 JSON 不动 .tsx · 改 .tsx 不动 JSON。Phase 3 数据库进场后 · 这个分离会更深刻 —— DB ↔ JSON ↔ UI 三层。
Roster · 今天 3 个新工具
JSON · function · .filter
数据进 JSON · 函数复用 · .filter 抄着用(下节课正经讲)。
- 01players.json数据的家 —— 一个文件装一堆对象。JSON 比 JS 严:key 双引号 + 不能 trailing comma。import players from '@/app/data/players.json' · 像变量一样用。
- 02function byRating(min) { ... }可复用的步骤 —— 战术写一次,赛季用 100 次。Phase 1 第 6 个本质点。function 关键字 · 名字 · (参数) · 函数体 · return 返回什么。
- 03players.filter(p => p.rating >= min).filter —— .map 的兄弟 · 不变形,只筛(留 / 扔)。返回新数组,长度 ≤ 原数组。今天抄着用 · 下节课正经讲。
Half 2 · 在屏幕上
父子合作时间 · 写 22 人 + 一个函数
Phase 1 最大投入的一节。允许跨周完成 50。
01新建 JSON · 第 1 个球员
01Min
Cursor + pnpm dev
老三件套。
02Min
新建 app/data/players.json
左边文件树 app/ 右键 New Folder 输 data · 然后 data/ 右键 New File 输 players.json。空白打开。
03Min
写第一个球员对象
[\n { "name": "哈兰德", "rating": 91, "position": "ST", "nationality": "挪威", "club": "曼城" }\n]\n注意:JSON 必须双引号,key 也要,不能 trailing comma。保存 · Cursor prettier 自动格式。
02sandbox import + 22 人渲染
04Min
sandbox 最上面 import players from '@/app/data/players.json';
在 'use client' 下面、其他 import 旁边加。保存 · 浏览器不变(还没用)。
05Min
把 roster.map(...) 改成 players.map(...) · 删掉硬编码 roster
13 课的 const roster = [...] 整段删 · .map 里改 players。保存 · 1 张哈兰德卡(JSON 只有 1 人)。
06Min
父子合作 · JSON 里加到 22 人(20-30 分钟)
你打字 · 爸爸帮记 rating。建议:曼城 11 人 + 皇马 3 + 利物浦 2 + 拜仁 1 + 马竞 1 + 巴萨 3 + PSG 1。每加一个保存 · 看卡多一张。50 人剩下本周完成。
03🌟 第一个函数 · byRating
07Min
🌟 在 sandbox 写 function byRating(min)
在 import 下面 · export default 上面:\nfunction byRating(min) {\n return players.filter(p => p.rating >= min);\n}\n保存 · 浏览器不变(只是定义)。
08Min
用 byRating(88) 代替 players.map
{byRating(88).map(player => (...卡...))}。保存 · 只剩 rating >= 88 的精英卡。
09Min
改门槛 · byRating(90) · byRating(80)
改数字看卡变少 / 变多。一个参数调节整个列表 —— 函数的力量。
04玩 · 改门槛 · 截图 · 留作业
10Min
顶部加统计 · <p>总共 {players.length} · 精英 {byRating(88).length}</p>
实时统计 · 改 JSON 加一个 · 数字自动跟着变。
11Min
📸 截图战利品
Mac Shift + Cmd + 4 · 存 2026-XX-XX-我的精英阵容.png · Phase 1 第九张战利品。
12Min
📝 本周作业 · 加 28 个到 50 人
每天 4 个 · 周日前 50 人完成。下节课 Demo Day 3 演示需要。不打分但别忘。
Half Time · 中场 · 讲给爸爸听
4 题 · 重点:函数 = 战术
第 3 题用战术比喻讲。第 4 题感受参数的力量。
01为什么把数据搬到 players.json 而不是直接写在 .tsx?Hint ↓
数据 vs 代码分离。数据会变 · 代码相对稳。改 JSON 不动 .tsx · 改 .tsx 不动 JSON。
02JSON 和 JS 对象差在哪 2 个地方?Hint ↓
JSON key 必须双引号 + 不能 trailing comma。其他完全一样。
03什么是函数?用「战术」的比喻讲。Hint ↓
可复用的步骤 —— 写一次用 100 次。教练写「4-3-3 高位逼抢」一次 · 整个赛季用。
04byRating(88) 里的 88 是什么?换 90 会不同?Hint ↓
参数 —— 函数的可调节旋钮。改参数 · 函数的行为跟着变 —— 写一个函数管不同情况。
Player Rating · 本课温度计
给 Phase 1 最大投入打个分
说真话。22 人累不累 · 函数好玩吗。爸爸会看到。
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
你的 22 人球员库上线 · 你写了第一个函数。
还有 12 步没打勾。写够 6-10 个球员 + byRating 跑通 · 今天就过。剩下本周补。