DrillLab
练习Practice

动手做Get your hands on it

练习跟着课文走 —— 每节课尾都有本课的练习。这一页是全部练习的总库,想集中刷题的时候来。 每个练习都写清了它来自哪一节,卡住了就回去看那一节。Practice follows the lessons — every lesson ends with the exercises for that lesson. This page is the whole library, for when you want to drill in one sitting. Each exercise names the lesson it came from, so you can go back when you stall.

0 / 148个做对过you got right
筛一下Filter these地基 · 项目与语言Foundations · project and language
难度LevelL1 → L4 和上面四档同一个意思:给你的东西越来越少L1 → L4: the same idea as the four tiers above — less is handed to you全部难度All levelsL1L1L2L2L3L3L4L4

已筛到你正在学的《地基 · 项目与语言》。想看全部就点上面的「全部」。Filtered to Foundations · project and language — the course you are on. Use “All” above to see everything.

练习Exercises

筛出 16 个练习(共 148 个) · 第 1 / 2 页。Showing 16 of 148 · page 1 / 2.
来自From Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile · 地基 · 项目与语言Foundations · project and language
L1认出来Spot it这个包该放哪边?Which side does this package go on?

下面是 react-notes-app 真实的依赖之一。它在真实的package.json 里被放在哪个字段下?

Below is one of the real dependencies of react-notes-app. Which field of the real package.json is it under?

JSON示意Illustrative
1"vitest": "^4.1.10"
先选一个选项Pick an option first
来自From Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile · 地基 · 项目与语言Foundations · project and language
L1认出来Spot itlockfile 该怎么对待How to treat the lockfile

项目里已经有 package-lock.json,你要安装依赖。下面哪些做法是对的?(多选)

The project already has a package-lock.json and you need to install the dependencies. Which of these are correct? (more than one)

这题是多选。More than one answer is correct.

先选一个选项Pick an option first
来自From package.json 逐字段读一遍package.json, field by field · 地基 · 项目与语言Foundations · project and language
L2填空Fill the blanks补全 subgraph 的 package.json 关键字段Fill in the key fields of the subgraph package.json

下面是 node-subgraph/package.json 的骨架,挖掉了三个决定项目行为的值。 照真实文件补回来。

Below is the skeleton of node-subgraph/package.json with three values removed. Each one decides how the project behaves. Put them back the way the real file has them.

JSONnode-subgraph/package.json3 个空3 blanks
1{
2 "name": "order-subgraph",
3 "main": "src/index.js",
4 "type": "",
5 "scripts": {
6 "start": "node src/index.js",
7 "test": "NODE_OPTIONS=--experimental-vm-modules "
8 },
9 "dependencies": {
10 "@apollo/server": "^4.10.0",
11 "@apollo/subgraph": "^2.7.0",
12 "graphql": "^16.8.1",
13 "graphql-tag": "^2.12.6",
14 "": "^2.2.2"
15 }
16}
把 3 个空都填上才能检查(还差 3 个)Fill all 3 blanks to check (3 to go)
来自From npm scripts:命令到底跑了什么npm scripts: what the command actually runs · 地基 · 项目与语言Foundations · project and language
L1认出来Spot it怎么跑 react-notes-app 的测试How to run the tests of react-notes-app

你在 react-notes-app/ 目录下,想跑那 4 个判卷测试。 package.json 的 scripts 只有 devbuildq2。下面哪个命令能跑起来?

You are inside react-notes-app/ and want to run those 4 grading tests. The scripts in package.json are only dev, build and q2. Which command works?

先选一个选项Pick an option first
来自From npm scripts:命令到底跑了什么npm scripts: what the command actually runs · 地基 · 项目与语言Foundations · project and language
L1排顺序Order itscript 报错了,按什么顺序排查A script failed: in what order do you check things

把排查顺序排对。从最外层(还没开始跑)到最里层(你的代码)。

Put the checks in order, from the outermost layer (nothing has started yet) to the innermost one (your own code).

1读报错里的具体类型/文件/行号,判断是业务代码还是项目配置Read the exact type, file and line number in the error, and decide whether it is your code or the project config
2确认命令名和当前目录对不对(npm run 列一下)Check the command name and the current directory (run npm run to list them)
3确认 npm install 跑过、node_modules 在Check that npm install has run and node_modules exists
来自From 两个考试项目的目录,逐个说明The directory layout of both exam projects · 地基 · 项目与语言Foundations · project and language
L1认出来Spot itQ1 的 state 应该放在哪个文件Which file should hold the state for Q1

Q1 要求「表单提交后,新笔记出现在表格里」。表单是NoteForm,表格是 NoteTable,两者是兄弟。 那份笔记列表数据应该存在哪个组件里?

Q1 asks that a new note appears in the table after the form is submitted. The form is NoteForm, the table is NoteTable, and the two are siblings. Which component should hold the list of notes?

先选一个选项Pick an option first
来自From 两个考试项目的目录,逐个说明The directory layout of both exam projects · 地基 · 项目与语言Foundations · project and language
L1认出来Spot it哪个是干扰项Which one is the distractor

