JavaScript 基础 — 变量、数据、控制流、函数、数组、对象与错误处理Copy Anchor Link

这一章讲一件事:JavaScript 这门语言本身,从零教到能干活。 HTML 和 CSS 都不是编程语言——到这里,你第一次拿到一台真正的「计算机语言」: 它会存数据、会判断、会循环、会把代码打包复用、会组织复杂的结构、会优雅地摔倒。 原书这一章 4.9 万字符,是全书的重心;我们照原书的知识点全集讲,顺序不变、例子照用。 不需要任何编程基础。

1. 先看现象:网页「活了」是什么意思Copy Anchor Link

前面十章,页面是死的:加载出来什么样,就永远什么样(除了链接跳转)。 JavaScript 登场之后,同样一个页面可以回应你了:按钮点了有反应、表单实时检查、内容不用刷新就更新。 这个「活」,本质上是程序在跑——而程序,就是这一章要学的这门语言写的。

书里给 JavaScript 的定义值得抄全:一门高级、动态、多范式的编程语言,主要用来在网页上创建交互和动态内容; 它支持面向对象、函数式、命令式三种写法,通常跑在浏览器里(客户端), 有了 Node.js 也能跑在服务器上¹。一句一句拆:

• 高级(high-level):你不用管内存和处理器,写「人话」;
• 动态(dynamic):程序跑起来还能改自己(和 CSS 的「动态调整」不是一回事,这里指语言的类型在运行时才确定,见 §4);
• 多范式(multi-paradigm):它不逼你只用一种编程风格——这个名词现在只需混个脸熟,§9 的类和函数会各露一手。

书里还收了这门语言的四个特点:代码是解释执行的(不需要先编译成别的形式);客户端和服务器端都能跑; 动态类型——变量不绑定特定类型,装数字的盒子之后能改装文字;能和 HTML/CSS 无缝集成²。

还有一个你会反复听见的生态问题:React、Angular、Vue.js 是什么?书里给了一张三家对照³:

这三个名字现在只需「听过」:它们全都建立在本书的 DOM 和语言基础之上。 顺序上先地基后框架是对的——地基不稳学框架,框架会表现得像魔法。

2. 顶层全景:一张语言地图Copy Anchor Link

  存东西    变量(let/const/var) + 数据类型(数字、字符串、布尔、数组、对象)
  判方向    条件(if / else if / else、switch)
  跑重复    循环(for、while、do-while;break/continue)
  打包复用  函数(function、参数、默认值、rest、return、作用域、提升)
  组数据    数组(增删改查、splice/slice)+ 对象与类(class、this、new)
  兜错误    try { … } catch (e) { … } finally { … }

  图说:六格就是本章六到十一节——一门语言的最小全集,每格都撑得起后面 DOM 章的一整块。

3. 语法规矩与保留字Copy Anchor Link

先立规矩,再写代码。书里点了四条⁴:

大小写敏感。 Greeting 和 greeting 是两个不同的变量⁵。这一条每年坑几万个新手—— 报错「xxx is not defined」时,先查大小写。

语句以分号结尾。 let firstName = "Alice"; 末尾的分号,书里说严格讲不强制, 但专业写法都加,尤其在团队和严格检查规则下⁶。约定俗成:加。

代码块用花括号 {}。 函数体、if 体、循环体都是块——块是「这段代码是一伙的」的记号⁷。

注释。 单行 // 这样,多行 /* 这样 */⁸。注释是写给「三个月后的自己」的, 书里的代码注释率很高,照学。

保留字(reserved words,关键字):语言自己占用的词——if、else、for、let、 class、return、new……不能拿来做变量名或函数名⁹。书里按用途列了六大类表: 控制语句、循环、函数、变量声明、类与对象、异步(Promise/async),外加杂项(new、delete、typeof、try、catch、finally、throw 等)。 这张表不用背——写多了自然记得;现在的用处是知道「为什么有的词 IDE 里会变颜色」。

不过这张表的结构值得花一分钟看:书里把保留字按用途分了六类,正好露出这门语言有哪些器官¹⁰:

4. 变量:let 和 const 的时代,var 是遗产Copy Anchor Link

变量(variable)是「存一个值、起个名字、以后用名字取」的机制。书里给的声明写法¹¹:

let firstName = "Alice";   // 变量:可以换值
const pi = 3.14;           // 常量:声明时必须赋值,之后不能换

