一、知识回顾（读完直接做下面的实践题）#

1. JS 是弱类型语言：变量可以存放不同类型的值；声明变量用 let、声明常量用 const（一旦声明，常量的值不能改变、不可以重新赋值）；早期还能用 var，但不严谨、不推荐（没有块级作用域、可以重复声明）
2. 变量名规则：只能由字母、数字、下划线（_）、美元符号（$）组成且数字不能开头；严格区分大小写（name 和 Name 是两个变量）；不能使用关键字（let、var、if、for 等）
3. 三种输出语句：window.alert() 弹出警告框（window. 可省略，频次高）、console.log() 写入浏览器控制台（频次高，F12 → Console）、document.write() 向 HTML 的 body 内输出内容（不常用）
4. 数据类型分基本数据类型和引用数据类型（对象）；基本类型五种：number（整数、小数、NaN）、boolean、null（对象为空）、undefined（声明未初始化时的默认值）、string
5. 用 typeof 运算符获取数据类型；typeof null 的结果是 object（历史遗留问题，判断 null 要用 a === null，别用 typeof）
6. 字符串单引号、双引号、反引号皆可，推荐单引号；模板字符串用反引号包住整句、变量用 ${} 嵌进去，可以完全替代 + 拼接
7. == 会先做隐式类型转换再比较（'10' == 10 为 true）；===（全等）要求类型和值都相同才为 true，判断相等推荐用 ===
8. 算术运算的两个差异：+ 两边只要有字符串就是拼接；/ 是普通除法，5 / 2 得 2.5（不像 Java 得 2）
9. 流程控制 if / else if / else、for、while、do…while、switch 的写法和 Java 几乎一样（switch 的 case 照样要写 break）；计数变量用 let 声明
10. JS 的条件不要求布尔值：0、''、null、undefined、NaN、false 会被当成 false（假值），其余都当成 true——所以 if (n) 这种写法在 JS 里是合法的

二、裸写题#

• 2-1 变量与常量：看看弱类型和”改不动的常量” 按三步做，每步都用输出语句看结果：

  1. 声明一个变量存数字 10，然后把它依次改成字符串 "Hello"、布尔值 true，弹窗看看最后是什么
  2. 声明一个常量存圆周率 3.14，用控制台输出它
  3. 给这个常量重新赋值为 5.0（故意写错），保存后刷新页面，看控制台报了什么错；看完把这行改回注释 （练习文件 test_14_变量与常量.html 里已经给了骨架和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：变量用声明变量的关键字、常量用声明常量的关键字；“看结果”有两种办法——弹窗和控制台 二级 · 方法：let 声明变量、const 声明常量；alert(...) 弹窗、console.log(...) 输出到控制台 三级 · 骨架：let a = ____; a = "____"; a = ____; alert(a); / const PI = 3.14; console.log(____); / //PI = 5.0;

  参考答案（做完再点开）

  1
  //1. 声明变量（弱类型：同一个变量可以换成别的类型）
  2
  let a = 10;
  3
  a = "Hello";
  4
  a = true;
  5
  alert(a); // 最后弹出 true
  6
  
  7
  //2. 声明常量
  8
  const PI = 3.14;
  9
  console.log(PI); // 输出到控制台
  10
  //PI = 5.0;      // 取消注释会报错：Uncaught TypeError: Assignment to constant variable.

  对照课程 02. JS-基础语法.html：变量那三行、常量那两行在课程代码里都是分开注释演示的（拆注释逐个看）。第 3 步的报错说明常量不可以重新赋值，而且页面会停在报错那一行。

• 2-2 用类型检测给五个变量”验明正身” 声明五个变量，分别装：整数 10、小数 1.5、布尔值 true、字符串 'JS'、以及一个只声明不给初始值的变量；再用类型检测运算符把它们的类型逐个打印到控制台。另外顺手检测一下 null 的类型，看结果和你想的是否一样。 （练习文件 test_14_数据类型与typeof.html 里已经给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：每种值用一个变量装；“类型检测”是一个运算符，直接放在值前面用 二级 · 方法：typeof 值 得到类型字符串（结果有 number、boolean、string、undefined、object）；打印用 console.log() 三级 · 骨架：let a = 10; console.log(____ a); / let b; console.log(typeof ____); / console.log(typeof ____); // null 的类型

  参考答案（做完再点开）

  1
  let a = 10;
  2
  console.log(typeof a);        // number —— 整数也是 number
  3
  
  4
  let b = 1.5;
  5
  console.log(typeof b);        // number —— 小数同样是 number（JS 不区分）
  6
  
  7
  let c = true;
  8
  console.log(typeof c);        // boolean
  9
  
  10
  let d = 'JS';
  11
  console.log(typeof d);        // string
  12
  
  13
  let e;
  14
  console.log(typeof e);        // undefined —— 声明了没初始化，默认 undefined
  15
  
  16
  console.log(typeof null);     // object —— 反直觉，是历史遗留问题

  显示更多显示更少

  对照课程 03. JS-数据类型.html：课程代码把 typeof 的结果直接写在注释里了（//number、//boolean 等），最后一条 alert(typeof null); //null ? -> object 就是那个”问号”。null 的类型判断要用 a === null。