Federation 项目里,下面哪个文件与你要完成的任务完全无关?

In the Federation project, which of these files has nothing at all to do with the task you have to finish?

先选一个选项Pick an option first
来自From 数组与对象:不可变更新三件套Arrays and objects: three ways to update without changing the original · 地基 · 项目与语言Foundations · project and language
L2填空Fill the blanks补全 Q1 的三个数据操作Fill in the three data operations of Q1

这是 NoteManager 里三个 handler 的真实代码, 挖掉了决定行为的关键词。想清楚每个操作要「保留多少条」再填。

This is the real code of the three handlers in NoteManager, with the words that decide the behaviour removed. Before you fill each one in, work out how many items that operation has to keep.

TSXsrc/components/NoteManager/index.tsx4 个空4 blanks
1const handleSubmitNote = (submittedNote: Note) => {
2 if (noteToEdit) {
3 setNotes((prev) =>
4 prev.((note) =>
5 note.id === submittedNote.id ? submittedNote : note,
6 ),
7 );
8 setNoteToEdit(null);
9 } else {
10 setNotes((prev) => [, submittedNote]);
11 }
12};
13
14const handleDelete = (id: number) => {
15 setNotes((prev) => prev.((note) => note.id id));
16};
把 4 个空都填上才能检查(还差 4 个)Fill all 4 blanks to check (4 to go)
来自From 数组与对象:不可变更新三件套Arrays and objects: three ways to update without changing the original · 地基 · 项目与语言Foundations · project and language
L2Debug LabDebug LabDebug Lab · 数据加进去了,界面没反应Debug Lab · the data went in, the screen did not move

这一类 bug 最难查,因为它不报错。 先看现象,判断类型,再找病灶 —— 别跳步。

This kind of bug is the hardest to find, because it reports no error. Read the symptom, classify it, then locate it. Do not skip a step.

第 1 步 · 先看现象和代码,别急着改Step 1 · read the symptom and the code before you touch anything
# 没有任何报错。控制台干净。 # 现象:填好表单点 Add,表格里什么都不出现。 # 在 handleSubmitNote 里 console.log(notes) —— 长度确实在增加。 notes.length before: 0 notes.length after : 1 ← 数据真的进去了 (但 <NoteTable /> 渲染出来的行数始终是 0)# No error at all. The console is clean. # Symptom: fill in the form, click Add, and nothing shows up in the table. # Add console.log(notes) inside handleSubmitNote — the length really does grow. notes.length before: 0 notes.length after : 1 ← the data really did go in (But <NoteTable /> always renders 0 rows.)
TSX有问题的写法The broken version示意Illustrative
1const handleSubmitNote = (submittedNote: Note) => {
2 notes.push(submittedNote);
3 setNotes(notes);
4};
第 2 步 · 这是什么类型的错误Step 2 · what kind of error is this
来自From 异步:Promise、await、all 和 allSettledAsync: Promise, await, all and allSettled · 地基 · 项目与语言Foundations · project and language
L1认出来Spot it该用 all 还是 allSettledall or allSettled

Q2 的要求原文:「The runner NEVER throws, even if some tasks reject. It resolves with an array of results IN THE SAME ORDER as tasks.」 这描述的是哪个内置方法的语义?

The exact wording of the Q2 requirement: “The runner NEVER throws, even if some tasks reject. It resolves with an array of results IN THE SAME ORDER as tasks.” Which built-in method behaves like that?

先选一个选项Pick an option first
来自From 异步:Promise、await、all 和 allSettledAsync: Promise, await, all and allSettled · 地基 · 项目与语言Foundations · project and language
L1认出来Spot it为什么 tasks 是「函数数组」而不是「Promise 数组」Why tasks is an array of functions, not an array of Promises

Task<T> = () => Promise<T>。 如果题目改成传一个 Promise<T>[] 进来, 会出什么问题?

Task<T> = () => Promise<T>. If the question passed in a Promise<T>[] instead, what would go wrong?

先选一个选项Pick an option first
来自From 异步:Promise、await、all 和 allSettledAsync: Promise, await, all and allSettled · 地基 · 项目与语言Foundations · project and language
L2填空Fill the blanks补全 DataLoader 的批量函数Fill in the batch function of the DataLoader

这是 subgraph 里真实的 DataLoader 批量加载函数。 两个空都关系到「异步 + 数组」的固定套路。

This is the real DataLoader batch function from the subgraph. Both blanks are part of the fixed pattern for async work over an array.

JSsrc/resolvers/orderResolvers.js2 个空2 blanks
1function createShippingInfoLoader(shippingDataSource) {
2 return new DataLoader(async orderIds => {
3 const shippingInfos = await Promise.(
4 orderIds.(id => shippingDataSource.getShippingInfo(id))
5 );
6
7 return shippingInfos;
8 });
9}
把 2 个空都填上才能检查(还差 2 个)Fill all 2 blanks to check (2 to go)