前端入门学习笔记（Day08）：JavaScript 控制流程深化、函数进阶与 JSON 数据处理

引入：

从 “基础逻辑” 到 “复杂交互” 的关键跨越​

  在前七天的前端学习中，我们已掌握 HTML 结构搭建、CSS 样式布局，以及 JavaScript 的变量声明、数据类型、数组操作与基础运算符。随着前端开发需求升级，仅靠基础逻辑无法满足 “多条件判断”“循环精准控制”“数据跨端交互” 等复杂场景 —— 例如商品列表的条件筛选、表单提交的函数封装、前后端数据的格式传递，都需要更系统的控制流程、函数技巧与数据格式知识。​

  Day08 聚焦三大核心模块：控制流程深化（switch 分支、while/do-while 循环）、循环中断与函数  进阶（continue/break、匿名函数、局部函数）、JSON 数据处理（前端与后端交互的核心格式）。这些知识点既是对 Day04 条件语句、Day06 函数基础的拓展，也是后续学习 DOM 复杂交互、AJAX 数据请求的重要铺垫，帮助我们实现从 “写简单代码” 到 “编实用功能” 的跨越。

一、JavaScript 控制流程：数组遍历与条件分支实战

控制流程是编程中 “按逻辑顺序执行代码” 的核心，Day08 通过三个代码文件，聚焦 “数组遍历”“多条件分支判断” 和 “异常捕获” 三大模块，既是对 Day04 条件语句、Day07 数组知识的深化，也为处理复杂业务逻辑（如数据筛选、错误兼容）奠定基础。本节先解析 “数组遍历” 与 “多条件分支判断” 的核心用法。

1.1 数组遍历：三种常用方式的差异与场景

数组遍历是 “逐个访问数组元素并处理” 的操作（如计算数组总和、筛选符合条件的元素），Day08 第一个代码文件演示了传统for循环、for...in、for...of三种遍历方式，需重点掌握它们的适用场景与差异。

（1）传统 for 循环：灵活控制遍历过程

传统for循环通过 “索引控制” 遍历数组，支持自定义起始位置、步长，是最灵活的遍历方式，也是 Day04 循环知识的直接应用。

语法结构：

for (初始化索引变量; 循环条件（索引范围）; 索引更新) {

// 处理当前索引对应的数组元素

}

代码实战：遍历数组并计算元素总和

var arr = [5, 7, 4, 2, 0, 3, 1, 6];

var sum = 0; // 用于存储数组元素总和

// 传统for循环：从索引0遍历到最后一个元素（arr.length-1）

for (var i = 0; i < arr.length; i++) {

console.log("当前元素索引：", i, "，元素值：", arr[i]); // 打印索引与元素

sum += arr[i]; // 累加元素值到sum

}

console.log("数组元素总和：", sum); // 输出：28（5+7+4+2+0+3+1+6）

适用场景：需获取元素索引、控制遍历范围（如只遍历前 5 个元素）、自定义步长（如隔一个元素遍历）的场景。

（2）for...in 循环：遍历数组索引（谨慎使用）

for...in循环本质是 “遍历对象的可枚举属性”，用于数组时，遍历的是数组的 “索引值”（而非元素本身），需通过数组[索引]获取元素。

语法结构：

for (索引变量 in 数组) {

// 索引变量存储当前索引，通过数组[索引变量]获取元素

}

代码实战：用 for...in 遍历数组

var arr = [5, 7, 4, 2, 0, 3, 1, 6];

for (var index in arr) {

// index是字符串类型的索引（如"0"、"1"），需注意类型转换

console.log("当前索引（字符串）：", index, "，元素值：", arr[index]);

// 若需用索引做数字计算，需先转为数字类型

var numIndex = Number(index);

if (numIndex % 2 === 0) { // 只处理偶数索引的元素

console.log("偶数索引元素：", arr[numIndex]);

}

}

注意事项：

• for...in遍历的索引是字符串类型，直接用于数字计算会导致错误（如index + 1会变成 "01" 而非 1），需用Number()转换；

• 若数组被手动添加了额外属性（如arr.name = "测试"），for...in会同时遍历这些非元素属性，因此不推荐优先用于数组遍历，更适合遍历对象。