let 和 const 都是 ES6(2015 年发布的那代 JavaScript 标准,ECMAScript 6 的简称)引入的; 之前的老写法是 var¹²。书里给的换代理由只有一句但很关键:let 有块级作用域(block-scoping)¹²。

什么是块级作用域?花括号 {} 里用 let 声明的变量,出了花括号就不存在:

if (true) {
    let inside = "只在括号里活着";
}
console.log(inside);   // 报错:inside is not defined(④ 类常识补充:var 声明的则会漏出括号外)

const 是「更严格的 let」:声明时必须给值,之后不能再赋值。注意「不能换绑」不等于「内容不能变」—— const 的数组你照样能往里加元素(数组本身这个盒子没变),只是不能把这个变量指到另一个盒子去。 这一行的现行默认:默认用 const,确实要换值才用 let,var 只在读老代码时见到。

判断(我们的,不是书里的): var 的活教材价值在「提升」(§8 末)和「无块级作用域」两个坑上。 书里对 var 只给了「old syntax」一句注释¹²,这是对的教学取舍; 但你要知道:读懂 2015 年前的老代码、以及某些「var 提升」面试题,var 还得认得。 如果错,会错在: 如果未来某版标准彻底移除 var(目前没有计划),「var 是遗产」的判断就要改成「var 已消失」—— 但 2026 年的现实是它仍被浏览器全量支持。

5. 数据类型之一:数字与数学Copy Anchor Link

JavaScript 的数字只有一个 Number 类型,整数和小数(浮点数)不分家:10 和 3.5 是同一种东西¹³。 运算符一览(书里的表¹⁴):+ - * / %,以及自增 ++、自减 --(x++ = x 加 1 再存回 x)。 % 是取余——10 % 3 得 1,判奇偶的标配(x % 2 == 0 即偶数)。

数学函数集中在 Math 对象里(对象是什么 §9 讲,这里先当「工具箱」用)¹⁵:

最后一个值得多看一眼:10 / 'hello' 在 JavaScript 里不报错,结果是 NaN(Not a Number)。 JavaScript 的数字运算对「算不出来」的回应是给你这个特殊值,而不是崩溃—— 它的「动态」性格第一次露脸。

6. 数据类型之二:字符串与它的工具箱Copy Anchor Link