• 2-3 把拼接写法改成模板字符串 已知两个变量：名字 'Tom'、年龄 18。先用加号拼接输出一句话：我是Tom, 我今年18岁；再用一种”不用加号”的写法输出完全相同的一句话。 （练习文件 test_14_模板字符串.html 里已经给了变量定义和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：JS 有一种字符串专门用来拼接：整句话被一对特殊引号包住，变量可以直接”嵌”在里面 二级 · 方法：模板字符串用反引号（键盘左上角 ~ 那个键）包住整句，变量写成 ${变量名} 三级 · 骨架：console.log('我是' + ____ + ', 我今年' + ____ + '岁'); / console.log(`我是${____}, 我今年${____}岁`);

  参考答案（做完再点开）

  1
  let name = 'Tom';
  2
  let age = 18;
  3
  
  4
  // 传统写法：+ 号拼接
  5
  console.log('我是' + name + ', 我今年' + age + '岁');
  6
  
  7
  // 模板字符串：整句用反引号包住，变量用 ${} 嵌进去
  8
  console.log(`我是${name}, 我今年${age}岁`);

  对照课程 03. JS-数据类型.html 后半部分（课程输出的句子是”我是Tom, 我今年18岁”）。注意：反引号是成对的，写成单引号 ' 就变成普通字符串、${} 会原样显示出来。

• 2-4 用循环和判断打印 1~10（偶数做标记） 用循环把 1 到 10 依次打印出来；如果当前数字是偶数，就在数字后面跟上 (偶数)，其余数字原样打印。输出示例：1、2(偶数)、3、4(偶数)…… 做完再想一句：如果改成打印 1~100，你的代码需要改几个字？ （练习文件 test_14_循环与判断.html 里已经给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：“重复 10 次”用循环；“是不是偶数”用取余运算符判断，再用 if 选择打印哪种内容 二级 · 方法：for (let i = 1; i <= 10; i++)；偶数判断 i % 2 === 0；打印 console.log(...) 三级 · 骨架：for (let i = 1; i <= 10; i++) { if (i % 2 === 0) { console.log(i + '____'); } else { console.log(____); } }

  参考答案（做完再点开）

  1
  // 打印 1~10，偶数后面加标记
  2
  for (let i = 1; i <= 10; i++) {
  3
    if (i % 2 === 0) {
  4
      console.log(i + '(偶数)');
  5
    } else {
  6
      console.log(i);
  7
    }
  8
  }

  想改成 1~100 只需要把 i <= 10 改成 i <= 100——这就是循环的价值（对应课程 06. JS-案例-员工列表.html 里”遍历所有数据行”的写法：for (let i = 0; i < trList.length; i++)）。

三、综合题#

• 3-1 做一份”成绩单统计” 用变量和流程控制统计一个学生的成绩单（不用数组、不用函数，就用手上的语法）：

  1. 用变量存三科成绩：语文 92、数学 85、英语 78（变量名自己起，见名知意）
  2. 用常量存学生名字：团子
  3. 计算总分和平均分（平均分 = 总分 ÷ 3）
  4. 用模板字符串输出一行：团子的总分是255，平均分是85
  5. 用条件判断给出等级再输出一行：平均分 ≥ 90 输出 优秀；≥ 80 输出 良好；≥ 60 输出 及格；否则输出 不及格
  6. 额外要求：把数学成绩改成 55（模拟补考），刷新页面检查等级有没有跟着变 （练习文件 test_14_综合_成绩单统计.html 里已经给了写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：第 1~2 步是”存数据”，第 3 步是算术运算，第 4 步是字符串输出，第 5 步是多重条件判断；第 6 步只改一个变量的值，其它代码都不用动 二级 · 方法：let 存成绩、const 存名字；求和用 +、平均分用 /；输出用模板字符串 `…${值}…`；等级用 if / else if / else；打印用 console.log() 三级 · 骨架：let chinese = 92; … / const name = '团子'; / let total = chinese + math + english; / let avg = total / ____; / \${name}的总分是${}，平均分是${}`/if (avg >= 90) { … } else if (avg >= ____) { … }`

  参考答案（做完再点开）

  1
  //1. 三科成绩
  2
  let chinese = 92;
  3
  let math = 85;
  4
  let english = 78;
  5
  
  6
  //2. 学生姓名（常量）
  7
  const name = '团子';
  8
  
  9
  //3. 总分、平均分
  10
  let total = chinese + math + english;
  11
  let avg = total / 3;
  12
  
  13
  //4. 模板字符串输出
  14
  console.log(`${name}的总分是${total}，平均分是${avg}`);
  15
  
  16
  //5. 等级判断
  17
  if (avg >= 90) {
  18
    console.log('优秀');
  19
  } else if (avg >= 80) {
  20
    console.log('良好');
  21
  } else if (avg >= 60) {
  22
    console.log('及格');
  23
  } else {
  24
    console.log('不及格');
  25
  }

  显示更多显示更少

  输出结果：团子的总分是255，平均分是85 和 良好；把 math 改成 55 后平均分变成 75，等级变成 及格——只改变量的值，逻辑一行不用改。 三个检查点：① avg 用的是 total / 3，不是整数除法（JS 除出来是小数，255 / 3 刚好是整数 85）；② 等级判断的顺序必须是从高到低，否则 avg >= 60 写在前面会把 92 分也判成”及格”；③ 第 4 步的引号是反引号，写成单引号 ${} 会原样显示。