（3）for...of 循环：直接遍历数组元素（推荐）

for...of是 ES6 新增的遍历方式，专门用于 “遍历可迭代对象（如数组、字符串）的元素”，无需通过索引，直接获取元素值，代码更简洁。

语法结构：

for (元素变量 of 数组) {

// 元素变量直接存储当前数组元素

}

代码实战：用 for...of 遍历数组并筛选元素

var arr = [5, 7, 4, 2, 0, 3, 1, 6];

var evenArr = []; // 用于存储数组中的偶数元素

for (var item of arr) {

console.log("当前元素：", item); // 直接打印元素值，无需索引

// 筛选偶数元素，添加到evenArr

if (item % 2 === 0) {

evenArr.push(item);

}

}

console.log("数组中的偶数元素：", evenArr); // 输出：[4, 2, 0, 6]

适用场景：只需处理数组元素本身，无需关注索引的场景（如筛选元素、计算总和、遍历字符串），是数组遍历的推荐方式（除需索引的场景外）。

三种遍历方式对比表

遍历方式	遍历对象	是否需索引转换	适用场景	优点	缺点
传统 for 循环	索引	否（数字类型）	需索引、控制范围、自定义步长	灵活度高，支持所有场景	代码稍繁琐，需维护索引变量
for...in 循环	字符串索引	是（需转数字）	遍历对象属性，不推荐遍历数组	可遍历对象属性	索引是字符串，可能遍历非元素属性
for...of 循环	元素本身	无需索引	只需处理元素，无需索引	代码简洁，直接获取元素	无法直接获取索引（需额外处理）

1.2 多条件分支判断：函数内的嵌套条件逻辑

Day08 第三个代码文件通过 “根据年龄判断人群类别” 的函数，演示了if-else if-else多条件分支的应用，结合了 Day06 函数基础、Day07 数据类型判断（typeof），实现了 “参数校验 + 多场景判断” 的完整逻辑。

（1）场景分析：根据年龄分类人群

需求逻辑：

1. 先校验参数age是否为数字类型，若不是，提示 “参数不是数值类型”；

1. 若为数字，按年龄范围分类：

• • 年龄 > 60 → 老年人；

• • 40 < 年龄≤60 → 中年人；

• • 20 < 年龄≤40 → 青年人；

• • 年龄≤20 → 少年。

（2）完整代码解析

// 定义函数test，接收参数age（待判断的年龄）

function test(age) {

// 第一步：参数类型校验（用typeof判断是否为数字类型）

if (typeof age === "number") {

// 第二步：多条件分支判断年龄范围（if-else if-else）

if (age > 60) {

console.log("老年人");

} else if (age > 40) { // 隐含条件：age ≤60（前一个条件不满足）

console.log("中年人");

} else if (age > 20) { // 隐含条件：age ≤40

console.log("青年人");

} else { // 所有条件不满足，即age ≤20

console.log("少年");

}

} else {

// 参数不是数字类型时的提示

console.log("参数不是数值类型");

}

}

// 调用函数，测试不同场景

test(55); // 输出：中年人（40<55≤60）

test(25); // 输出：青年人（20<25≤40）

test(70); // 输出：老年人（70>60）

test(18); // 输出：少年（18≤20）

test("30"); // 输出：参数不是数值类型（"30"是字符串）

（3）关键知识点与优化

• 参数校验的必要性：前端开发中，函数参数可能来自用户输入、接口返回等不确定来源，用typeof age === "number"校验类型，可避免因参数类型错误导致的逻辑异常（如"30" > 20虽为 true，但不符合预期）；

• 条件顺序的重要性：if-else if需按 “范围从大到小” 或 “从特殊到一般” 排列，若将age > 20放在最前面，会导致age=55也满足该条件，后续判断无法执行；

• 优化建议：可通过 “返回值” 让函数更灵活（而非直接打印），便于后续复用：

function getAgeGroup(age) {

if (typeof age === "number") {

if (age > 60) return "老年人";

if (age > 40) return "中年人";

if (age > 20) return "青年人";

return "少年";

}

return "参数不是数值类型";

}