字符串(string)是文字。书里的三个引号规矩¹⁶:双引号、单引号完全等价;反引号 ``` 是增强版—— 它支持模板字符串(template literal):用 ${} 把变量嵌进字符串¹⁷:

let name = "John";
let message = `Hello, ${name}!`;   // "Hello, John!"

反引号还支持真正的换行——普通引号里的字符串换行要写 \n(转义字符)。 转义序列(escape sequences)就是「反斜杠 + 一个字母 = 一个打不出来的字符」¹⁸: \n 换行、\t 制表符、\" 双引号、\\ 反斜杠本身、\u2764 Unicode 字符(一颗心)。 为什么需要 \":字符串本身用双引号包住,字符串里的双引号必须「转义」成 \" 才不会被当成字符串的终点。

字符串的两个身份特征,书里讲得清楚:

其一,不可变(immutable)。 字符串一旦造出来就不能改;所有字符串方法都是「基于原串造一个新串」, 原串纹丝不动¹⁶。text.toUpperCase() 返回大写版,text 自己还是原样。

其二,有索引(index)。 从 0 开始数:"user@example.com" 的第 0 位是 u,第 4 位是 @¹⁹。 email[2] 取第 2 位;.length 取总长(含空格标点)。

主线例子(上):从邮箱里切出用户名Copy Anchor Link

这一章的主线例子,是书里那个「从邮箱地址解析出用户名」的完整推演,每一步都有具体的数和状态¹⁹:

  输入:   let email = "user@example.com";
  第 1 步:找 @ 的位置
          email.indexOf("@")
          → 逐位扫描:u(0) s(1) e(2) r(3) @(4)…
          → 返回 4
  第 2 步:切片
          email.slice(0, 4)      ← slice(起点, 终点),终点不算在内
          → 取出第 0、1、2、3 位 → "user"
  第 3 步:得到结果
          let username = "user"

  图说:indexOf 回答“在哪儿”,slice 回答“从哪儿到哪儿切一刀”;
       两个方法拼起来,就是字符串处理的基本动作:定位 → 提取。

这本书的讲法(给出一整串中间状态)正是我们主张的「每步旁边有具体的数」—— indexOf 返回 4、slice 取 [0,4) 半开区间,都是能当场验算的。

常用字符串方法(书里的工具箱)Copy Anchor Link

.split 是字符串通往数组的桥——下一节的主角马上登场。

7. 布尔与逻辑运算Copy Anchor Link

布尔(Boolean)只有两个值:true 和 false,是「判断」这种思维的数据形态²⁰。 三个逻辑运算符:

优先级(先算谁)书里给了顺序:! 高于 && 高于 ||²¹。 a || b && c 先算 b && c;想改变就用括号 (a || b) && c。 括号的正式身份是「我这里的优先级我说了算」,和数学里一样。

顺带把全书反复用到的比较运算补齐:== 等于、!= 不等、> < >= <=。 (更严格的 ===「值和类型都相同」书里只在章末习题出现——这一行的默认是用 === 不用 ==, ④ 类补充:"5" == 5 为 true 而 "5" === 5 为 false,前者会自动转换类型,坑多。)

8. 输出与 HTML 集成:程序怎么跑起来Copy Anchor Link

写了代码,怎么看结果?书里给了两条路:

console.log(…):把内容打印到浏览器的开发者工具控制台(第 03 章那台 X 光机的 Console 面板), 不动页面本身——查变量值、追错误、看代码怎么跑的标配²²。学语言阶段,你的 90% 输出都走这里。

document.write(…):直接往页面里写内容。 书里给了郑重警告:页面加载完再调用它,会覆盖整页²³。 教学用可以,真实项目别碰——第 12 章的 DOM 方法才是改页面的正规军。

代码放哪?书里两条规矩²⁴:

<!-- 规矩一:<script> 放在 body 的最末尾(</body> 之前) -->
<script>
    …你的代码…
</script>

<!-- 规矩二:必须放 <head> 里的话,加 defer -->
<script src="script.js" defer></script>

为什么? 第 01 章的渲染链条还记得吗:浏览器边读 HTML 边建 DOM 树,碰到 <script> 会停下来先执行。 脚本放前面,它执行时后面的 DOM 还没建出来——第 13 章会现场抓一个这种 bug。 defer 的意思是「先别跑,等 HTML 全部读完再跑」,效果等于把脚本挪到了 body 末尾,还能让它留在 head 里。 外部文件用 <script src="…"> 引入,和 CSS 的 <link> 对仗。

9. 控制流:程序的方向盘Copy Anchor Link

控制流(flow control)是「语句按什么顺序执行」。默认从上到下逐行执行; 三种结构可以改变这个顺序。

条件:if / else 与 switchCopy Anchor Link

if 是「条件成立才执行这块」;if...else 是「成立走这边,不成立走那边」²⁵:

let number = 10;
if (number % 2 == 0) {
    console.log("The number is even.");   // 走这条:10 % 2 == 0 为 true
} else {
    console.log("The number is odd.");
}

switch 是「一个变量对多个值」的多路选择,书里给的骨架²⁶:

switch (day) {
    case "Monday":
        console.log("Start of the workweek.");
        break;                       // ← 关键:匹配后 break,否则会继续往下“穿透”
    case "Friday":
        console.log("Weekend is coming!");
        break;
    default:                         // 一个都没匹配上时兜底
        console.log("It's a regular weekday.");
}

break 是 switch 的灵魂:没有它,匹配了一个 case 后会继续执行后面所有 case(这叫「穿透」, 有时候故意利用,但入门阶段默认每个 case 都 break)。什么时候 if、什么时候 switch? 两三个分支用 if,一个变量对一整排固定值用 switch——后者更清晰。

循环:三种,各管一类重复Copy Anchor Link

循环的三要素,书里拆得很清楚:初始化(造一个计数器)、条件(真就继续)、更新(每圈改计数器)²⁷。 三种循环的分工:

for 的括号里三格用分号隔开:初始化 let i = 1;条件 i <= 5;更新 i++(每圈结束把 i 加 1)。 执行轨迹逐圈走一遍(主线例子的节奏):i=1 满足 → 打印 1 → i 变 2 → … → i=5 打印 → i 变 6 → 条件不成立,循环结束。 五圈,计数器从 1 走到 6——「计数器最终会越过条件边界一格」,这是所有 for 循环的共同句读。

break 提前跳出整个循环、continue 跳过这一圈进下一圈——第 07 章保留字表里的两位,语法直观,不展开。

10. 函数:打包与复用Copy Anchor Link

函数(function)是「打包好、能反复用的一块代码」。书里给的定义里有一对词要钉住: 参数(parameters)是函数定义里的输入名,实参(arguments)是调用时真正传进去的值²⁸:

function add(a, b) {      // a、b 是参数
    return a + b;
}
let result = add(5, 3);   // 5、3 是实参;result 得到 8

return 干了三件事:给出返回值、立刻结束函数(return 之后的代码不执行)、 没写 return 的函数默认返回 undefined²⁹。书上 add(5,3) 的推演:5+3=8,return 8, 8 赋给 result——一行调用,三步状态。

三种参数形态,书里各给一例:

必填参数:少传了不会报错,但缺的参数是 undefined,multiply(4) 里 y 是 undefined, 乘出来是 NaN³⁰——JavaScript 的「动态」性格再次露脸:它不拦你,给你个怪结果。

默认参数(ES6):function greet(name = "Guest") { … },调用时没传或传了 undefined, 就用默认值³¹。greet() → "Hello, Guest!";greet("Alice") → "Hello, Alice!"。

rest 参数:function sum(...numbers) { … },... 把传进来的所有实参收成一个数组³²:

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4, 5);   // numbers = [1,2,3,4,5] → 15
sum(10, 20);          // numbers = [10,20]     → 30

(例子里的 reduce 是数组方法,意思是「把数组滚成一个值」——它第一次出现,知道大概即可, 数组方法的本体在 §11。)同一个函数,五个参数和两个参数都接得住——参数个数从「写死」变成「弹性」。

作用域:变量的能见度Copy Anchor Link

作用域(scope)是「这个变量在哪段代码里看得见」。书里两格规则³³:

• 函数里声明的变量是局部的:只在该函数内可见,外面碰不到;
• 函数外声明的是全局的:哪里都看得见(函数里面也能读)。

let globalVar = "I am global";          // 全局
function showGlobal() {
    return globalVar;                   // 函数内读全局:可以
}
function exampleFunction() {
    let localVar = "I am local";        // 局部
    return localVar;
}
console.log(localVar);   // 报错:函数外的代码不认这个局部变量

作用域的存在理由:防止「哪都能改」的失控。函数是自包含的小机器——喂给它输入(参数)、 它吐给你输出(return),中间用多少临时变量都不污染外面。写函数的好习惯是:能用局部就不用全局。

提升(hoisting):一个「坑」级别的机制Copy Anchor Link

提升是 JavaScript 的一个古怪行为:函数和变量的声明,在代码执行前会被「挪到」其作用域的顶部³⁴。 所以这段代码能跑:

hello();                    // 调用写在声明前面
function hello() {
    return "Hello, world!";
}

书里的解释模型是:JavaScript 内部先把声明挪上去,再按挪完的版本执行³⁴。 但「挪」有三种待遇,必须分清(书里点了一半,我们补全):

入门阶段的实操建议很朴素:把函数声明写在调用前面,把这个机制当作「读懂报错」的知识而不是「利用」的技巧。 (读老代码时会见到「依赖提升」的写法——认识它,别学它。)

书里还补了一个关键区分:「函数声明」和「函数表达式」的提升待遇不一样。 函数表达式是「把函数赋给一个变量」的写法——let hello = function() { … }; 这种写法只有变量名被提升,函数体留在原地,所以在赋值完成之前调用它,拿到的是 undefined 而不是函数³⁵。 这解释了为什么「先写调用后写声明」只对 function xxx(){} 那种老派写法安全。

11. 数组:一排水槽Copy Anchor Link

数组(array)是「一个变量名,装一排值,按编号取」。书里定义里那个词要接住: 索引(indexed)——每个元素有固定位置,从 0 开始数³⁶。

let fruits = ["Apple", "Banana", "Cherry"];
//  索引:        0         1          2
fruits[1];            // "Banana"
fruits[1] = "Blueberry";   // 改:索引 1 处换成 Blueberry

主线例子(下):fruits 数组的完整一生Copy Anchor Link

这一章的主线例子下半段,是 fruits 数组从生到死的全流程——书里把每步之后的数组状态都画了出来, 我们照抄这个节奏:

  出生:   let fruits = ["Apple", "Banana", "Cherry"];
              索引   0        1         2
  改:     fruits[1] = "Blueberry";     → [Apple, Blueberry, Cherry]
  尾加:   fruits.push("Mango");        → [Apple, Blueberry, Cherry, Mango]
  头加:   fruits.unshift("Strawberry");→ [Strawberry, Apple, Blueberry, Cherry, Mango]
  尾删:   fruits.pop();                → 返回 "Mango";数组退回 4 个
  头删:   fruits.shift();              → 返回 "Strawberry";数组 = [Apple, Blueberry, Cherry]
  总长:   fruits.length                → 3
  遍历:   for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); }
          → i=0 打 Apple;i=1 打 Blueberry;i=2 打 Cherry;i=3 条件失败,停

  图说:push/pop 管尾部,unshift/shift 管头部;方法名都是“动作”,返回值是“被拿走的那一个”。

四个增删方法的记忆法:push/pop 是尾部进出(像栈),unshift/shift 是头部进出; pop/shift 会「返回」被删掉那个元素(可以接住用),push/unshift 返回的是新长度。 length 则让 for 循环的边界「数组多长就转多少圈」,数组内容变了循环自动跟着变。

splice 与 slice:一对必须分开的孪生Copy Anchor Link

书里用了两个对照表来讲这对方法,分界就一条:改不改原数组³⁷³⁸:

let fruits = ["Apple", "Banana", "Cherry", "Mango"];

let removed = fruits.splice(1, 2);
//      从索引 1 开始,删掉 2 个     → removed = ["Banana", "Cherry"]
//                                    fruits 变成 ["Apple", "Mango"]  ← 原数组被改了!

let extracted = fruits.slice(1, 3);
//       从索引 1 切到 3(不含 3)   → extracted = [索引1, 索引2]
//                                    原数组不动,拿到的是新数组

  splice(起点, 个数):挖掉,原数组受伤,挖走的部分作为返回值   ← 手术
  slice(起点, 终点): 复印,原数组无恙,复印件是新的数组       ← 复印

背法:splice 带「p」像「paperclip(回形针)」会留下孔——原数组被改了; slice 就是「切一片下来看看」。两个方法还都在字符串上有个同名亲戚(§6 的 slice、replace 家族)—— 数组版切元素、字符串版切字符,语义一致。

12. 对象与类:把数据和行为装进一个盒子Copy Anchor Link

对象(object)是「一组相关的属性和方法的集合」;类(class)是造对象的图纸³⁹。 书里给的 User 类,是这一节的主线:

class User {
    constructor(username, email, role) {   // 构造器:造对象时自动运行,初始化属性
        this.username = username;
        this.email = email;
        this.role = role;
    }
    updateRole(newRole) {                  // 方法:这个类的对象会做的事
        this.role = newRole;
    }
    getProfile() {
        return `User: ${this.username}, Email: ${this.email}, Role: ${this.role}`;
    }
}

let adminUser = new User("AliceJohnson", "alice@company.com", "Admin");

逐词过一遍(全是会出门撞见的词):

• constructor(构造器):new 造对象时自动执行的那个方法,负责把传进来的值装进新对象;
• this:「当前这个对象」。构造器里的 this.username = username 就是「把我这个新对象的 username 属性,设成传进来的值」;
• new:按图纸开工——new User(…) 造出一个 User 的实例(instance),三个实参进构造器;
• 点语法(dot notation):adminUser.updateRole("Super Admin") = 「这个对象的 updateRole 方法,传这个参数」⁴⁰;
• 属性 vs 方法:属性是数据(username),方法是行为(getProfile())。

用类的理由,书里给了:建模真实世界的实体、让代码有组织、好维护³⁹。 对照 §11 的数组:数组是「一排同类的东西」,对象是「一个东西的多方面」—— 菜单用数组(一排菜),一道菜用对象(菜名、价格、是否招牌)。 这两个容器加函数,就是 JavaScript 组织数据的全部基础。

判断(我们的,不是书里的): 本章只教了 class 语法,没教「对象字面量」 (let user = { name: "Alice", role: "Admin" })——这是 JavaScript 里使用频率不低于 class 的写法, 第 13 章存 localStorage 的数据就是它。书里 class 先行是教学顺序(从「图纸」到「实例」比较顺), 但你自己动手时,简单数据优先用对象字面量,class 留给「要造很多个同类对象、带方法」的场景。 如果错,会错在: 面向对象的阵营里(以及 Angular、旧企业框架),class 是主角不是配角—— 「简单数据用字面量」是这一行主流库(React 生态)的口味,不是语言的规定。

13. 错误处理:优雅地摔倒Copy Anchor Link

程序会出错:除以零、读不存在的变量、类型错乱。默认行为是整个程序崩掉——页面卡死、用户流失。 try...catch 是兜底的网:可能出问题的代码放进 try,真出了错,流程立刻跳进 catch, 程序不崩⁴¹:

function divideNumbers(a, b) {
    try {
        if (b == 0) {
            throw new Error("Cannot divide by zero.");   // 自己制造一个错误
        }
        return a / b;
    } catch (error) {
        return error.message;                            // 接住,把错误信息当结果返回
    }
}
divideNumbers(8, 0);   // 走 catch:返回 "Cannot divide by zero."
divideNumbers(8, 2);   // 正常:返回 4

三件套的完整形态是 try / catch / finally:finally 可选,无论出没出错都执行—— 放「收尾工作」(关连接、复位状态)的地方。

三个关键词的句读:try 圈出「危险区」;throw 主动扔出一个错误(new Error("…") 造一个); catch (error) 接住,error.message 是它带的说明。书里还点了一排内置错误类型: ReferenceError(用了不存在的变量)、TypeError(类型不对,如对数字调用字符串方法)、 SyntaxError(代码本身写错)、RangeError(数值越界)⁴²——catch 里可以按类型区别对待。

边界要说清: try...catch 兜的是「运行时」错误(跑着跑着出的错);代码本身的语法错误(少个括号), 整个脚本都不会运行,catch 也救不了——那是「写的时候」就该被编辑器拦下的错。

14. 作者的判断与证据Copy Anchor Link

书内作为事实给出的: 全部语言机制(变量、类型、方法、控制流、函数、数组、类、try...catch)的定义与行为, 引用已随文给出。

作者的取舍,值得意识到: 这一章在「语言最小全集」上的取舍相当克制—— 没有碰 == vs ===(只在习题里)、没有正则(只在表单章的 pattern 属性)、没有日期对象、 没有 map/filter(reduce 倒是露了一面)、没有异步。最小全集的好处是不会噎死初学者; 代价是离「能写真实功能」还差 DOM(第 12 章)和一点点异步常识(总纲覆盖表已标为不覆盖)。

一处要当心的表述: 书中有些代码片段的排版在转码中受损(如字符串里混入表情符号的占位符),按上下文理解即可—— 语义都是标准行为,不影响教学。

15. 边界与局限Copy Anchor Link

• 异步整个缺席。 Promise、async/await 只在保留字表露名;而真实网页的请求数据、定时器、动画全靠异步—— 学完本书想接第 13 章之后的现实世界,异步是第一门必修课。
• 对象字面量没教(见 §12 判断块);map/filter/find 这组高频数组方法没教。
• ==/=== 的区别只在章末习题,但这个坑日常就踩——我们在 §7 补了默认值建议。
• 没有正则、没有 Date、没有 JSON(JSON 要到第 13 章才实际用到,本书未解释)。

16. 可带走的Copy Anchor Link

全章两条主线例子,一行各写完: 邮箱解析 = indexOf 定位 @ 在 4 → slice(0,4) 切出 "user"; fruits 数组 = push 尾加 → unshift 头加 → pop 尾删 → shift 头删 → length 数长度 → for 按索引遍历。

1. JavaScript:高级、动态、多范式;一门语言,浏览器和服务器(Node.js)都跑¹;
2. 大小写敏感;分号结尾;花括号成块;// 与 /* */ 注释⁵;
3. 默认 const,要换值用 let;var 是遗产¹²;let/const 有块级作用域;
4. 数字只有一个类型;% 取余;Math 工具箱(sqrt/pow/round/floor/ceil/random);
5. 字符串不可变、有 0 起索引;反引号 + ${} 是模板字符串;\n \" 等转义序列;
6. 字符串五件套:.length、.toUpperCase()、.slice()、.indexOf()、.replace()、.split();
7. 逻辑运算 ! > && > ||;比较默认用 ===(④ 类建议);
8. console.log 打到控制台(调试标配);脚本放 body 末尾,或 head 里加 defer²⁴;
9. switch 别忘了 break;for 三格「初始化;条件;更新」;do...while 至少跑一圈²⁷;
10. 函数 = 参数(定义)与实参(调用)之别;return 即出结果即结束;默认参数 =、rest 参数 ...;
11. 作用域:局部变量不出函数;提升只完整作用于 function 声明,let/const 声明前使用直接报错³⁴;
12. 数组从 0 数;push/pop 尾部、unshift/shift 头部;splice 改原数组,slice 不改³⁷³⁸;
13. 类 = 图纸;new 造实例;this 是当前对象;构造器装初始值;点语法调方法³⁹;
14. try 圈危险区、throw 扔错、catch 接住、finally 必执行;内置错误类型有 ReferenceError/TypeError 等⁴²。

17. 原文地图Copy Anchor Link