JavaScript：变量、函数与数据
JavaScript 让任务数据可以被保存、判断和转换。本课先离开页面，只在控制台里追踪值怎样进入函数、经过处理并返回。
- 能逐步说清新增、筛选和统计函数接收什么数据，产生什么新值，以及原数组是否被修改。
- 值、变量、对象和数组
- 观察JavaScript：变量、函数与数据后，应当能逐步说清新增、筛选和统计函数接收什么数据，产生什么新值，以及原数组是否被修改，并保留页面结构、不同宽度截图、控制台和元素状态作为可重复检查的依据。
- 完成 3.2「CSS：盒模型、布局与响应式」
FOUNDATION
必须理解
页面交互背后先是数据处理。变量保存当前值，函数把处理过程命名，数组和对象则让多条任务拥有统一形状。
本课依次讲清值、变量、对象和数组、函数的输入、处理与返回值和条件、循环与数据转换，最后通过“为每个函数准备正常、空数组和不同状态的控制台检查”检查学习结果。
一条任务像一张登记卡，对象写着卡片上的字段，数组是装卡片的盒子，函数是新增、筛选或统计卡片的操作步骤。
任务先以对象存在内存中，每条记录含有 id、title 和 done。新增函数返回新任务，筛选函数根据 done 选出需要显示的记录。
值、变量、对象和数组
字符串、数字和布尔值表达不同种类的数据。对象把一条任务的字段放在一起，数组按顺序保存多条任务。
基础概念
JavaScript 用值表示程序正在处理的信息。字符串保存文字，数字用于计数，布尔值表达真假，对象把一条记录的字段组织在一起。
进一步理解
变量给当前值一个可读名称。名称应说明数据用途，例如 tasks 表示任务集合，newTitle 表示准备新增的标题。
数组按顺序保存多条数据，可以读取长度、选择其中一项，也可以产生筛选或转换后的新数组。
一条任务写成包含 id、title 和 done 的对象，多条任务放进数组。控制台展开对象后，可以直接核对每个字段。
对象描述一条记录有哪些字段，数组保存多条记录。把二者混淆后，读取方式和报错位置都会不同。
这一小节记住：先能说出每个值的种类和用途，再继续写处理逻辑。
函数的输入、处理与返回值
函数把一段处理过程收进名字里。参数是调用者交进来的值，返回值是函数处理后交回去的结果，它们都可以在控制台直接观察。
基础概念
函数把一段处理过程命名。参数是调用时传入的数据，函数体执行规则，返回值把处理结果交给调用位置。
进一步理解
函数名应说明动作。addTask 表示新增任务，countOpenTasks 表示计算未完成数量，调用者不必每次重读内部步骤。
没有明确 return 的函数会得到 undefined。控制台打印和返回值也不同，打印只是观察，返回值才能继续交给别的代码。
调用 addTask('复习 HTML') 后得到一条新任务对象，再由调用者决定把它放进哪个数组。
参数是函数收到的输入，外部变量是函数自行去别处寻找的值。显式参数更容易单独测试和复用。
这一小节记住：读函数时按输入、处理、返回值三步追踪。
条件、循环与数据转换
条件会根据真假选择分支，循环或数组方法会对多条记录重复处理。先写清输入和预期输出，再决定使用哪一种语法。
基础概念
条件语句根据真假决定是否执行某段代码。循环和数组方法会对集合中的多项数据依次重复应用同一条处理规则。
进一步理解
判断空标题时，程序可以先去掉首尾空格，再检查剩余长度。筛选任务时，每条记录都要经过同一个真假条件。
map 常用于把每项转换成新值，filter 保留符合条件的项目。它们表达的目的不同，选择时先说清最终想得到什么。
getCompletedTasks 检查每条任务的 done，只把值为 true 的记录放进新数组，原任务数组保持不变。
条件决定当前走哪条分支，循环或数组方法负责对多条记录重复执行。写出一个条件，并不会自动遍历整个任务数组。
这一小节记住：先写出规则和预期结果，再选择条件或数组方法。
AI COLLABORATION
AI 如何参与
在JavaScript：变量、函数与数据这一课，AI 负责根据真实材料解释值、变量、对象和数组并指出遗漏，学习者负责控制范围、执行修改和核对页面结构、不同宽度截图、控制台和元素状态。
推荐协作顺序
- 1
先把一条任务写成普通对象并在控制台查看。
- 2
让 AI 只写一个函数，同时给正常输入和边界输入。
- 3
亲自改数据并预测结果，运行后再比较预测。
下面是任务数组和三个函数。请按实际执行顺序解释，每一步列出参数、局部变量和返回值。不要改写代码，也不要省略数组变化。最后给三组输入让我在控制台核对，其中一组必须是空数组。
三个可以在控制台独立调用的函数。每个函数的输入、处理和返回值都能用示例数据核对；JavaScript：变量、函数与数据的人工验收必须回到真实页面、请求、终端、测试或数据结果，不能用 AI 的文字说明代替。
人工检查清单
- 更换任务标题和完成状态再次调用，确认结果来自传入数据，而不是示例里写死的答案。
- 要求 AI 为每个示例列出真实输入和返回值，不能只解释语法名称。
- 更换任务标题、空数组和完成状态再次运行，确认函数没有写死示例答案。
COMMON TRAPS
常见误区
下面三类问题会让任务看似完成，却经不起刷新、错误输入或真实环境检查。先看现象，再找原因和修正方法。
背语法却不追踪值
- 你会看到
- 能照写函数，但无法预测一次调用的结果
- 为什么发生
- 程序结果由数据在每一步怎样变化决定，只记写法无法解释实际输出。
- 怎样纠正
- 为每一步写出当前输入与输出
把 console.log 当 return
- 你会看到
- 控制台有内容，调用方却得到 undefined
- 为什么发生
- 打印只把信息交给控制台，return 才会把值交回调用位置。
- 怎样纠正
- 明确需要观察还是需要把结果交给下一段代码
无意中修改原数组
- 你会看到
- 筛选前后的数据互相影响，结果难以复现
- 为什么发生
- 多个变量仍指向同一数组时，一处改动会悄悄影响其他计算。
- 怎样纠正
- 在练习中对比调用前后引用与内容
HANDS-ON
动手任务
能逐步说清新增、筛选和统计函数接收什么数据，产生什么新值，以及原数组是否被修改。
- 完成 3.2「CSS：盒模型、布局与响应式」
跟着做
- 01
在 script.js 中创建三条任务组成的数组。
- 02
写 addTask，让它接收标题并返回一条新任务。
- 03
写 getCompletedTasks，返回所有已完成任务。
- 04
写 countOpenTasks，返回未完成任务数量。
- 05
为每个函数准备正常、空数组和不同状态的控制台检查。
能逐步说清新增、筛选和统计函数接收什么数据，产生什么新值，以及原数组是否被修改。
增加 toggleTask 函数。它接收任务数组和目标 id，返回完成状态被切换的新数组。
离开本课前，自问四件事
- 对象和数组在任务数据中分别承担什么角色？
- 函数参数、控制台输出和返回值有什么区别？
- filter 与 map 想得到的结果有什么不同？
- 我能否在运行前预测三个练习函数的返回值？
确认完成后，会同步更新学习中心的课程学习进度。