// 调用函数并接收结果，灵活使用

var result = getAgeGroup(55);

console.log("年龄分类结果：", result); // 输出：年龄分类结果：中年人

二、JavaScript 分支与循环进阶：switch 语句与 while/do-while 循环

在前一部分学习数组遍历与异常捕获的基础上，Day08 第四至第六个代码文件聚焦 多条件分支（switch 语句） 与 循环控制（while/do-while 循环），进一步完善 JavaScript 控制流程体系。这些语法是实现 “按条件执行不同逻辑”“重复执行代码块” 的核心，尤其适用于日期判断、累加计算等高频场景。

2.1 switch 语句：多条件分支的高效实现

当需要根据一个变量的 “多个固定值” 执行不同逻辑时（如根据星期几显示对应文案、根据状态码返回提示信息），switch 语句比多层 if-else 更简洁直观。Day08 第四个代码文件通过 “判断当前星期几” 的案例，演示了 switch 语句的基础用法与核心注意事项。

（1）switch 语句的基础语法与执行逻辑

switch 语句通过 “匹配变量值与 case 后的值” 来执行对应代码块，核心语法结构如下：

switch(表达式) { // 表达式：通常是变量或返回单一值的计算（如日期、状态码）

case 值1:

// 当表达式结果 === 值1 时执行的代码

break; // 跳出 switch 语句，避免继续执行后续 case

case 值2:

// 当表达式结果 === 值2 时执行的代码

break;

// ... 更多 case

default:

// 当表达式结果不匹配任何 case 时执行的代码（可选）

break;

}

关键规则：

• 匹配逻辑：switch 采用 严格相等（===） 匹配，需同时满足 “值相等” 和 “类型相等”；

• break 的作用：执行完当前 case 代码后，必须用 break 跳出 switch，否则会 “穿透” 到下一个 case（即使值不匹配）；

• 多值匹配：多个 case 可共用同一代码块（如 Day08 代码中 case4、5、6 共同输出 “星期六”）。

（2）Day08 代码解析：根据星期几执行逻辑

Day08 第四个代码文件通过 new Date().getDay() 获取当前星期几（返回值为 0-6，0 代表星期日，1-6 代表周一至周六），再用 switch 语句匹配对应逻辑：

// 1. 获取当前星期几：getDay() 返回 0（周日）-6（周六）

var date = new Date().getDay();

console.log(date); // 示例：若当天是周一，输出 1

// 2. switch 语句匹配星期几，执行对应逻辑

switch(date) {

case 0: // 匹配周日（date === 0）

var a = 10; // 此处无 break，会穿透到下一个 case

case 1: // 匹配周一（date === 1）

console.log("星期一");

break; // 执行后跳出 switch，避免继续穿透

case 2: // 匹配周二（date === 2）

console.log("星期二");

break;

case 3: // 匹配周三（date === 3）

console.log("星期三");

break;

case 4: case 5: case 6: // 多值匹配：周四、五、六共用同一逻辑

console.log("星期六"); // 注意：此处代码存在逻辑偏差，实际应区分“周四、五、六”，需优化

break;

default: // 无匹配时执行（如 date 为非 0-6 的异常值）

console.log("信息错误");

break;

}

（3）代码优化与常见场景拓展

Day08 代码中 case4-6 均输出 “星期六” 存在逻辑偏差，可优化为区分不同星期；同时补充 switch 语句的典型应用场景：

优化案例：正确区分周一至周日

var date = new Date().getDay();

switch(date) {

case 0:

console.log("星期日");

break;

case 1:

console.log("星期一");

break;

case 2:

console.log("星期二");

break;

case 3:

console.log("星期三");

break;

case 4:

console.log("星期四");

break;

case 5:

console.log("星期五");

break;

case 6:

console.log("星期六");

break;

default:

console.log("信息错误");

break;

}

拓展场景：根据状态码返回提示信息

// 模拟接口返回的状态码（200=成功，404=未找到，500=服务器错误）

var statusCode = 200;

switch(statusCode) {

case 200:

console.log("请求成功，数据已返回");

break;

case 404:

console.log("请求地址不存在，请检查URL");

break;

case 500:

console.log("服务器内部错误，请稍后重试");

break;

default:

console.log("未知错误，状态码：" + statusCode);

break;

}

2.2 while 循环：先判断后执行的重复逻辑

while 循环是 JavaScript 中最基础的 “条件循环”，核心逻辑是 “先判断条件是否成立，若成立则执行循环体，直至条件不成立时退出”。Day08 第五个代码文件通过 “计算 0-100 的累加和” 案例，演示了 while 循环的基础用法。

（1）while 循环的语法与执行流程

// 语法结构

初始化循环变量; // 如 var i = 0;（定义循环的起始值）

while(循环条件) { // 条件为 true 时执行循环体，为 false 时退出

// 循环体：需要重复执行的代码

更新循环变量; // 如 i++（避免循环条件永远为 true，导致死循环）

}

执行流程：

1. 初始化循环变量（如 var i = 0）；

1. 判断 while 后的条件（如 i <= 100）：

• 若条件为 true，执行循环体；
• 若条件为 false，退出循环，执行后续代码；

1. 执行循环体后，更新循环变量（如 i++），回到步骤 2 重新判断。

（2）Day08 代码解析：0-100 累加和计算

// 1. 初始化变量：sum 存储累加结果（初始为 0），i 为循环变量（初始为 0）

var sum = 0;

var i = 0;

// 2. while 循环：当 i <= 100 时，执行累加逻辑

while(i <= 100) {

sum += i; // 等价于 sum = sum + i，将当前 i 的值累加到 sum

i++; // 循环变量自增 1，避免死循环（若省略 i++，i 永远为 0，条件永远成立）

}

// 3. 循环结束后，输出累加结果（0+1+2+...+100 = 5050）

console.log(sum); // 输出：5050

（3）避坑指南：避免死循环

while 循环的最大风险是 “死循环”（循环条件永远为 true，导致代码无限执行，浏览器卡顿甚至崩溃），需注意两点：

• 必须在循环体中更新循环变量（如 i++、i -= 2）；

• 确保循环条件存在 “变为 false” 的可能（如 i <= 100，当 i 超过 100 时条件不成立）。

错误案例：死循环

var i = 0;

// 错误：循环体中未更新 i，i 永远为 0，条件 i <= 100 永远为 true

while(i <= 100) {

console.log(i);

// 缺少 i++，导致死循环

}

2.3 do-while 循环：先执行后判断的重复逻辑

do-while 循环与 while 循环的核心区别是 “执行顺序”：do-while 先执行一次循环体，再判断条件是否成立 —— 这意味着 无论条件是否成立，循环体至少执行一次。Day08 第六个代码文件同样实现 “0-100 累加和”，但采用 do-while 语法，对比两种循环的差异。

（1）do-while 循环的语法与执行流程

// 语法结构

初始化循环变量;

do {

// 循环体：先执行一次，再判断条件

更新循环变量;

} while(循环条件); // 注意：此处有分号

执行流程：

1. 初始化循环变量；

1. 执行一次循环体；

1. 更新循环变量；

1. 判断 while 后的条件：

• • 若条件为 true，回到步骤 2 继续执行循环体；

• • 若条件为 false，退出循环。

（2）Day08 代码解析：do-while 实现 0-100 累加和

// 1. 初始化变量：与 while 循环一致

var sum = 0;

var i = 0;

// 2. do-while 循环：先执行一次循环体，再判断条件

do {

sum += i; // 第一次执行时，i=0，sum 变为 0

i++; // 第一次执行后，i 变为 1

} while(i <= 100); // 判断 i 是否 <= 100：1 <= 100 为 true，继续循环

// 3. 循环结束后输出结果（与 while 循环一致，均为 5050）

console.log(sum); // 输出：5050

（3）while 与 do-while 的核心差异对比

两种循环的适用场景不同，需根据 “是否需要循环体至少执行一次” 选择：

循环类型	执行顺序	循环体执行次数	适用场景
while	先判断，后执行	0 次或多次（条件不成立时 0 次）	不确定是否需要执行循环体（如根据用户输入决定是否重复操作）
do-while	先执行，后判断	1 次或多次（至少 1 次）	必须执行一次循环体（如表单验证：先提交一次，再判断是否需要重新输入）

差异案例：用户输入验证

// 场景：要求用户输入“yes”或“no”，若输入错误则重复提示（必须执行一次输入判断）

var input;

do {

input = prompt("请输入 yes 或 no："); // 先执行一次输入（循环体至少执行一次）

} while(input !== "yes" && input !== "no"); // 若输入错误，继续循环

console.log("您输入的是：" + input);

若改用 while 循环，首次判断时 input 未定义，条件为 true，会直接进入循环，但实际开发中此类场景更适合 do-while。

三、循环控制关键字、函数进阶与 JSON 数据格式

3.1 循环控制关键字：continue 与 break 的差异与实战

在 Day08 第七个文件中，通过嵌套 for 循环对比了continue与break的核心差异 —— 二者均用于控制循环流程，但终止范围和效果完全不同，是处理 “部分跳过循环”“提前终止循环” 场景的关键工具。

（1）continue：终止 “本次循环”，继续下一次循环

continue的作用是跳过当前循环中剩余的代码，直接进入下一次循环的判断条件，仅影响 “当前循环层级”，不终止外层循环。

第七个文件中相关代码解析：

// 外层循环：i从0到9（共10次），内层循环：j从0到4（共5次）

for(var i=0;i<10;i++){

for(var j=0;j<5;j++){

console.log("当前i的值="+i); // 每次内层循环都会先打印i的值

if(i==2){ inue; // 当i=2时，触发continue

}

// 关键：当i=2时，continue会跳过下面的代码（若有），直接进入下一次j的循环

}

}

cont

执行效果：

• 当i≠2时，内层循环 j 从 0 到 4 会完整执行 5 次，每次都打印 “当前 i 的值 = X”；

• 当i=2时，内层循环 j 从 0 到 4 仍会执行 5 次（未终止内层循环），但每次执行到continue时，会跳过后续代码（若有），仅打印 “当前 i 的值 = 2” 后进入下一次 j 循环。

简言之，continue只 “跳过单次”，不 “终止整体”。

（2）break：终止 “当前循环层级”，跳出整个循环

break的作用是完全终止当前所在的循环层级，直接跳出该循环，不再执行后续任何循环次数，同样仅影响 “当前循环层级”（若为嵌套循环，不终止外层循环）。

第七个文件中相关代码解析：

// 外层循环：m从0到9（共10次），内层循环：j从0到4（共5次）

for(var m=0;m<10;m++){

for(var j=0;j<5;j++){

console.log("当前m的值="+m); // 打印m的值

if(m==2){ eak; // 当m=2时，触发break

}

// 关键：当m=2时，break会直接终止当前内层循环（j的循环），不再执行后续j的次数

}

}

br

执行效果：

• 当m≠2时，内层循环 j 从 0 到 4 完整执行 5 次，打印 5 次 “当前 m 的值 = X”；

• 当m=2时，内层循环 j=0 时打印 “当前 m 的值 = 2”，随后触发break，直接终止内层循环（j 不再执行 1-4 的次数），外层循环继续执行m=3及后续次数。

简言之，break是 “直接跳出当前循环”，而非仅跳过单次。

（3）核心差异总结

关键字	作用范围	执行效果	适用场景
continue	当前循环层级	跳过本次循环剩余代码，进入下一次循环	筛选数据（如跳过奇数，只处理偶数）
break	当前循环层级	完全终止当前循环，跳出循环体	找到目标值后终止循环（如查找匹配项）

3.2 函数进阶：返回值、匿名函数与局部函数

Day08 第八个文件聚焦 JavaScript 函数的进阶用法，补充了 “函数返回值”“匿名函数”“局部函数” 三个核心知识点，完善了函数的功能边界，为后续模块化开发铺垫。

（1）函数返回值：用 return 传递计算结果

return关键字的作用是将函数内部的计算结果传递给函数调用者，同时终止函数执行（return后的代码不再执行）。第八个文件中通过 “拼接问候语” 案例演示了返回值的使用：

// 定义带参数和返回值的函数：判断参数是否为字符串，是则返回问候语

function hello(name){

if(typeof name=='string'){

return name+"你好"; // 将拼接后的字符串返回给调用者

// return后若有代码，不会执行（如console.log("不会执行")）

}

}

// 调用函数：接收返回值并赋值给变量message

var message=hello("admin");

alert(message); // 弹出："admin你好"

关键注意点：

• 若函数未写return，或return后无值，函数默认返回undefined；

• return只能返回一个值，若需返回多个值，可通过数组或对象（如 JSON）包裹。

（2）匿名函数：无名称的函数，通过变量引用调用

匿名函数即 “没有函数名的函数”，需通过变量或事件绑定（如onclick）引用才能调用，是 Day05 “事件交互” 中匿名回调函数的基础。第八个文件中相关代码解析：

// 定义匿名函数：将匿名函数赋值给常量aaa（通过变量引用函数）

const aaa=function(){

alert("你好"); // 函数体：弹出提示

}

// 调用匿名函数：通过变量名+()执行

aaa(); // 弹出："你好"

常见应用场景：

• 事件绑定：btn.onclick = function(){/* 点击逻辑 */}（Day05 已实践）；

• 定时器：setInterval(function(){/* 定时逻辑 */},1000)（Day05 倒计时案例）。

（3）局部函数：函数内部定义的函数，仅在内部生效

JavaScript 允许 “在函数内部定义另一个函数”，这种内部函数称为 “局部函数”，其作用域仅限于外部函数内部，外部无法访问，这是 JavaScript 与 C 语言、Java 的核心差异之一（后两者不支持函数嵌套定义）。第八个文件中相关代码解析：

// 外部函数：test

function test(){

// 局部函数：inner，仅在test内部可访问

function inner(){

console.log("局部函数，仅在test内部生效");

}

// 调用局部函数：只能在外部函数内部执行

inner(); // 执行：打印"局部函数，仅在test内部生效"

}

// 外部调用局部函数：报错（inner未定义）

// inner(); // Uncaught ReferenceError: inner is not defined

核心作用：

• 封装外部函数的 “辅助逻辑”，避免全局命名污染（如外部函数的计算过程拆分为局部函数）；

• 实现 “闭包”（后续进阶知识点）的基础。

3.3 JSON 数据格式：前后端交互的核心数据载体

Day08 第九个文件介绍了 JSON（JavaScript Object Notation）—— 一种轻量级的数据交换格式，是前端与后端（如 Java、Python）传递数据的标准格式，核心是 “键值对” 结构，支持对象和数组两种形态。

（1）JSON 对象：单个数据实体，用 {} 包裹

JSON 对象以{key: value}形式存储数据，key必须是字符串（可省略引号，建议加上），value支持字符串、数字、布尔值、数组、另一个 JSON 对象等类型。第九个文件中相关代码解析：

// 定义JSON对象：存储“名称”和“网址”

var object={"name":"倾城","url":"www.qc.com"};

// 访问JSON对象的属性：两种方式

console.log(object.name); // 方式1：对象.键名 → 输出："倾城"

console.log(object["url"]); // 方式2：对象["键名"] → 输出："www.qc.com"

（2）JSON 数组：多个 JSON 对象的集合，用 [] 包裹

当需要存储 “多个同类型数据实体”（如多个网站信息、多个用户信息）时，需用 JSON 数组，即[{}, {}, {}]形式。第九个文件中相关代码解析：

// 定义JSON数组：包含3个JSON对象（每个对象代表一个网站）

var jsonArray=[

{"name":"倾城","url":"www.qc.com"},

{"name":"阿里巴巴","url":"www.alibaba.com"},

{"name":"腾讯","url":"www.tx.com"}

];

// 访问JSON数组中的元素：先通过索引取对象，再通过键名取属性

console.log(jsonArray[1].name); // 数组索引1对应第二个对象 → 输出："阿里巴巴"

console.log(jsonArray[2]["url"]); // 数组索引2对应第三个对象 → 输出："www.tx.com"

（3）JSON 的核心作用与语法规则

核心作用	语法规则
前后端数据交互	1. 数据以键值对（key: value）形式存在；2. 多个键值对用逗号（,）分隔；3. 对象用{}包裹，数组用[]包裹；4. key建议用双引号（标准 JSON 要求），value为字符串时必须用引号。
存储复杂数据	支持嵌套（如 JSON 对象的value是另一个 JSON 数组），适合存储结构化数据（如用户信息：包含姓名、年龄、地址数组）

实际应用场景：

• 后端返回数据：后端接口通常返回 JSON 格式数据（如{"code":200,"data":{"name":"admin"},"msg":"success"}），前端解析后渲染页面；

• 本地存储：通过localStorage存储数据时，需将 JSON 对象转为字符串（JSON.stringify()），读取时再转回对象（JSON.parse()）。

四、总结：Day08 核心知识点与实战价值

Day08 围绕 “控制流程”“函数”“JSON” 三大维度，构建了 JavaScript 处理复杂逻辑与数据的能力体系，核心知识点及与前序知识的衔接、实战价值如下：

（一）控制流程：从 “分支” 到 “循环” 的精准控制

1. 分支语句深化（switch）

• 补充了 Day04if-else多条件判断的不足，适用于 “固定值匹配” 场景（如根据星期几显示对应内容），通过case穿透（如case4:case5:case6）简化重复代码，break避免分支溢出，default处理异常情况，比多层if-else更简洁易读。

1. 循环语句拓展（while/do-while）

• 与 Day07 数组遍历的for循环形成互补：while适合 “循环次数不确定” 的场景（如用户输入验证），do-while确保 “循环体至少执行一次”（如表单初次提交校验），通过累加变量（如求和案例中的sum与i）实现数值计算，丰富了循环应用场景。

1. 循环中断技巧（continue/break）

• 解决了 “循环精准控制” 的痛点：continue仅终止 “本次循环”（如跳过特定条件的循环体执行），break完全终止 “当前循环”（如满足条件时提前退出嵌套循环内层），避免无效循环执行，提升代码效率 —— 这在商品列表筛选（跳过不符合条件的商品）、数据校验（遇到错误立即终止检查）中高频使用。

（二）函数进阶：从 “基础定义” 到 “灵活封装”

1. 函数返回值与参数校验

• 强化了 Day06 函数基础的实用性：通过return将函数处理结果传递给调用者（如hello(name)返回拼接后的问候语），并在函数内部添加参数类型校验（typeof name === 'string'），避免因参数错误导致的功能异常，这是表单验证、工具函数封装的核心思路。

1. 匿名函数与局部函数

• 拓展了函数定义方式：匿名函数（如const aaa = function(){}）适合 “一次性使用” 的场景（如事件绑定的回调函数，衔接 Day05onmouseover事件）；局部函数（函数内部定义的inner()）实现 “逻辑私有化”，避免全局变量污染，是复杂功能拆分（如表单提交拆分为 “验证函数”“提交函数”）的重要技巧 —— 这也是 JavaScript 与 C 语言、Java 在函数定义上的核心差异（后两者不支持函数嵌套定义）。

（三）JSON：前端与后端交互的 “数据桥梁”

• 掌握了前端开发的核心数据格式：JSON 以 “键值对”（{"name":"倾城","url":"www.qc.com"}）存储数据，支持对象与数组嵌套（如jsonArray包含多个 JSON 对象），通过 “对象。键名”（object.name）或 “数组索引。键名”（jsonArray[1].name）快速获取数据。

• 实战价值：JSON 是前后端数据交互的标准格式（如后端返回的商品列表、用户信息均为 JSON 格式），Day08 的学习为后续 AJAX 请求、接口调用奠定基础，解决了 “前端如何接收、解析后端数据” 的关键问题。

整体学习收获

Day08 的知识点串联起 “逻辑控制→功能封装→数据交互” 的完整链路：控制流程确保代码按预期执行，函数封装实现逻辑复用与解耦，JSON 处理打通数据传递通道。建议通过实战练习（如用 “switch + 循环 + 函数” 实现 “日历打印” 功能，用 JSON 模拟 “商品列表数据渲染”）巩固知识点，为后续学习 DOM 动态渲染、前后端联调做好准备 —— 这些能力将直接决定我们能否开发出 “能跑通、能用好” 的前端功能。