js 复习

Fri, 03 Apr 2026 00:00:00 +0000

语言核心基础

- 语言核心基础
- 变量与数据类型
- 变量声明
- JavaScript 有三种声明变量的关键字，它们的核心区别在于作用域和可变性
- var
- var 是 ES5 时代的声明方式，它的作用域是函数级别的，而不是块级的。
- 这意味着在 if 或 for 的大括号里用 var 声明的变量，在外面依然可以访问
- 另外 var 存在"变量提升"（hoisting）——声明会被提升到函数顶部，但赋值不会，所以在声明前访问会得到 undefined 而不是报错
-
```js
function example() {
console.log(a); // undefined（不会报错，因为声明被提升了）
var a = 10;
if (true) {
var b = 20;
}
console.log(b); // 20（var 没有块级作用域）
}
```
- let
- let 是 ES6 引入的，拥有块级作用域，不会被提升到可访问状态（存在"暂时性死区" TDZ），在声明前访问会直接报 ReferenceError。
-
```js
function example() {
// console.log(a); // ReferenceError!
let a = 10;
if (true) {
let b = 20;
}
// console.log(b); // ReferenceError! b 只存在于 if 块内
}
```
- const
- const 和 let 一样有块级作用域和 TDZ，但它要求声明时必须赋值，且绑定不可重新赋值。
- 注意"不可重新赋值"不等于"不可变"——如果 const 指向一个对象或数组，对象内部的属性是可以修改的。
-
```js
const PI = 3.14159;
// PI = 3; // TypeError: Assignment to constant variable
const user = { name: 'An' };
user.name = 'Bob'; // ✅ 没问题，修改的是对象属性，不是重新赋值
// user = {}; // ❌ TypeError，不能重新绑定
```
- 七种原始类型
- JavaScript 的数据类型分为原始类型和引用类型。
- 原始类型有 7 种，它们的值是不可变的，按值传递。
- string 字符串
-
```js
const s1 = 'hello'; // 单引号
const s2 = "world"; // 双引号
const s3 = `你好 ${s1}`; // 模板字符串，支持插值和换行
```
- 字符串是不可变的。s1[0] = 'H' 不会报错但也不会生效。所有字符串方法都返回新字符串。
- number 数字
- JavaScript 只有一种数字类型，使用 IEEE 754 双精度浮点数。这带来了经典问题
-
```js
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false
// 特殊值
console.log(Infinity); // 正无穷
console.log(-Infinity); // 负无穷
console.log(NaN); // Not a Number
console.log(NaN === NaN); // false！NaN 不等于自身
console.log(Number.isNaN(NaN)); // true，用这个判断
```
- bigint 大整数
- 当数字超过 Number.MAX_SAFE_INTEGER（2⁵³ - 1）时使用
-
```js
const big = 123456789012345678901234567890n; // 末尾加 n
console.log(typeof big); // "bigint"
// big + 1; // ❌ TypeError，bigint 不能和 number 混合运算
big + 1n; // ✅
```
- boolean 布尔值
- 只有 true 和 false。但在条件判断中，其他类型会被隐式转换为布尔值。
- 记住这些 falsy 值（转换为 false 的值）：
-
```js
// 以下全部是 falsy
false, 0, -0, 0n, "", null, undefined, NaN
// 其他一切都是 truthy，包括：
// "0", " ", [], {}, function(){} 都是 truthy！
```
- null 空值
- 表示"有意为空"，通常用于显式地标记一个变量"目前没有值"。
-
```js
let user = null; // 明确表示：当前没有用户
```
- undefined 未定义
- 表示变量已声明但未赋值，或者函数没有返回值
-
```js
let x;
console.log(x); // undefined
function foo() {}
console.log(foo()); // undefined
```
- symbol 符号
- ES6 引入，每个 Symbol 都是唯一的，主要用作对象属性的唯一标识符
-
```js
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false，每次调用都创建新的
const obj = {
[id1]: '这个属性名是唯一的'
};
```
- 引用类型（Reference Types）
- 除了原始类型，剩下的都是引用类型（对象）。
- 包括普通对象 {}、数组 []、函数 function、Date、RegExp 等等。
- 引用类型按引用传递，变量存的是内存地址而不是值本身
-
```js
const a = { name: 'An' };
const b = a; // b 和 a 指向同一个对象
b.name = 'Bob';
console.log(a.name); // "Bob" —— a 也被改了！
// 数组同理
const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
```
- typeof 操作符
- typeof 返回一个字符串，表示值的类型
-
```js
typeof 42; // "number"
typeof 'hello'; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof 10n; // "bigint"
// ⚠️ 两个著名的"坑"
typeof null; // "object" —— 历史遗留 bug，null 其实是原始类型
typeof function(){};// "function" —— 虽然函数也是对象
typeof []; // "object"
typeof {}; // "object"
```
- 判断数组应该用 Array.isArray()，判断 null 用 === null
- 类型转换
- 显式转换
-
```js
// 转字符串
String(123); // "123"
(123).toString();// "123"
// 转数字
Number("42"); // 42
Number(""); // 0
Number("hello"); // NaN
Number(true); // 1
Number(null); // 0
Number(undefined);// NaN
parseInt("42px");// 42 —— 会尽量解析
parseFloat("3.14abc"); // 3.14
// 转布尔
Boolean(0); // false
Boolean(""); // false
Boolean("0"); // true ← 注意！非空字符串都是 true
Boolean([]); // true ← 注意！空数组也是 true
```
- 隐式转换
-
```js
// + 号：只要有一边是字符串，就做字符串拼接
'5' + 3; // "53"
5 + '3'; // "53"
// 其他算术运算符会把字符串转为数字
'5' - 3; // 2
'5' * 2; // 10
'5' / '2'; // 2.5
// == 的隐式转换（不推荐使用）
0 == false; // true
"" == false; // true
null == undefined; // true
null == 0; // false ← 特殊规则
// === 严格相等，不做类型转换（推荐始终使用）
0 === false; // false
"" === false; // false
```
- 运算符与流程控制
- 算术运算符
- 基本的 +、-、*、/ 之外，还有几个需要注意的
```js
// 取余（求模）
console.log(10 % 3); // 1
console.log(-10 % 3); // -1（结果符号跟被除数一致）
// 幂运算（ES2016）
console.log(2 ** 10); // 1024，等价于 Math.pow(2, 10)
// 自增/自减
let a = 5;
console.log(a++); // 5（先返回再加）
console.log(a); // 6
console.log(++a); // 7（先加再返回）
```
- 复合赋值运算符就是简写：+=、-=、*=、/=、%=、**=、??=、||=、&&=
```js
let count = 10;
count += 5; // 等价于 count = count + 5
count **= 2; // 等价于 count = count ** 2
// 逻辑赋值（ES2021）
let name = null;
name ??= 'Anonymous'; // 如果 name 是 null/undefined，才赋值
console.log(name); // "Anonymous"
let config = '';
config ||= 'default'; // 如果 config 是 falsy，就赋值
console.log(config); // "default"
```
- 比较运算符
- ==（宽松相等） 会在比较前做隐式类型转换，规则非常复杂：
-
```js
0 == false; // true（false 转为 0）
'' == false; // true（两边都转为 0）
'1' == 1; // true（字符串转为数字）
null == undefined; // true（特殊规则，它俩只跟对方相等）
null == 0; // false（null 不会被转为数字）
NaN == NaN; // false（NaN 不等于任何东西包括自己）
[] == false; // true（[] → '' → 0，false → 0）
[] == ![]; // true（这个最离谱，但确实是 true）
```
- ===（严格相等） 不做类型转换，类型不同直接返回 false：
-
```js
0 === false; // false（number vs boolean）
'' === false; // false
'1' === 1; // false
null === undefined; // false
```
- 实际开发原则：永远使用 === 和 !==。
- 唯一可能用 == 的场景是 x == null 来同时判断 null 和 undefined
- 更推荐写成 x === null || x === undefined，或者用 x ?? defaultValue
- 逻辑运算符与短路求值
- 逻辑运算符在 JS 中的行为和很多语言不同——它们返回的不是布尔值，而是操作数本身。
- &&（逻辑与）：如果左侧是 falsy，返回左侧；否则返回右侧。
-
```js
console.log(0 && 'hello'); // 0（左侧 falsy，直接返回左侧）
console.log(1 && 'hello'); // "hello"（左侧 truthy，返回右侧）
console.log('a' && 'b' && 0); // 0（逐个检查，遇到第一个 falsy 就返回）
console.log('a' && 'b' && 'c'); // "c"（全 truthy，返回最后一个）
// 实际用法：条件执行
user && user.login(); // 如果 user 存在才调用 login
```
- ||（逻辑或）：如果左侧是 truthy，返回左侧；否则返回右侧。
-
```js
console.log(0 || 'default'); // "default"
console.log('hello' || 'default'); // "hello"
// 经典用法：提供默认值
const port = config.port || 3000;
// ⚠️ 陷阱：如果 config.port 是 0，也会被跳过！
```
- ??（空值合并，ES2020）：只有左侧是 null 或 undefined 时才返回右侧。这解决了 || 的陷阱。
-
```js
const port = config.port ?? 3000;
// config.port 为 0 → 返回 0 ✅
// config.port 为 '' → 返回 '' ✅
// config.port 为 null/undefined → 返回 3000
// 对比
0 || 3000; // 3000（0 是 falsy）
0 ?? 3000; // 0（0 不是 null/undefined）
'' || 'default'; // "default"
'' ?? 'default'; // ""
```
- ! （逻辑非）
-
```js
console.log(!0); // true
console.log(!''); // true
console.log(!null); // true
// 双重取反 !! 可以将任意值转为布尔值
console.log(!!0); // false
console.log(!!'hello'); // true
console.log(!!null); // false
```
- 可选链与其他实用运算符
- ?.（可选链，Optional Chaining）：安全地访问嵌套属性，遇到 null/undefined 时短路返回 undefined 而不是报错。
-
```js
const user = {
name: 'An',
address: {
city: 'Tokyo'
}
};
// 不用可选链
const zip = user && user.address && user.address.zip;
// 用可选链
const zip2 = user?.address?.zip; // undefined，不报错
const nothing = null?.foo?.bar; // undefined
// 也可以用在方法调用和下标访问上
user.greet?.(); // 如果 greet 方法存在才调用
const first = arr?.[0]; // 如果 arr 存在才取下标
```
- 逗号运算符：依次执行所有表达式，返回最后一个。用得不多，偶尔在 for 循环中见到
-
```js
const result = (1, 2, 3); // result === 3
for (let i = 0, j = 10; i < j; i++, j--) { /* ... */ }
```
- 条件语句
- if/else if/else
-
```js
const score = 85;
if (score >= 90) {
console.log('优秀');
} else if (score >= 70) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
```
- 三元表达式：适合简单的二选一，不要嵌套太深
-
```js
const status = score >= 60 ? '及格' : '不及格';
// ❌ 不推荐：嵌套三元，可读性很差
const grade = score >= 90 ? 'A' : score >= 70 ? 'B' : score >= 60 ? 'C' : 'D';
// ✅ 这种情况用 if/else 或函数更清晰
```
- switch：适合对同一个值做多重精确匹配，注意 break 不能忘
-
```js
const day = 'Monday';
switch (day) {
case 'Monday':
case 'Tuesday':
case 'Wednesday':
case 'Thursday':
case 'Friday':
console.log('工作日');
break; // ← 不写 break 会"穿透"到下一个 case
case 'Saturday':
case 'Sunday':
console.log('周末');
break;
default:
console.log('无效日期');
}
```
- switch 使用 === 进行比较，不会做隐式类型转换。
- 循环语句
- for 循环：最经典的循环，适合需要精确控制索引的场景：
```js
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// 倒序遍历
for (let i = arr.length - 1; i >= 0; i--) {
console.log(arr[i]);
}
```
- while 与 do...while：
```js
// while：先判断再执行
let n = 5;
while (n > 0) {
console.log(n);
n--;
}
// do...while：先执行一次再判断，至少执行一次
let input;
do {
input = prompt('请输入密码');
} while (input !== 'secret');
```
- for...of：遍历可迭代对象（数组、字符串、Map、Set 等）的值：
```js
const fruits = ['苹果', '香蕉', '橘子'];
for (const fruit of fruits) {
console.log(fruit); // "苹果", "香蕉", "橘子"
}
// 遍历字符串的每个字符（对中文友好）
for (const char of '你好世界') {
console.log(char); // "你", "好", "世", "界"
}
// 如果同时需要索引，用 entries()
for (const [index, fruit] of fruits.entries()) {
console.log(`${index}: ${fruit}`);
}
```
- for...in：遍历对象的可枚举属性名（键名）：
```js
const user = { name: 'An', age: 25, city: 'Tokyo' };
for (const key in user) {
console.log(`${key}: ${user[key]}`);
}
// ⚠️ 不推荐用 for...in 遍历数组！
// 它会遍历原型链上的属性，顺序也不保证
// 遍历数组请用 for...of 或数组方法
```
- break、continue 与标签
-
```js
// break：立即退出整个循环
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i); // 0, 1, 2, 3, 4
}
// continue：跳过本次迭代，进入下一次
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue; // 跳过偶数
console.log(i); // 1, 3, 5, 7, 9
}
// 标签（label）：用于跳出嵌套循环，实际开发很少用
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) break outer; // 直接跳出外层循环
console.log(i, j);
}
}
```
- 函数基础
- 函数声明 vs 函数表达式
- JavaScript 中定义函数有两种基本方式，它们最大的区别在于提升（hoisting）行为。
- 函数声明（Function Declaration）：整个函数会被提升到作用域顶部，因此可以在声明之前调用。
-
```js
// ✅ 可以在声明之前调用
greet('An');
function greet(name) {
console.log(`你好，${name}！`);
}
```
- 函数表达式（Function Expression）：把一个匿名或具名函数赋值给变量。变量声明会提升，但赋值不会，所以在赋值之前调用会报错。
-
```js
// ❌ TypeError: sayHi is not a function
// sayHi('An');
const sayHi = function(name) {
console.log(`Hi, ${name}!`);
};
sayHi('An'); // ✅
// 具名函数表达式：函数名只在函数内部可见，主要用于递归和调试
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};
// fact(5); // ❌ ReferenceError，外部不可见
factorial(5); // ✅ 120
```
- 箭头函数
- ES6 引入的简洁写法，但它不仅仅是语法糖，和普通函数有几个本质区别。
- 基本语法
```js
// 完整写法
const add = (a, b) => {
return a + b;
};
// 单个表达式可以省略 {} 和 return（隐式返回）
const add2 = (a, b) => a + b;
// 只有一个参数可以省略括号
const double = x => x * 2;
// 没有参数必须写空括号
const getRandom = () => Math.random();
// ⚠️ 返回对象字面量必须加括号，否则 {} 会被当成函数体
const makeUser = (name) => ({ name, active: true });
```
- 箭头函数与普通函数的区别
```js
// 1. 没有自己的 this，继承外层作用域的 this
const team = {
name: 'Frontend',
members: ['An', 'Bob'],
// ❌ 普通函数：this 指向调用者，forEach 的回调中 this 不是 team
showBad() {
this.members.forEach(function(member) {
console.log(`${member} belongs to ${this.name}`); // this.name 是 undefined
});
},
// ✅ 箭头函数：继承 showGood 的 this，即 team
showGood() {
this.members.forEach(member => {
console.log(`${member} belongs to ${this.name}`); // "Frontend"
});
}
};
// 2. 没有 arguments 对象
function normalFn() {
console.log(arguments); // ✅ [1, 2, 3]
}
const arrowFn = () => {
// console.log(arguments); // ❌ ReferenceError
};
normalFn(1, 2, 3);
// 3. 不能用作构造函数
const Person = (name) => { this.name = name; };
// new Person('An'); // ❌ TypeError: Person is not a constructor
// 4. 没有 prototype 属性
```
- 回调函数、数组方法的参数优先用箭头函数
- 对象方法用普通函数（需要自己的 this）
- 永远不要用箭头函数定义对象方法或构造函数。
- 参数处理
- 默认参数（Default Parameters）：
-
```js
function createUser(name, role = 'viewer', active = true) {
return { name, role, active };
}
createUser('An'); // { name: 'An', role: 'viewer', active: true }
createUser('An', 'admin'); // { name: 'An', role: 'admin', active: true }
createUser('An', undefined, false); // { name: 'An', role: 'viewer', active: false }
// 注意：传 undefined 会触发默认值，传 null 不会
createUser('An', null); // { name: 'An', role: null, active: true }
// 默认值可以是表达式，甚至引用前面的参数
function createId(prefix, timestamp = Date.now(), id = `${prefix}-${timestamp}`) {
return id;
}
```
- 剩余参数（Rest Parameters）：
- 用 ... 收集剩余的参数到一个真正的数组中（不同于 arguments 类数组对象）：
-
```js
function sum(first, ...rest) {
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]（真正的数组）
return rest.reduce((acc, val) => acc + val, first);
}
sum(1, 2, 3, 4, 5); // 15
// 剩余参数必须是最后一个参数
// function bad(a, ...b, c) {} // ❌ SyntaxError
// 搭配解构使用
function processConfig({ host, port, ...otherOptions }) {
console.log(host); // "localhost"
console.log(port); // 3000
console.log(otherOptions); // { debug: true, timeout: 5000 }
}
processConfig({ host: 'localhost', port: 3000, debug: true, timeout: 5000 });
```
- 返回值
- 函数只能返回一个值。如果需要返回多个值，用对象或数组：
```js
// 不写 return 或 return 后没有值，返回 undefined
function noReturn() {
console.log('hello');
}
console.log(noReturn()); // undefined
// 返回多个值的模式
function getMinMax(arr) {
return {
min: Math.min(...arr),
max: Math.max(...arr)
};
}
const { min, max } = getMinMax([3, 1, 4, 1, 5, 9]);
// 用数组返回，配合解构
function divide(a, b) {
return [Math.floor(a / b), a % b]; // [商, 余数]
}
const [quotient, remainder] = divide(17, 5); // 3, 2
```
- return 换行陷阱
```js
function gotcha() {
return // ← JS 在这里自动插入分号，函数返回 undefined
{
name: 'An'
};
}
console.log(gotcha()); // undefined！
// 正确写法：左大括号跟 return 同一行
function correct() {
return {
name: 'An'
};
}
```
- 函数是一等公民
- 在 JavaScript 中，函数和其他值（数字、字符串）没有区别，可以被赋值、传递、返回。
- 赋值给变量：
```js
const greet = function(name) { return `Hello, ${name}`; };
const sayHi = greet; // 函数可以像值一样赋给另一个变量
sayHi('An'); // "Hello, An"
```
- 作为参数传递（回调函数）：
```js
function repeat(n, action) {
for (let i = 0; i < n; i++) {
action(i);
}
}
repeat(3, console.log); // 0, 1, 2
repeat(3, i => console.log(i * i)); // 0, 1, 4
// 数组方法中大量使用回调
const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0); // [2, 4]
const doubled = nums.map(n => n * 2); // [2, 4, 6, 8, 10]
const sum = nums.reduce((acc, n) => acc + n, 0); // 15
```
- 作为返回值
```js
function multiplier(factor) {
return (number) => number * factor; // 返回一个新函数
}
const double = multiplier(2);
const triple = multiplier(3);
double(5); // 10
triple(5); // 15
// 这就是闭包的雏形——返回的函数"记住"了 factor 的值
// Day 4 会深入讲解
```
- 存储在数据结构中：
```js
const strategies = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b,
};
function calculate(strategy, a, b) {
return strategies[strategy](a, b);
}
calculate('add', 10, 5); // 15
calculate('multiply', 10, 5); // 50
```
- IIFE（立即调用函数表达式）
- IIFE 是一种定义后立即执行的函数模式。在 ES6 模块化之前，它是避免全局变量污染的主要手段。
-
```js
// 经典写法
(function() {
const secret = '只在这里可见';
console.log(secret);
})();
// console.log(secret); // ❌ ReferenceError
// 带参数
(function(global) {
global.myLib = { version: '1.0' };
})(window);
// 箭头函数版
(() => {
console.log('立即执行');
})();
// 带返回值
const result = (() => {
const a = 10;
const b = 20;
return a + b;
})();
console.log(result); // 30
```
- 现在有了 ES Modules 和块级作用域（let/const），IIFE 用得少了，但在一些老代码库和特定场景（如隔离作用域执行异步代码）中仍然常见。
- 作用域与闭包
- 作用域的三种层级
- 作用域决定了变量在哪里可以被访问。JavaScript 有三种作用域层级。
- 全局作用域：在所有函数和块之外声明的变量，任何地方都能访问。在浏览器中，全局变量会挂载到 window 对象上。
-
```js
const APP_NAME = 'MyApp'; // 全局作用域
function foo() {
console.log(APP_NAME); // ✅ 可以访问
}
// 浏览器环境下
var x = 10;
console.log(window.x); // 10（var 声明的全局变量挂到 window）
// let/const 声明的不会挂到 window
let y = 20;
console.log(window.y); // undefined
```
- 函数作用域：在函数内部声明的变量，外部不可见。var、let、const 在函数内都有这个特性。
-
```js
function createSecret() {
var secret1 = 'var secret';
let secret2 = 'let secret';
const secret3 = 'const secret';
return 'done';
}
createSecret();
// console.log(secret1); // ❌ ReferenceError
// console.log(secret2); // ❌ ReferenceError
// console.log(secret3); // ❌ ReferenceError
```
- 块级作用域：let 和 const 在 {}（if、for、while 或单独的块）中声明时，只在该块内可见。var 没有块级作用域。
-
```js
{
let a = 1;
const b = 2;
var c = 3;
}
// console.log(a); // ❌ ReferenceError
// console.log(b); // ❌ ReferenceError
console.log(c); // 3 ✅ var 穿透了块
// 经典面试题：for 循环中的 var vs let
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 输出：3, 3, 3（var 没有块级作用域，循环结束后 i 是 3）
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log(j), 100);
}
// 输出：0, 1, 2（let 每次迭代创建新的块级作用域）
```
- 作用域链
- 当代码访问一个变量时，JS 引擎会沿着作用域链由内向外逐层查找，直到找到或到达全局作用域。
-
```js
const global = 'global';
function outer() {
const outerVar = 'outer';
function middle() {
const middleVar = 'middle';
function inner() {
const innerVar = 'inner';
// inner 可以访问所有外层变量
console.log(innerVar); // "inner" ← 自身作用域
console.log(middleVar); // "middle" ← 父级作用域
console.log(outerVar); // "outer" ← 祖父级作用域
console.log(global); // "global" ← 全局作用域
}
inner();
// console.log(innerVar); // ❌ 外层不能访问内层
}
middle();
}
outer();
```
- 词法作用域
- JavaScript 使用词法作用域（也叫静态作用域），意思是函数的作用域在定义时就确定了，而不是在调用时。
-
```js
const x = 'global';
function printX() {
console.log(x); // 这里的 x 在定义时就绑定了全局的 x
}
function wrapper() {
const x = 'wrapper';
printX(); // 虽然在 wrapper 内部调用，但打印的是 "global"
}
wrapper(); // "global"，不是 "wrapper"
```
- 这个特性是闭包的基础。函数"记住"的是它被创建时的环境，而不是被调用时的环境。
-
```js
function createPrinter() {
const message = '来自 createPrinter';
return function() {
console.log(message); // 词法作用域：绑定的是 createPrinter 内的 message
};
}
const printer = createPrinter();
function someOtherPlace() {
const message = '来自 someOtherPlace';
printer(); // "来自 createPrinter"，不受调用位置影响
}
someOtherPlace();
```
- 闭包
- 闭包是指一个函数能够访问其词法作用域中的变量，即使这个函数在其词法作用域之外执行。
-
```js
function createCounter() {
let count = 0; // 这个变量被"封闭"在闭包中
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// count 变量从外部完全无法访问
// console.log(count); // ❌ ReferenceError
// 每次调用 createCounter 创建独立的闭包
const counter2 = createCounter();
console.log(counter2()); // 1（独立的 count）
```
- 闭包的本质：createCounter 执行完后，正常来说内部变量 count 应该被垃圾回收。但因为返回的函数仍然引用着 count，JS 引擎就保留了这个变量。返回的函数 + 它引用的外部变量 = 闭包。
- 闭包应用场景
- 数据私有化 / 模块模式
```js
function createWallet(initialBalance) {
let balance = initialBalance; // 私有变量，外部无法直接修改
return {
deposit(amount) {
if (amount <= 0) throw new Error('金额必须大于 0');
balance += amount;
return balance;
},
withdraw(amount) {
if (amount > balance) throw new Error('余额不足');
balance -= amount;
return balance;
},
getBalance() {
return balance;
}
};
}
const wallet = createWallet(100);
wallet.deposit(50); // 150
wallet.withdraw(30); // 120
wallet.getBalance(); // 120
// wallet.balance; // undefined，无法直接访问
// balance = 999999; // 不可能，balance 被封闭在闭包中
```
- 工厂函数 / 函数生成器
```js
function createGreeter(greeting) {
return function(name) {
return `${greeting}, ${name}!`;
};
}
const hello = createGreeter('Hello');
const nihao = createGreeter('你好');
hello('An'); // "Hello, An!"
nihao('An'); // "你好, An!"
// 更实用的例子：创建带预设配置的函数
function createLogger(prefix) {
return function(message) {
console.log(`[${prefix}] ${new Date().toISOString()}: ${message}`);
};
}
const dbLog = createLogger('DB');
const apiLog = createLogger('API');
dbLog('连接成功'); // [DB] 2026-04-05T...: 连接成功
apiLog('请求收到'); // [API] 2026-04-05T...: 请求收到
```
- 柯里化（Currying）：把接受多个参数的函数，变成一系列只接受一个参数的函数
```js
// 普通函数
function add(a, b, c) {
return a + b + c;
}
add(1, 2, 3); // 6
// 柯里化版本（手动）
function curriedAdd(a) {
return function(b) {
return function(c) {
return a + b + c; // 三层闭包，每层记住一个参数
};
};
}
curriedAdd(1)(2)(3); // 6
// 拆开用
const addOne = curriedAdd(1);
const addOneAndTwo = addOne(2);
addOneAndTwo(3); // 6
// 箭头函数简写
const curriedAdd2 = a => b => c => a + b + c;
// 实际应用：事件处理器工厂
const handleClick = (action) => (id) => (event) => {
console.log(`Action: ${action}, ID: ${id}, Target: ${event.target}`);
};
// button.addEventListener('click', handleClick('delete')(42));
```
- 防抖（Debounce）
```js
function debounce(fn, delay) {
let timerId = null; // 闭包保存定时器 ID
return function(...args) {
clearTimeout(timerId); // 每次调用都清除上一次的定时器
timerId = setTimeout(() => {
fn.apply(this, args); // delay 毫秒后才真正执行
}, delay);
};
}
// 使用：搜索框输入时，停止输入 300ms 后才发请求
const search = debounce((query) => {
console.log(`搜索: ${query}`);
}, 300);
search('h'); // 被取消
search('he'); // 被取消
search('hel'); // 被取消
search('hello'); // 300ms 后执行 → "搜索: hello"
```
- 节流（Throttle）
```js
function throttle(fn, interval) {
let lastTime = 0; // 闭包保存上次执行时间
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
lastTime = now;
fn.apply(this, args);
}
};
}
// 使用：滚动事件每 200ms 最多触发一次
// window.addEventListener('scroll', throttle(handleScroll, 200));
```
- 对象与数组
- 对象字面量与属性
- 对象是 JavaScript 中最基础的数据结构，用来存储键值对。
- 创建与属性访问：
```js
// 对象字面量
const user = {
name: 'An',
age: 25,
'favorite-color': 'blue', // 包含特殊字符的键名需要引号
1: 'one' // 数字键会被转为字符串
};
// 点语法访问
console.log(user.name); // "An"
// 方括号访问（适用于动态键名或特殊字符）
console.log(user['favorite-color']); // "blue"
console.log(user[1]); // "one"
const key = 'age';
console.log(user[key]); // 25（动态访问）
```
- 属性简写与计算属性名（ES6）：
```js
const name = 'An';
const age = 25;
// 属性简写：变量名和属性名相同时可以简写
const user = { name, age };
// 等价于 { name: name, age: age }
// 方法简写
const calculator = {
// ES6 之前：add: function(a, b) { return a + b; }
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
// 计算属性名：用表达式作为键名
const field = 'email';
const obj = {
[field]: 'an@example.com', // { email: 'an@example.com' }
[`${field}Verified`]: true, // { emailVerified: true }
['get' + 'Name']() { return 'An'; } // { getName() { return 'An'; } }
};
```
- 属性的增删改查：
```js
const user = { name: 'An' };
// 增
user.age = 25;
user['city'] = 'Tokyo';
// 改
user.name = 'Bob';
// 删
delete user.city;
console.log(user.city); // undefined
// 查（判断属性是否存在）
console.log('name' in user); // true（包括原型链）
console.log(user.hasOwnProperty('name')); // true（只查自身）
console.log(user.toString !== undefined); // true（原型链上的）
console.log(user.hasOwnProperty('toString')); // false
```
- 对象的遍历与常用静态方法
-
```js
const user = { name: 'An', age: 25, city: 'Tokyo' };
// Object.keys() — 返回键名数组
Object.keys(user); // ['name', 'age', 'city']
// Object.values() — 返回值数组
Object.values(user); // ['An', 25, 'Tokyo']
// Object.entries() — 返回 [key, value] 二维数组
Object.entries(user); // [['name','An'], ['age',25], ['city','Tokyo']]
// 用 for...of 配合 entries 遍历
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
// Object.fromEntries() — entries 的反操作
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2 }
// 实用场景：过滤对象属性
const filtered = Object.fromEntries(
Object.entries(user).filter(([key]) => key !== 'age')
);
// { name: 'An', city: 'Tokyo' }
```
- Object.assign() 与冻结：
```js
// Object.assign() — 合并对象（浅拷贝）
const defaults = { theme: 'light', lang: 'zh', debug: false };
const userPrefs = { theme: 'dark', debug: true };
const config = Object.assign({}, defaults, userPrefs);
// { theme: 'dark', lang: 'zh', debug: true }
// 后面的属性覆盖前面的
// Object.freeze() — 冻结对象，不能增删改
const frozen = Object.freeze({ name: 'An', age: 25 });
frozen.name = 'Bob'; // 静默失败（严格模式下报错）
frozen.city = 'NYC'; // 静默失败
console.log(frozen); // { name: 'An', age: 25 }
// ⚠️ freeze 是浅冻结
const obj = Object.freeze({ inner: { value: 1 } });
obj.inner.value = 999; // ✅ 生效了！内层对象没有被冻结
// Object.isFrozen()
console.log(Object.isFrozen(frozen)); // true
```
- 解构赋值 — 对象
- 解构让你用简洁的语法从对象中提取值。
```js
const user = {
name: 'An',
age: 25,
address: {
city: 'Tokyo',
zip: '100-0001'
},
hobbies: ['coding', 'reading']
};
// 基本解构
const { name, age } = user;
console.log(name); // "An"
console.log(age); // 25
// 重命名
const { name: userName, age: userAge } = user;
console.log(userName); // "An"
// 默认值
const { name: n, role = 'viewer' } = user;
console.log(role); // "viewer"（user 中没有 role）
// 嵌套解构
const { address: { city, zip } } = user;
console.log(city); // "Tokyo"
// 剩余属性
const { name: nm, ...rest } = user;
console.log(rest); // { age: 25, address: {...}, hobbies: [...] }
```
- 函数参数中的解构（非常常用）：
```js
// ❌ 不解构：参数含义不清晰
function createUser(name, age, role, active) {
// name 是第几个参数？容易搞混
}
// ✅ 解构：清晰且支持默认值、可选参数
function createUser({ name, age, role = 'viewer', active = true } = {}) {
return { name, age, role, active };
}
// 调用时不需要关心参数顺序
createUser({ age: 25, name: 'An' });
createUser({}); // 全部使用默认值
createUser(); // 因为有 = {}，不传也不报错
```
- 数组基础与常用方法
- 创建数组：
```js
const arr1 = [1, 2, 3];
const arr2 = new Array(5); // [empty × 5]（5个空位，不推荐）
const arr3 = Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]
const arr4 = Array.of(1, 2, 3); // [1, 2, 3]
```
- 增删元素（会修改原数组）：
```js
const arr = [1, 2, 3];
// 尾部操作
arr.push(4); // [1, 2, 3, 4]，返回新长度 4
arr.pop(); // [1, 2, 3]，返回被删除的元素 4
// 头部操作
arr.unshift(0); // [0, 1, 2, 3]，返回新长度 4
arr.shift(); // [1, 2, 3]，返回被删除的元素 0
// splice — 万能的增删改
const items = ['a', 'b', 'c', 'd', 'e'];
// splice(起始索引, 删除个数, ...插入的元素)
items.splice(2, 1); // 删除：items = ['a','b','d','e']，返回 ['c']
items.splice(1, 0, 'x'); // 插入：items = ['a','x','b','d','e']
items.splice(1, 2, 'y','z');// 替换：items = ['a','y','z','d','e']
```
- 不修改原数组的方法：
```js
const arr = [1, 2, 3, 4, 5];
// slice(start, end) — 切片，左闭右开
arr.slice(1, 3); // [2, 3]
arr.slice(-2); // [4, 5]（最后两个）
arr.slice(); // [1, 2, 3, 4, 5]（浅拷贝）
// concat — 拼接
arr.concat([6, 7]); // [1, 2, 3, 4, 5, 6, 7]
// indexOf / lastIndexOf — 查找索引
[1, 2, 3, 2].indexOf(2); // 1（第一个）
[1, 2, 3, 2].lastIndexOf(2); // 3（最后一个）
[1, 2, 3].indexOf(99); // -1（未找到）
// includes — 是否包含
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(99); // false
// ⚠️ indexOf 和 includes 对引用类型无效
const obj = { id: 1 };
[{ id: 1 }].includes(obj); // false（不同的引用）
// join — 数组转字符串
['a', 'b', 'c'].join('-'); // "a-b-c"
['a', 'b', 'c'].join(''); // "abc"
// flat — 扁平化
[1, [2, [3, [4]]]].flat(); // [1, 2, [3, [4]]]（默认一层）
[1, [2, [3, [4]]]].flat(2); // [1, 2, 3, [4]]
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]（完全扁平）
// at — 支持负索引（ES2022）
const letters = ['a', 'b', 'c', 'd'];
letters.at(0); // "a"
letters.at(-1); // "d"（最后一个）
letters.at(-2); // "c"
```
- 解构赋值-数组
-
```js
const rgb = [255, 128, 0];
// 基本解构
const [r, g, b] = rgb;
console.log(r, g, b); // 255 128 0
// 跳过元素
const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3
// 默认值
const [a, b, c, d = 0] = [1, 2, 3];
console.log(d); // 0
// 剩余元素
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]
// 交换变量（不需要临时变量）
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1
// 从函数返回值解构
function getCoords() {
return [35.6762, 139.6503];
}
const [lat, lng] = getCoords();
// 嵌套解构
const matrix = [[1, 2], [3, 4]];
const [[a1, a2], [b1, b2]] = matrix;
```
- 扩展运算符（Spread Operator）
- ... 在不同上下文中扮演不同角色。用在函数参数中是"收集"（rest），用在数组/对象字面量中是"展开"（spread）
- 数组展开
```js
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 合并数组
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// 浅拷贝
const copy = [...arr1]; // [1, 2, 3]（新数组，不同引用）
// 在特定位置插入
const withInsert = [...arr1.slice(0, 1), 99, ...arr1.slice(1)];
// [1, 99, 2, 3]
// 展开字符串
const chars = [..."hello"]; // ['h', 'e', 'l', 'l', 'o']
// 配合 Math 使用
const nums = [3, 1, 4, 1, 5, 9];
Math.max(...nums); // 9
```
- 对象展开
```js
const base = { a: 1, b: 2 };
const extra = { b: 3, c: 4 };
// 合并对象（后面覆盖前面）
const merged = { ...base, ...extra };
// { a: 1, b: 3, c: 4 }
// 浅拷贝 + 修改部分属性（React 中常用）
const user = { name: 'An', age: 25, city: 'Tokyo' };
const updated = { ...user, age: 26 };
// { name: 'An', age: 26, city: 'Tokyo' }
// 条件展开
const isAdmin = true;
const config = {
theme: 'dark',
...(isAdmin && { adminPanel: true, debugMode: true })
};
// isAdmin 为 true 时：{ theme: 'dark', adminPanel: true, debugMode: true }
// isAdmin 为 false 时：{ theme: 'dark' }（false 被展开为空）
```
- 浅拷贝与深拷贝
- JavaScript 中引用类型赋值只是复制地址，理解拷贝层级非常重要。
- 浅拷贝（Shallow Copy）：只拷贝第一层，嵌套的对象/数组仍然是共享引用。
```js
const original = {
name: 'An',
scores: [90, 85, 95],
address: { city: 'Tokyo' }
};
// 三种浅拷贝方式
const copy1 = { ...original };
const copy2 = Object.assign({}, original);
const copy3 = structuredClone ? null : null; // 这个是深拷贝，后面说
// 浅拷贝的问题：嵌套对象是共享的
copy1.name = 'Bob'; // ✅ 不影响 original
copy1.scores.push(100); // ❌ original.scores 也变了！
copy1.address.city = 'Osaka'; // ❌ original.address.city 也变了！
console.log(original.scores); // [90, 85, 95, 100]
console.log(original.address.city); // "Osaka"
```
- 深拷贝（Deep Copy）：递归拷贝所有层级，完全独立。
```js
// 方法1：structuredClone（现代浏览器和 Node 17+ 原生支持，推荐）
const deep1 = structuredClone(original);
deep1.scores.push(100);
deep1.address.city = 'Osaka';
console.log(original.scores); // [90, 85, 95] 不受影响 ✅
console.log(original.address.city); // "Tokyo" 不受影响 ✅
// 方法2：JSON 序列化（简单但有限制）
const deep2 = JSON.parse(JSON.stringify(original));
// ⚠️ 限制：
// - undefined、function、Symbol 会丢失
// - Date 会变成字符串
// - RegExp 会变成空对象
// - 不支持循环引用
// 示例：JSON 方法的数据丢失
const problematic = {
fn: () => 'hello', // 函数
date: new Date(), // Date
undef: undefined, // undefined
regex: /abc/g // 正则
};
const jsonCopy = JSON.parse(JSON.stringify(problematic));
console.log(jsonCopy);
// { date: "2026-04-05T...", regex: {} }
// fn 和 undef 直接丢了，date 变成了字符串，regex 变成了空对象
```
- 数组高阶方法
- 什么是高阶方法
- 高阶方法就是接受函数作为参数的方法
- 每个方法的回调函数都接收三个参数：(当前元素, 索引, 原数组)，大多数情况只用第一个。
- map - 映射转换
- 对数组每个元素执行回调，将返回值收集成一个等长的新数组。不修改原数组。
-
```js
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
// [2, 4, 6, 8, 10]
const strings = nums.map(n => `第${n}项`);
// ['第1项', '第2项', '第3项', '第4项', '第5项']
// 实际场景：从 API 数据中提取需要的字段
const users = [
{ id: 1, name: 'An', email: 'an@test.com', age: 25 },
{ id: 2, name: 'Bob', email: 'bob@test.com', age: 30 },
{ id: 3, name: 'Cat', email: 'cat@test.com', age: 22 }
];
const names = users.map(u => u.name);
// ['An', 'Bob', 'Cat']
const cards = users.map(({ id, name, age }) => ({
id,
label: `${name} (${age}岁)`
}));
// [{ id: 1, label: 'An (25岁)' }, ...]
// 使用索引参数
const indexed = ['a', 'b', 'c'].map((item, i) => `${i}: ${item}`);
// ['0: a', '1: b', '2: c']
```
- 常见错误
```js
// ❌ map 中不 return（箭头函数加了 {} 就必须写 return）
nums.map(n => { n * 2 }); // [undefined, undefined, ...]
// ❌ 用 map 做副作用操作（不关心返回值时应该用 forEach）
users.map(u => console.log(u.name)); // 能跑，但语义错误
// ❌ parseInt 的经典陷阱
['1', '2', '3'].map(parseInt);
// [1, NaN, NaN]
// 原因：map 传了 (元素, 索引, 数组) 三个参数给 parseInt
// parseInt('1', 0) → 1
// parseInt('2', 1) → NaN（1进制无效）
// parseInt('3', 2) → NaN（2进制没有3）
// ✅ 正确写法
['1', '2', '3'].map(s => parseInt(s, 10)); // [1, 2, 3]
['1', '2', '3'].map(Number); // [1, 2, 3]
```
- filter-过滤筛选
- 对数组每个元素执行回调，保留返回值为 truthy 的元素，返回一个新数组（长度 ≤ 原数组）。
-
```js
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = nums.filter(n => n % 2 === 0);
// [2, 4, 6, 8, 10]
const bigNums = nums.filter(n => n > 5);
// [6, 7, 8, 9, 10]
// 过滤对象数组
const users = [
{ name: 'An', age: 25, active: true },
{ name: 'Bob', age: 17, active: true },
{ name: 'Cat', age: 30, active: false },
{ name: 'Dan', age: 22, active: true }
];
const activeAdults = users.filter(u => u.active && u.age >= 18);
// [{ name: 'An', ... }, { name: 'Dan', ... }]
// 移除 falsy 值
const messy = [0, 'hello', '', null, 42, undefined, false, 'world'];
const clean = messy.filter(Boolean);
// ['hello', 42, 'world']
// 去重（Day 5 用的 Set 更简洁，这里展示 filter 做法）
const arr = [1, 2, 2, 3, 3, 3];
const unique = arr.filter((item, index) => arr.indexOf(item) === index);
// [1, 2, 3]
```
- reduce — 归约累积
- reduce 是最强大也最灵活的数组方法，它将数组"归约"为一个值（可以是任何类型）。
- 语法：array.reduce((accumulator, currentValue, index, array) => {...}, initialValue)
-
```js
// 最基本：求和
const sum = [1, 2, 3, 4, 5].reduce((acc, cur) => acc + cur, 0);
// 执行过程：
// acc=0, cur=1 → 1
// acc=1, cur=2 → 3
// acc=3, cur=3 → 6
// acc=6, cur=4 → 10
// acc=10, cur=5 → 15
// 结果：15
// 求最大值
const max = [3, 1, 4, 1, 5, 9].reduce((a, b) => a > b ? a : b);
// 没有初始值时，第一个元素作为初始值
// 结果：9
```
- find 与 findIndex - 查找
- find 返回第一个满足条件的元素本身，找不到返回 undefined。
- findIndex 返回第一个满足条件的元素索引，找不到返回 -1。
-
```js
const users = [
{ id: 1, name: 'An', role: 'dev' },
{ id: 2, name: 'Bob', role: 'admin' },
{ id: 3, name: 'Cat', role: 'dev' }
];
const admin = users.find(u => u.role === 'admin');
// { id: 2, name: 'Bob', role: 'admin' }
const notFound = users.find(u => u.role === 'ceo');
// undefined
const adminIndex = users.findIndex(u => u.role === 'admin');
// 1
// findLast / findLastIndex（ES2023）从后往前找
const lastDev = users.findLast(u => u.role === 'dev');
// { id: 3, name: 'Cat', role: 'dev' }
```
- some 与 every — 条件判断
- some 只要有一个元素满足条件就返回 true（类似逻辑或）。
- every 要求所有元素都满足条件才返回 true（类似逻辑与）。
-
```js
const nums = [1, 2, 3, 4, 5];
nums.some(n => n > 4); // true（5 > 4）
nums.some(n => n > 10); // false
nums.every(n => n > 0); // true（全部大于0）
nums.every(n => n > 3); // false（1, 2, 3 不满足）
// 空数组的行为
[].some(() => true); // false（没有元素满足）
[].every(() => false); // true（没有元素不满足 —— 空真）
// 实际场景
const cart = [
{ name: '键盘', inStock: true },
{ name: '鼠标', inStock: true },
{ name: '显示器', inStock: false }
];
const allInStock = cart.every(item => item.inStock); // false
const anyOutOfStock = cart.some(item => !item.inStock); // true
// 表单验证
const fields = [
{ name: 'email', valid: true },
{ name: 'password', valid: true },
{ name: 'phone', valid: false }
];
const canSubmit = fields.every(f => f.valid); // false
```
- sort 排序
- sort 会修改原数组，并且默认按字符串的 Unicode 码点排序，这对数字来说通常不是你想要的。
-
```js
// ❌ 默认排序的坑
[10, 9, 2, 21, 3].sort();
// [10, 2, 21, 3, 9]
// 因为 "10" < "2"（按字符串比较，'1' 的码点 < '2' 的码点）
// ✅ 数字排序：提供比较函数
// 返回负数 → a 排前面
// 返回正数 → b 排前面
// 返回 0 → 保持原序
[10, 9, 2, 21, 3].sort((a, b) => a - b);
// [2, 3, 9, 10, 21]（升序）
[10, 9, 2, 21, 3].sort((a, b) => b - a);
// [21, 10, 9, 3, 2]（降序）
// 对象数组排序
const users = [
{ name: 'Cat', age: 30 },
{ name: 'An', age: 25 },
{ name: 'Bob', age: 22 }
];
// 按年龄升序
users.sort((a, b) => a.age - b.age);
// 按名字字母序
users.sort((a, b) => a.name.localeCompare(b.name));
// localeCompare 支持中文拼音排序：
// ['张三','李四','王五'].sort((a,b) => a.localeCompare(b, 'zh-CN'))
```
- 不想修改原数组？ 用 toSorted()（ES2023）或先拷贝：
```js
const original = [3, 1, 2];
// ES2023
const sorted = original.toSorted((a, b) => a - b); // [1, 2, 3]
console.log(original); // [3, 1, 2]（不变）
// 兼容写法
const sorted2 = [...original].sort((a, b) => a - b);
```
- flatMap — 映射 + 扁平化
- flatMap 等价于先 map 再 flat(1)，但只扁平一层。它特别适合一对多的映射场景。
-
```js
// 普通 map 产生嵌套数组
const sentences = ['hello world', 'goodbye moon'];
sentences.map(s => s.split(' '));
// [['hello', 'world'], ['goodbye', 'moon']]
// flatMap 自动扁平一层
sentences.flatMap(s => s.split(' '));
// ['hello', 'world', 'goodbye', 'moon']
// 一对多：每个用户有多个标签
const users = [
{ name: 'An', tags: ['dev', 'js'] },
{ name: 'Bob', tags: ['design', 'css'] }
];
const allTags = users.flatMap(u => u.tags);
// ['dev', 'js', 'design', 'css']
// 条件性映射：过滤 + 转换一步完成
const nums = [1, 2, 3, 4, 5, 6];
const doubledEvens = nums.flatMap(n => n % 2 === 0 ? [n * 2] : []);
// [4, 8, 12]
// 偶数返回 [n*2]（包含一个元素的数组），奇数返回 []（空数组被扁平掉了）
```
- forEach — 遍历执行
- forEach 对每个元素执行回调，没有返回值（返回 undefined）。它是纯粹用于副作用的方法。
-
```js
const users = ['An', 'Bob', 'Cat'];
users.forEach((name, index) => {
console.log(`${index + 1}. ${name}`);
});
// 1. An
// 2. Bob
// 3. Cat
```

面向对象与核心机制

- 面向对象与核心机制
- this 指向
- 为什么 this 这么重要
- 和大多数语言不同，JS 中 this 的值不取决于函数在哪里定义，而取决于函数怎么被调用（箭头函数除外）
- 规则一：默认绑定
- 当函数作为独立函数调用（不通过对象、不用 call/apply/bind、不用 new），this 指向全局对象（浏览器中是 window，Node 中是 global）。严格模式下 this 是 undefined。
-
```js
function showThis() {
console.log(this);
}
showThis(); // 浏览器：window，Node：global
// 严格模式
function strictShow() {
'use strict';
console.log(this);
}
strictShow(); // undefined
```
- 规则二：隐式绑定
- 当函数作为对象的方法调用时（obj.method()），this 指向调用它的那个对象。
-
```js
const user = {
name: 'An',
greet() {
console.log(this.name);
}
};
user.greet(); // "An"，this === user
// 链式对象：this 指向最近的调用者
const company = {
name: 'MiniMax',
department: {
name: 'Agent Team',
getName() {
return this.name;
}
}
};
company.department.getName(); // "Agent Team"，不是 "MiniMax"
// this 指向 department，因为 department 是最近的调用者
```
- 规则三：显式绑定 — call / apply / bind
- 当你想手动指定 this 时，使用这三个方法
- call — 立即调用，逐个传参
```js
function introduce(greeting, punctuation) {
console.log(`${greeting}, I'm ${this.name}${punctuation}`);
}
const user = { name: 'An' };
introduce.call(user, 'Hello', '!');
// "Hello, I'm An!"
// 第一个参数是 this 的值，后面依次是函数参数
```
- apply — 立即调用，参数以数组形式传入
```js
introduce.apply(user, ['Hi', '~']);
// "Hi, I'm An~"
// call 和 apply 的唯一区别就是参数传递方式
// 助记：Apply 用 Array
// 经典用法：借用方法
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const realArray = Array.prototype.slice.call(arrayLike);
// ['a', 'b', 'c']
// 求数组最大值（ES5 时代）
Math.max.apply(null, [3, 1, 4, 1, 5]); // 5
// 现在用展开运算符更好：Math.max(...[3, 1, 4, 1, 5])
```
- bind — 返回新函数，永久绑定 this（不立即调用）：
```js
const user = { name: 'An' };
function greet(greeting) {
console.log(`${greeting}, ${this.name}`);
}
const greetAn = greet.bind(user);
greetAn('Hello'); // "Hello, An"
greetAn('Hey'); // "Hey, An"
// bind 也可以预设参数（偏函数/Partial Application）
const helloAn = greet.bind(user, 'Hello');
helloAn(); // "Hello, An"（greeting 已经被绑定为 'Hello'）
// 解决回调中 this 丢失的问题
setTimeout(user.greet.bind(user), 100); // ✅ 不会丢失 this
// bind 返回的函数，this 不可被再次修改
const bound = greet.bind(user);
bound.call({ name: 'Bob' }, 'Hi'); // "Hi, An"（仍然是 An，bind 的优先级更高）
```
- 规则四：new 绑定
- 当用 new 调用函数时，JS 会自动创建一个新对象，将 this 绑定到这个新对象上。
-
```js
function User(name, age) {
// new 调用时，this 自动指向新创建的空对象 {}
this.name = name;
this.age = age;
// 不需要 return，自动返回 this
}
const user = new User('An', 25);
console.log(user); // User { name: 'An', age: 25 }
// new 到底做了什么？等价于：
function myNew(Constructor, ...args) {
// 1. 创建空对象，原型指向构造函数的 prototype
const obj = Object.create(Constructor.prototype);
// 2. 执行构造函数，this 绑定到新对象
const result = Constructor.apply(obj, args);
// 3. 如果构造函数返回了对象，就用那个对象；否则返回新创建的对象
return result instanceof Object ? result : obj;
}
const user2 = myNew(User, 'Bob', 30);
console.log(user2); // User { name: 'Bob', age: 30 }
```
- 箭头函数中的 this
- 箭头函数没有自己的 this，它的 this 继承自定义时所在的外层作用域（词法 this），且永远不可改变。
-
```js
const user = {
name: 'An',
// 普通方法
greetNormal() {
console.log(this.name); // this 取决于调用方式
},
// 箭头函数作为方法 ❌
greetArrow: () => {
console.log(this.name); // this 是外层作用域的 this，不是 user
}
};
user.greetNormal(); // "An" ✅
user.greetArrow(); // undefined ❌（箭头函数的 this 是全局/模块作用域）
```
- 绑定优先级
- new 绑定 > 显式绑定(call/apply/bind) > 隐式绑定(obj.fn()) > 默认绑定(fn())
- 原型与原型链
- 为什么需要原型
- 在没有原型机制的情况下，每次用构造函数创建实例，方法都会被重复创建
```js
function User(name) {
this.name = name;
// 每个实例都创建一个新的 greet 函数，浪费内存
this.greet = function() {
return `Hi, I'm ${this.name}`;
};
}
const u1 = new User('An');
const u2 = new User('Bob');
console.log(u1.greet === u2.greet); // false —— 两个不同的函数对象
// 如果创建 10000 个用户，就有 10000 份完全相同的 greet 函数
// 原型就是用来解决这个问题的
```
- prototype 与 __proto__
- prototype：只有函数才拥有的属性，它是一个对象，当用 new 调用该函数时，新创建的实例的原型会指向这个对象。
- __proto__（或者说 [[Prototype]]）：每个对象都有的内部属性，指向它的原型对象。__proto__ 是非标准但被广泛支持的访问方式，标准方式是 Object.getPrototypeOf()。
```js
function User(name) {
this.name = name;
}
// 在 prototype 上定义方法，所有实例共享
User.prototype.greet = function() {
return `Hi, I'm ${this.name}`;
};
const u1 = new User('An');
const u2 = new User('Bob');
// 实例的 __proto__ 指向构造函数的 prototype
console.log(u1.__proto__ === User.prototype); // true
console.log(Object.getPrototypeOf(u1) === User.prototype); // true（标准写法）
// 所有实例共享 prototype 上的方法
console.log(u1.greet === u2.greet); // true ✅ 同一个函数
u1.greet(); // "Hi, I'm An"
u2.greet(); // "Hi, I'm Bob"
```
- constructor 属性
- 每个函数的 prototype 对象默认有一个 constructor 属性，指回函数本身
-
```js
function User(name) {
this.name = name;
}
console.log(User.prototype.constructor === User); // true
const u = new User('An');
console.log(u.constructor === User); // true（通过原型链找到的）
// 可以用 constructor 判断实例是由哪个构造函数创建的
// 但不如 instanceof 可靠，因为 constructor 可以被覆盖
```
- 原型链（Prototype Chain）
- 当你访问一个对象的属性时，JS 引擎会沿着原型链逐层查找，直到找到该属性或到达链的顶端 null
-
```js
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
return `${this.name} is eating`;
};
function Dog(name, breed) {
Animal.call(this, name); // 调用父构造函数
this.breed = breed;
}
// 建立原型链：Dog.prototype 的原型指向 Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor
Dog.prototype.bark = function() {
return `${this.name} says woof!`;
};
const dog = new Dog('Buddy', 'Golden');
// 属性查找过程
dog.name; // "Buddy" ← 在 dog 自身找到
dog.bark(); // "Buddy says woof!" ← 在 Dog.prototype 上找到
dog.eat(); // "Buddy is eating" ← 在 Animal.prototype 上找到
dog.toString(); // "[object Object]" ← 在 Object.prototype 上找到
dog.whatever; // undefined ← 一路找到 null，没找到
```
- Object.create()
- Object.create(proto) 创建一个新对象，将它的 __proto__ 设为指定的对象。这是建立原型链最干净的方式。
- Class 语法与继承
- Class 的本质
- ES6 的 class 是原型继承的语法糖。
- 它不引入新的对象模型，底层仍然是原型机制，但写法更清晰、更接近传统面向对象语言。
-
```js
// ES5 写法
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.greet = function() {
return `Hi, I'm ${this.name}`;
};
// ES6 class 写法（完全等价）
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hi, I'm ${this.name}`;
}
}
// 验证底层仍然是原型
console.log(typeof User); // "function"
console.log(User.prototype.greet); // function
console.log(new User('An', 25).__proto__ === User.prototype); // true
```
- class 和构造函数的区别：
-
```js
// 1. class 必须用 new 调用
class Foo {}
// Foo(); // ❌ TypeError: Class constructor Foo cannot be invoked without 'new'
// 构造函数不强制
function Bar() {}
Bar(); // ✅ 不报错（但通常是 bug）
// 2. class 内部默认严格模式
class StrictExample {
method() {
// 这里自动处于严格模式
// 未声明的变量赋值会报错等
}
}
// 3. class 声明不会提升（存在 TDZ）
// const u = new User(); // ❌ ReferenceError
// class User {}
// 4. class 中的方法不可枚举
class MyClass {
method() {}
}
console.log(Object.keys(MyClass.prototype)); // []（空，method 不可枚举）
// 对比 ES5
function MyFunc() {}
MyFunc.prototype.method = function() {};
console.log(Object.keys(MyFunc.prototype)); // ['method']（可枚举）
```
- constructor 构造函数
- constructor 是 class 中的特殊方法，在 new 时自动调用。每个 class 只能有一个。
-
```js
class User {
constructor(name, age) {
// this 指向新创建的实例
this.name = name;
this.age = age;
this.createdAt = new Date();
}
}
const u = new User('An', 25);
console.log(u.name); // "An"
console.log(u.createdAt); // 当前时间
// 如果不写 constructor，会有一个默认的空 constructor
class Empty {}
// 等价于
class Empty {
constructor() {}
}
// constructor 中可以做参数验证
class PositiveNumber {
constructor(value) {
if (typeof value !== 'number' || value <= 0) {
throw new Error('必须是正数');
}
this.value = value;
}
}
new PositiveNumber(5); // ✅
// new PositiveNumber(-1); // ❌ Error: 必须是正数
```
- 实例方法、访问器与类字段
-
```js
class User {
// --- 类字段（Class Fields，ES2022）---
// 直接在 class body 中声明，会成为实例自身的属性
role = 'viewer';
loginCount = 0;
constructor(name, email) {
this.name = name;
this.email = email;
}
// --- 实例方法 ---
// 定义在 User.prototype 上，所有实例共享
greet() {
return `Hi, I'm ${this.name}`;
}
login() {
this.loginCount++;
return `${this.name} logged in (${this.loginCount} times)`;
}
// --- getter / setter ---
// 像属性一样访问，但实际上是方法调用
get displayName() {
return `${this.name} <${this.email}>`;
}
get isFrequent() {
return this.loginCount > 10;
}
set nickname(value) {
if (value.length < 2) {
throw new Error('昵称至少2个字符');
}
this._nickname = value;
}
get nickname() {
return this._nickname || this.name;
}
}
const u = new User('An', 'an@test.com');
// 类字段
console.log(u.role); // "viewer"
console.log(u.loginCount); // 0
// 实例方法
u.login(); // "An logged in (1 times)"
// getter（不加括号）
console.log(u.displayName); // "An <an@test.com>"
console.log(u.isFrequent); // false
// setter（像赋值一样使用）
u.nickname = 'AnDev';
console.log(u.nickname); // "AnDev"
// u.nickname = 'A'; // ❌ Error: 昵称至少2个字符
```
- 静态方法与静态字段
- static 定义在类本身上，不是在实例上。通过类名调用，不能通过实例调用。
-
```js
class MathUtils {
// 静态方法
static add(a, b) {
return a + b;
}
static multiply(a, b) {
return a * b;
}
// 静态字段
static PI = 3.14159;
// 静态方法可以互相调用
static circleArea(radius) {
return MathUtils.PI * radius ** 2;
// 或者用 this（this 在静态方法中指向类本身）
// return this.PI * radius ** 2;
}
}
MathUtils.add(1, 2); // 3
MathUtils.PI; // 3.14159
MathUtils.circleArea(5); // 78.53975
// 不能通过实例调用
// const m = new MathUtils();
// m.add(1, 2); // ❌ TypeError: m.add is not a function
```
- 私有字段（Private Fields）
- ES2022 引入 # 前缀表示真正的私有属性和方法，只能在类内部访问。
```js
class BankAccount {
// 私有字段
#balance;
#owner;
#transactionHistory = [];
constructor(owner, initialBalance) {
this.#owner = owner;
this.#balance = initialBalance;
}
// 私有方法
#recordTransaction(type, amount) {
this.#transactionHistory.push({
type,
amount,
date: new Date(),
balance: this.#balance
});
}
// 公开方法（通过它们间接访问私有数据）
deposit(amount) {
if (amount <= 0) throw new Error('金额必须大于0');
this.#balance += amount;
this.#recordTransaction('deposit', amount);
return this;
}
withdraw(amount) {
if (amount > this.#balance) throw new Error('余额不足');
this.#balance -= amount;
this.#recordTransaction('withdraw', amount);
return this;
}
get balance() {
return this.#balance;
}
get history() {
// 返回副本，防止外部修改
return [...this.#transactionHistory];
}
// 静态私有方法
static #validateAmount(amount) {
return typeof amount === 'number' && amount > 0;
}
}
const account = new BankAccount('An', 1000);
account.deposit(500).withdraw(200); // 链式调用
console.log(account.balance); // 1300
console.log(account.history); // [{...}, {...}]
// ❌ 私有字段外部完全不可访问
// account.#balance; // SyntaxError
// account.#recordTransaction; // SyntaxError
```
- extends 与 super — 类继承
- extends 建立继承关系，super 用于调用父类。
-
```js
class Animal {
constructor(name) {
this.name = name;
this.energy = 100;
}
eat(amount) {
this.energy += amount;
return `${this.name} ate, energy: ${this.energy}`;
}
sleep(hours) {
this.energy += hours * 10;
return `${this.name} slept ${hours}h, energy: ${this.energy}`;
}
info() {
return `${this.name} (energy: ${this.energy})`;
}
}
class Dog extends Animal {
// 子类的 constructor 必须在使用 this 之前调用 super()
constructor(name, breed) {
super(name); // 调用 Animal 的 constructor
this.breed = breed;
}
// 新方法
bark() {
this.energy -= 5;
return `${this.name} says Woof!`;
}
// 重写父类方法
eat(amount) {
// 调用父类的 eat 方法
super.eat(amount * 2); // 狗吃东西恢复双倍能量
return `${this.name} gobbled food! energy: ${this.energy}`;
}
// 扩展父类方法
info() {
return `${super.info()} [${this.breed}]`;
}
}
const dog = new Dog('Buddy', 'Golden');
dog.eat(10); // "Buddy gobbled food! energy: 120"（10*2=20，100+20=120）
dog.bark(); // "Buddy says Woof!"
dog.sleep(2); // "Buddy slept 2h, energy: 135"（继承自 Animal）
dog.info(); // "Buddy (energy: 135) [Golden]"
// 原型链验证
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true
```
- 字符串与正则表达式
- 模板字符串深入
-
```js
// 基本插值
const name = 'An';
const greeting = `Hello, ${name}!`;
// 插值中可以放任意表达式
const price = 99;
const qty = 3;
console.log(`总价: ¥${price * qty}`); // "总价: ¥297"
console.log(`状态: ${qty > 0 ? '有货' : '缺货'}`); // "状态: 有货"
// 多行字符串（保留换行和缩进）
const html = `
<div class="card">
<h2>${name}</h2>
<p>Price: ¥${price}</p>
</div>
`;
// 嵌套模板
const items = ['JS', 'CSS', 'HTML'];
const list = `
<ul>
${items.map(item => `<li>${item}</li>`).join('\n ')}
</ul>
`;
```
- 模板标签
- 标签模板允许你用一个函数来处理模板字符串，这是一个强大但不太常见的特性：
-
```js
// 标签函数接收两个参数：
// strings — 模板中的静态文本部分（数组）
// values — 插值表达式的值（rest 参数）
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i] !== undefined ? `【${values[i]}】` : '';
return result + str + value;
}, '');
}
const lang = 'JavaScript';
const exp = 5;
console.log(highlight`我学了 ${lang} ${exp} 年`);
// "我学了 【JavaScript】 【5】 年"
// 实际应用1：SQL 防注入
function sql(strings, ...values) {
return {
text: strings.join('$'), // 用占位符替代
values // 参数化查询
};
}
const userId = "1; DROP TABLE users; --";
const query = sql`SELECT * FROM users WHERE id = ${userId}`;
// { text: "SELECT * FROM users WHERE id = $", values: ["1; DROP TABLE users; --"] }
// 实际应用2：国际化
// 实际应用3：CSS-in-JS（styled-components 就是用标签模板实现的）
```
- 常用字符串方法
-
```js
const str = ' Hello, World! Hello, JavaScript! ';
// --- 查找类 ---
str.indexOf('Hello'); // 2（第一次出现的位置）
str.lastIndexOf('Hello'); // 17（最后一次出现的位置）
str.indexOf('Python'); // -1（未找到）
str.includes('World'); // true
str.startsWith(' Hello'); // true
str.endsWith('! '); // true
str.search(/hello/i); // 2（用正则查找，返回索引）
// --- 提取类 ---
str.slice(2, 7); // "Hello"（起始, 结束索引，左闭右开）
str.slice(-5); // "t! "（从倒数第5个到末尾）
str.substring(2, 7); // "Hello"（类似 slice，但不支持负数）
str.at(2); // "H"（ES2022，支持负索引）
str.at(-3); // "! " → 不对，at 只取单个字符 → "!"
// 更正：str.at(-3) 返回 '!'
// --- 修改类（返回新字符串，原字符串不变）---
str.trim(); // "Hello, World! Hello, JavaScript!"
str.trimStart(); // "Hello, World! Hello, JavaScript! "
str.trimEnd(); // " Hello, World! Hello, JavaScript!"
str.toUpperCase(); // " HELLO, WORLD! HELLO, JAVASCRIPT! "
str.toLowerCase(); // " hello, world! hello, javascript! "
'hello'.repeat(3); // "hellohellohello"
// --- 填充类 ---
'42'.padStart(5, '0'); // "00042"（左填充到5位）
'42'.padEnd(5, '.'); // "42..."（右填充到5位）
'7'.padStart(2, '0'); // "07"（常用于格式化月份/日期）
// --- 分割类 ---
'a,b,c,d'.split(','); // ['a', 'b', 'c', 'd']
'hello'.split(''); // ['h', 'e', 'l', 'l', 'o']
'a-b-c'.split('-', 2); // ['a', 'b']（limit 参数）
// --- 替换类 ---
'hello world'.replace('world', 'JS'); // "hello JS"（只替换第一个）
'aabbcc'.replace('b', 'X'); // "aaXbcc"
'aabbcc'.replaceAll('b', 'X'); // "aaXXcc"（ES2021，替换全部）
```
- replace 高级用法
-
```js
// 函数替换：每次匹配时调用函数，返回值作为替换内容
const result = 'hello-world-foo'.replace(/\w+/g, (match) => {
return match.charAt(0).toUpperCase() + match.slice(1);
});
// "Hello-World-Foo"
// 替换函数的参数：(match, ...groups, offset, fullString)
'2026-04-07'.replace(
/(\d{4})-(\d{2})-(\d{2})/,
(match, year, month, day) => `${day}/${month}/${year}`
);
// "07/04/2026"
// 实际场景：模板引擎
function template(str, data) {
return str.replace(/\{\{(\w+)\}\}/g, (match, key) => {
return data[key] ?? match; // 找不到就保留原文
});
}
template('Hello, {{name}}! You have {{count}} messages.', {
name: 'An',
count: 5
});
// "Hello, An! You have 5 messages."
// 驼峰转换
function camelToKebab(str) {
return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
}
camelToKebab('backgroundColor'); // "background-color"
camelToKebab('fontSize'); // "font-size"
function kebabToCamel(str) {
return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
}
kebabToCamel('background-color'); // "backgroundColor"
```
- 正则表达式基础语法
- 正则表达式用于模式匹配，由模式和标志组成。
- 创建方式
```js
// 字面量（推荐，不需要转义反斜杠）
const re1 = /hello/i;
// 构造函数（适用于动态构建正则）
const re2 = new RegExp('hello', 'i');
const keyword = 'world';
const re3 = new RegExp(keyword, 'gi'); // 动态模式
```
- 常用标志
```js
/pattern/g // g — global，匹配所有，不只第一个
/pattern/i // i — case insensitive，忽略大小写
/pattern/m // m — multiline，^ 和 $ 匹配每行的开头结尾
/pattern/s // s — dotAll，让 . 也匹配换行符
/pattern/u // u — unicode，正确处理 Unicode（如 emoji、中文）
/pattern/d // d — indices，返回匹配的位置信息（ES2022）
// 可以组合
/pattern/giu
```
- 正则核心语法
- 字符类
```js
// 普通字符：匹配自身
/hello/ // 匹配 "hello"
// 元字符
. // 任意单个字符（除换行符，除非用 s 标志）
\d // 数字 [0-9]
\D // 非数字 [^0-9]
\w // 单词字符 [a-zA-Z0-9_]
\W // 非单词字符
\s // 空白字符（空格、tab、换行等）
\S // 非空白字符
\b // 单词边界
\B // 非单词边界
// 字符集合 []
[abc] // 匹配 a、b 或 c 中的任意一个
[a-z] // a 到 z
[A-Z0-9] // 大写字母或数字
[^abc] // 不是 a、b、c（^ 在 [] 内表示取反）
// 示例
/\d{3}-\d{4}/.test('123-4567'); // true
/[aeiou]/i.test('Hello'); // true（有元音字母）
/^[a-zA-Z_]\w*$/.test('myVar_1'); // true（合法的变量名）
```
- 量词
```js
* // 0 次或多次
+ // 1 次或多次
? // 0 次或 1 次
{n} // 恰好 n 次
{n,} // 至少 n 次
{n,m} // n 到 m 次
// 示例
/colou?r/ // "color" 或 "colour"（u 出现 0 或 1 次）
/\d{3,4}/ // 3 位或 4 位数字
/ha+/ // "ha", "haa", "haaa"...
// 贪婪 vs 非贪婪
// 默认贪婪：尽可能多地匹配
'<div>hello</div>'.match(/<.+>/); // ["<div>hello</div>"]（匹配了整个）
// 加 ? 变成非贪婪（懒惰）：尽可能少地匹配
'<div>hello</div>'.match(/<.+?>/); // ["<div>"]（匹配第一个完整标签就停）
```
- 位置锚点
```js
^ // 字符串开头（m 标志下匹配行开头）
$ // 字符串结尾（m 标志下匹配行结尾）
\b // 单词边界
/^hello/.test('hello world'); // true（以 hello 开头）
/world$/.test('hello world'); // true（以 world 结尾）
/^hello$/.test('hello'); // true（整个字符串就是 hello）
// \b 单词边界
'cat concatenate'.match(/\bcat\b/g); // ["cat"]（只匹配独立的 cat）
'cat concatenate'.match(/cat/g); // ["cat", "cat"]（两个都匹配）
```
- 分组与或
```js
// 分组 ()
/(ab)+/.test('ababab'); // true（ab 重复多次）
/(foo|bar)/.test('foobar'); // true
// 或 |
/cat|dog/.test('I have a cat'); // true
/^(http|https):\/\//.test('https://example.com'); // true
// 非捕获分组 (?:) — 分组但不捕获
/(?:http|https):\/\/(\w+)/.exec('https://example.com');
// 结果中不包含 http/https 的捕获组
```
- 捕获组与反向引用
-
```js
// 编号捕获组
const dateRe = /(\d{4})-(\d{2})-(\d{2})/;
const match = dateRe.exec('2026-04-07');
console.log(match[0]); // "2026-04-07"（完整匹配）
console.log(match[1]); // "2026"（第1个捕获组）
console.log(match[2]); // "04"（第2个捕获组）
console.log(match[3]); // "07"（第3个捕获组）
// 命名捕获组（ES2018，强烈推荐）
const namedRe = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const m = namedRe.exec('2026-04-07');
console.log(m.groups.year); // "2026"
console.log(m.groups.month); // "04"
console.log(m.groups.day); // "07"
// 解构命名捕获组
const { groups: { year, month, day } } = namedRe.exec('2026-04-07');
// 在 replace 中使用捕获组
'2026-04-07'.replace(
/(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/,
'$<d>/$<m>/$<y>'
);
// "07/04/2026"
// 编号引用
'2026-04-07'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1');
// "07/04/2026"
// 反向引用：在正则内部引用前面的捕获组
// 匹配重复的单词
/\b(\w+)\s+\1\b/.test('the the'); // true（\1 引用第一个捕获组）
/\b(\w+)\s+\1\b/.test('the cat'); // false
```
- Map、Set 与迭代器
- Map — 键值映射
- Map 是 ES6 引入的键值对集合，和普通对象的核心区别在于：任何类型都可以作为键。
-
```js
const map = new Map();
// 设置键值对
map.set('name', 'An');
map.set(42, 'number key');
map.set(true, 'boolean key');
const objKey = { id: 1 };
const fnKey = () => {};
map.set(objKey, '对象作为键');
map.set(fnKey, '函数作为键');
// 获取
map.get('name'); // "An"
map.get(42); // "number key"
map.get(objKey); // "对象作为键"
map.get({ id: 1 }); // undefined！不是同一个引用
// 检查与删除
map.has('name'); // true
map.delete(42); // true（删除成功）
map.size; // 4
// 清空
map.clear();
map.size; // 0
```
- 用可迭代对象初始化：
```js
// 用二维数组初始化
const map = new Map([
['name', 'An'],
['age', 25],
['city', 'Tokyo']
]);
// 从对象转换
const obj = { a: 1, b: 2, c: 3 };
const mapFromObj = new Map(Object.entries(obj));
// 从 Map 转回对象
const backToObj = Object.fromEntries(mapFromObj);
// { a: 1, b: 2, c: 3 }
```
- Map vs 普通对象
```js
// 1. 键的类型
// 对象的键只能是 string 或 Symbol
const obj = {};
obj[1] = 'one';
obj['1'] = 'string one';
console.log(obj[1]); // "string one"（数字键被转成了字符串，覆盖了）
// Map 的键保持原始类型
const map = new Map();
map.set(1, 'number one');
map.set('1', 'string one');
map.get(1); // "number one"
map.get('1'); // "string one"（两个不同的键）
// 2. 顺序保证
// Map 始终按插入顺序遍历
// 对象的键顺序在现代引擎中也基本有序，但规范上数字键会排在前面
// 3. 性能
// Map 在频繁增删键值对时性能更好
// Map 有原生的 size 属性（O(1)），对象需要 Object.keys(obj).length
// 4. 原型污染
// 对象会继承 Object.prototype 上的属性
const plain = {};
console.log('toString' in plain); // true（原型上的）
// Map 没有这个问题
const safeMap = new Map();
safeMap.has('toString'); // false
```
- Set - 唯一值集合
-
```js
const set = new Set();
// 添加
set.add(1);
set.add(2);
set.add(3);
set.add(2); // 重复，被忽略
set.add('2'); // 字符串 "2" 和数字 2 是不同的值
console.log(set.size); // 4
// 检查与删除
set.has(2); // true
set.delete(2); // true
set.has(2); // false
// 初始化
const set2 = new Set([1, 2, 3, 2, 1]); // Set { 1, 2, 3 }
// 清空
set.clear();
```
- 可迭代协议
- JavaScript 中 for...of、展开运算符 ...、解构赋值等特性，都依赖可迭代协议。
- 一个对象如果实现了 Symbol.iterator 方法，并且该方法返回一个迭代器，这个对象就是可迭代的。
-
```js
// 内置可迭代对象
// Array, String, Map, Set, TypedArray, arguments, NodeList
// 验证是否可迭代
function isIterable(obj) {
return obj != null && typeof obj[Symbol.iterator] === 'function';
}
isIterable([1, 2, 3]); // true
isIterable('hello'); // true
isIterable(new Map()); // true
isIterable(new Set()); // true
isIterable({ a: 1 }); // false（普通对象不可迭代）
isIterable(42); // false
```
- 迭代器协议：
- 迭代器是一个对象，它有一个 next() 方法，每次调用返回 { value, done }。
-
```js
// 手动使用迭代器
const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();
iterator.next(); // { value: 10, done: false }
iterator.next(); // { value: 20, done: false }
iterator.next(); // { value: 30, done: false }
iterator.next(); // { value: undefined, done: true }
// for...of 本质就是自动调用迭代器
// 等价于：
const iter = arr[Symbol.iterator]();
let result = iter.next();
while (!result.done) {
console.log(result.value);
result = iter.next();
}
```
- 自定义可迭代对象
-
```js
// 实现一个范围对象
class Range {
constructor(start, end, step = 1) {
this.start = start;
this.end = end;
this.step = step;
}
[Symbol.iterator]() {
let current = this.start;
const end = this.end;
const step = this.step;
return {
next() {
if (current <= end) {
const value = current;
current += step;
return { value, done: false };
}
return { value: undefined, done: true };
}
};
}
}
const range = new Range(1, 5);
for (const n of range) {
console.log(n); // 1, 2, 3, 4, 5
}
// 因为实现了迭代协议，所有相关语法都自动支持
console.log([...range]); // [1, 2, 3, 4, 5]
const [a, b, c] = range; // a=1, b=2, c=3
const nums = Array.from(range); // [1, 2, 3, 4, 5]
const set = new Set(range); // Set { 1, 2, 3, 4, 5 }
// 带步长
const evens = new Range(0, 10, 2);
console.log([...evens]); // [0, 2, 4, 6, 8, 10]
```
- 生成器函数
- 生成器用 function* 声明，yield 暂停并产出值。它自动实现了迭代器协议。
-
```js
// 基本语法
function* numberGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = numberGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { value: undefined, done: true }
// 生成器自动可迭代
for (const n of numberGenerator()) {
console.log(n); // 1, 2, 3
}
console.log([...numberGenerator()]); // [1, 2, 3]
```
- 错误处理
- 错误类型
-
```js
// 1. SyntaxError — 语法错误，代码根本无法解析
// const x = ; // SyntaxError: Unexpected token ';'
// 这种错误在代码运行前就会被发现
// 2. ReferenceError — 引用了不存在的变量
// console.log(notDefined); // ReferenceError: notDefined is not defined
// 3. TypeError — 类型错误，对值进行了不支持的操作
// null.toString(); // TypeError: Cannot read properties of null
// (42)(); // TypeError: 42 is not a function
// const x = 1; x = 2; // TypeError: Assignment to constant variable
// 4. RangeError — 值超出有效范围
// new Array(-1); // RangeError: Invalid array length
// (1.5).toFixed(200); // RangeError: toFixed() digits argument must be between 0 and 100
// 5. URIError — URI 编解码错误
// decodeURIComponent('%'); // URIError: URI malformed
// 6. EvalError — eval 相关（现代 JS 中很少见）
// 所有错误都继承自 Error
const err = new TypeError('出错了');
console.log(err instanceof TypeError); // true
console.log(err instanceof Error); // true
console.log(err.message); // "出错了"
console.log(err.name); // "TypeError"
console.log(err.stack); // 完整的调用栈信息
```
- try/catch/finally
-
```js
// 基本结构
try {
// 可能出错的代码
const data = JSON.parse('invalid json');
} catch (error) {
// 出错时执行
console.log(error.message); // "Unexpected token i in JSON at position 0"
console.log(error.name); // "SyntaxError"
} finally {
// 无论是否出错都执行
console.log('清理工作');
}
// catch 可以省略参数（ES2019）
try {
JSON.parse('{}');
} catch {
// 不需要 error 对象时可以省略
console.log('解析失败');
}
// finally 即使有 return 也会执行
function example() {
try {
return '来自 try';
} finally {
console.log('finally 仍然执行');
// ⚠️ 如果 finally 里也有 return，会覆盖 try 的 return
// return '来自 finally'; // 不推荐这样做
}
}
example(); // 打印 "finally 仍然执行"，返回 "来自 try"
```
- throw 与自定义 Error
-
```js
// 基本自定义错误
class AppError extends Error {
constructor(message, code) {
super(message);
this.name = 'AppError';
this.code = code;
}
}
// 特定业务错误
class ValidationError extends AppError {
constructor(field, message) {
super(message, 'VALIDATION_ERROR');
this.name = 'ValidationError';
this.field = field;
}
}
class NotFoundError extends AppError {
constructor(resource, id) {
super(`${resource} with id ${id} not found`, 'NOT_FOUND');
this.name = 'NotFoundError';
this.resource = resource;
this.id = id;
}
}
class AuthenticationError extends AppError {
constructor(message = '未认证') {
super(message, 'UNAUTHORIZED');
this.name = 'AuthenticationError';
}
}
// 使用
function getUser(id) {
if (typeof id !== 'number') {
throw new ValidationError('id', 'ID 必须是数字');
}
const user = database.find(u => u.id === id);
if (!user) {
throw new NotFoundError('User', id);
}
return user;
}
```
- 模块化
- ES Modules — import / export
- ES Modules 是 JavaScript 的官方模块系统，每个文件就是一个模块，有自己的作用域。
- 命名导出（Named Exports）：
-
```js
// utils.js
// 声明时导出
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export class Calculator {
multiply(a, b) { return a * b; }
}
// 也可以统一导出
const subtract = (a, b) => a - b;
const divide = (a, b) => a / b;
export { subtract, divide };
```
- 命名导入
-
```js
// main.js
// 导入指定的导出
import { add, PI, Calculator } from './utils.js';
console.log(add(1, 2)); // 3
console.log(PI); // 3.14159
// 重命名导入
import { add as sum, subtract as sub } from './utils.js';
sum(1, 2); // 3
// 导入全部到一个命名空间
import * as Utils from './utils.js';
Utils.add(1, 2);
Utils.PI;
```
- 默认导出
- 每个模块只能有一个默认导出。
-
```js
// logger.js
export default class Logger {
log(msg) { console.log(`[LOG] ${msg}`); }
error(msg) { console.error(`[ERR] ${msg}`); }
}
// 也可以导出函数或值
// export default function() { ... }
// export default 42;
```
-
```js
// 导入默认导出（不需要花括号，名字可以随意取）
import Logger from './logger.js';
import MyLogger from './logger.js'; // 不同名字也行
const logger = new Logger();
logger.log('hello');
```
- 混合使用
```js
// api.js
export default class API {
constructor(baseUrl) { this.baseUrl = baseUrl; }
}
export const VERSION = '2.0';
export function createAPI(url) {
return new API(url);
}
// 同时导入默认和命名导出
import API, { VERSION, createAPI } from './api.js';
```
- 高级模块用法
- 重新导出
```js
// models/user.js
export class User { /* ... */ }
// models/post.js
export class Post { /* ... */ }
// models/comment.js
export class Comment { /* ... */ }
// models/index.js — 统一入口
export { User } from './user.js';
export { Post } from './post.js';
export { Comment } from './comment.js';
// 重新导出全部
export * from './user.js';
// 重新导出并重命名
export { User as UserModel } from './user.js';
// 重新导出默认导出
export { default as User } from './user.js';
```
- 动态导入
```js
// 按需加载
async function loadChart() {
const { Chart } = await import('./chart.js');
const chart = new Chart('#container');
chart.render(data);
}
// 条件加载
async function loadLocale(lang) {
const messages = await import(`./locales/${lang}.js`);
return messages.default;
}
// 搭配 UI 事件
button.addEventListener('click', async () => {
const { openModal } = await import('./modal.js');
openModal();
});
// 多个模块并行加载
const [moduleA, moduleB] = await Promise.all([
import('./a.js'),
import('./b.js')
]);
```
- CommonJS 对比
- CommonJS 是 Node.js 传统的模块系统，和 ES Modules 有重要区别。
-
```js
// CommonJS 语法
// 导出
module.exports = { add, subtract };
// 或
exports.add = add;
// 导入
const { add, subtract } = require('./utils');
const utils = require('./utils');
// 主要区别：
// 1. CJS 是同步加载，ESM 是异步的
// 2. CJS 的 require 可以在任何地方调用，ESM 的 import 必须在顶层
// 3. CJS 导出的是值的拷贝，ESM 导出的是活绑定
// 4. CJS 用 .js 后缀，ESM 在 Node 中用 .mjs 或在 package.json 中设 "type": "module"
// Node.js 中使用 ESM 的两种方式：
// 方式1：文件后缀用 .mjs
// 方式2：package.json 中添加 "type": "module"
```

异步编程与浏览器 API

- 异步编程与浏览器 API
- 异步基础与回调
- 同步 vs 异步
- JavaScript 是单线程语言——同一时刻只能执行一段代码
- 现实中很多操作是耗时的（网络请求、文件读写、定时器），如果同步等待，整个程序就会卡住
- 事件循环
- ![](https://an-img.oss-cn-hangzhou.aliyuncs.com/2026/04/07/20260407204918171.png,531,461)
- 宏任务与微任务
-
```js
console.log('1. 同步');
setTimeout(() => {
console.log('2. 宏任务 - setTimeout');
}, 0);
Promise.resolve().then(() => {
console.log('3. 微任务 - Promise.then');
});
queueMicrotask(() => {
console.log('4. 微任务 - queueMicrotask');
});
console.log('5. 同步');
// 输出顺序：
// 1. 同步
// 5. 同步
// 3. 微任务 - Promise.then
// 4. 微任务 - queueMicrotask
// 2. 宏任务 - setTimeout
// 解释：
// 第一轮：执行所有同步代码 → 1, 5
// 清空微任务队列 → 3, 4
// 取一个宏任务 → 2
```
- setTimeout 与 setInterval
- setTimeout — 延迟执行：
-
```js
// 基本用法
const timerId = setTimeout(() => {
console.log('3 秒后执行');
}, 3000);
// 取消定时器
clearTimeout(timerId);
// 传递参数给回调
setTimeout((name, age) => {
console.log(`${name}, ${age}`);
}, 1000, 'An', 25);
// 1 秒后打印 "An, 25"
// ⚠️ 延迟时间不是精确的
// setTimeout(fn, 100) 意思是"至少 100ms 后执行"
// 实际可能更长（调用栈忙、页面后台时浏览器会节流等）
// 最小延迟：嵌套 setTimeout 超过 5 层后，最小延迟被限制为 4ms
function nested(depth = 0) {
const start = performance.now();
setTimeout(() => {
console.log(`depth ${depth}: ${(performance.now() - start).toFixed(1)}ms`);
if (depth < 10) nested(depth + 1);
}, 0);
}
// 前几层接近 0ms，深层后会变成 4ms+
```
- 回调函数模式
- 回调是 JavaScript 最早的异步处理方式——把"完成后要做的事"作为函数传进去。
-
```js
// 最简单的回调
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'An', age: 25 };
callback(data);
}, 1000);
}
fetchData((data) => {
console.log('收到数据:', data);
});
// Node.js 风格的回调：错误优先（Error-first Callback）
function readFile(path, callback) {
setTimeout(() => {
if (path === '') {
callback(new Error('路径不能为空'), null);
} else {
callback(null, `${path} 的内容`); // 第一个参数是错误，第二个是结果
}
}, 500);
}
readFile('data.txt', (error, data) => {
if (error) {
console.error('读取失败:', error.message);
return;
}
console.log('读取成功:', data);
});
```
- Promise
- Promise 是什么
- Promise 是一个代表异步操作最终结果的对象。它解决了回调地狱的问题，让异步代码像同步一样线性书写。
- 一个 Promise 有三种状态，一旦从 pending 变为 fulfilled 或 rejected，就不可再改变：
-
```js
// pending（进行中）→ fulfilled（已成功）
// pending（进行中）→ rejected（已失败）
// 创建 Promise
const promise = new Promise((resolve, reject) => {
// 这个函数（executor）立即同步执行
console.log('executor 执行了');
// 异步操作
setTimeout(() => {
const success = true;
if (success) {
resolve('成功的数据'); // pending → fulfilled
} else {
reject(new Error('失败了')); // pending → rejected
}
}, 1000);
});
console.log('Promise 创建后');
// 输出顺序：
// "executor 执行了"（同步）
// "Promise 创建后"（同步）
// （1 秒后）promise 被 resolve
```
- then/catch/finally
- then — 处理成功和失败：
-
```js
const promise = new Promise((resolve) => {
setTimeout(() => resolve(42), 1000);
});
// then 接受两个回调：onFulfilled 和 onRejected
promise.then(
(value) => console.log('成功:', value), // 42
(error) => console.log('失败:', error)
);
// 通常只传第一个参数，用 catch 处理错误
promise
.then(value => console.log('成功:', value))
.catch(error => console.log('失败:', error));
```
- then 的返回值——链式调用的基础：
- then 始终返回一个新的 Promise。返回值决定了新 Promise 的状态：
-
```js
// 1. 返回普通值 → 新 Promise 以该值 resolve
Promise.resolve(1)
.then(v => v + 1) // 返回 2
.then(v => v * 3) // 返回 6
.then(v => console.log(v)); // 6
// 2. 返回 Promise → 新 Promise 跟随返回的 Promise
Promise.resolve(1)
.then(v => {
return new Promise(resolve => {
setTimeout(() => resolve(v + 10), 500);
});
})
.then(v => console.log(v)); // 11（等待 500ms 后）
// 3. 抛出异常 → 新 Promise 被 reject
Promise.resolve(1)
.then(v => {
throw new Error('出错了');
})
.then(v => console.log('不会执行'))
.catch(err => console.log(err.message)); // "出错了"
// 4. 不写 return → 返回 undefined
Promise.resolve(1)
.then(v => { v + 1; }) // 忘了 return！
.then(v => console.log(v)); // undefined
```
- catch 错误处理
-
```js
// catch 是 .then(null, onRejected) 的语法糖
// 它能捕获前面所有 then 中抛出的错误
Promise.resolve(1)
.then(v => {
throw new Error('then 中的错误');
})
.then(v => {
console.log('跳过'); // 不执行
})
.catch(err => {
console.log('捕获:', err.message); // "then 中的错误"
return '已恢复'; // catch 也可以返回值，让链继续
})
.then(v => {
console.log(v); // "已恢复"（链恢复了）
});
// ⚠️ then 的第二个参数 vs catch 的区别
Promise.reject(new Error('初始错误'))
.then(
v => console.log('成功'),
err => {
console.log('then 的 onRejected:', err.message);
throw new Error('新错误');
}
);
// "新错误" 无法被捕获！因为同一个 then 的 onRejected 不能捕获 onFulfilled 的错误
// ✅ 用 catch 更安全
Promise.reject(new Error('初始错误'))
.then(v => console.log('成功'))
.catch(err => console.log('catch 捕获:', err.message));
```
- finally — 无论成败都执行：
-
```js
function fetchData() {
showLoading();
return fetch('/api/data')
.then(res => res.json())
.then(data => {
displayData(data);
return data;
})
.catch(err => {
showError(err.message);
})
.finally(() => {
hideLoading(); // 无论成功失败都要隐藏 loading
});
}
// finally 的特殊行为：
// 1. 不接收参数（不知道是成功还是失败）
// 2. 默认"透传"前一步的值
Promise.resolve(42)
.finally(() => {
console.log('清理'); // 执行
return 999; // 返回值被忽略（除非抛错）
})
.then(v => console.log(v)); // 42（透传，不是 999）
// 3. 如果 finally 中抛出错误，会覆盖之前的结果
Promise.resolve(42)
.finally(() => {
throw new Error('finally 出错');
})
.catch(err => console.log(err.message)); // "finally 出错"
```
- Promise 静态方法
- Promise.resolve / Promise.reject — 快速创建：
-
```js
// 创建一个立即 resolve 的 Promise
const p1 = Promise.resolve(42);
p1.then(v => console.log(v)); // 42
// 如果传入 Promise，原样返回
const p2 = Promise.resolve(Promise.resolve('hello'));
p2.then(v => console.log(v)); // "hello"（不会嵌套）
// 如果传入 thenable（有 then 方法的对象），会展开
const thenable = {
then(resolve) {
resolve('from thenable');
}
};
Promise.resolve(thenable).then(v => console.log(v)); // "from thenable"
// 创建一个立即 reject 的 Promise
const p3 = Promise.reject(new Error('失败'));
p3.catch(err => console.log(err.message)); // "失败"
```
- Promise.all — 全部成功才成功：
-
```js
const p1 = fetch('/api/users').then(r => r.json());
const p2 = fetch('/api/posts').then(r => r.json());
const p3 = fetch('/api/comments').then(r => r.json());
// 并行执行，全部完成后返回结果数组（顺序与传入一致）
Promise.all([p1, p2, p3])
.then(([users, posts, comments]) => {
console.log(users, posts, comments);
})
.catch(err => {
// ⚠️ 任何一个失败，整个 all 就失败
// 其他 Promise 仍然会执行完，但结果被丢弃
console.error('有一个请求失败:', err);
});
// 传入空数组立即 resolve
Promise.all([]).then(v => console.log(v)); // []
// 非 Promise 值会被自动包装
Promise.all([1, 'hello', Promise.resolve(42)])
.then(v => console.log(v)); // [1, 'hello', 42]
// 实际应用：批量操作
const userIds = [1, 2, 3, 4, 5];
const users = await Promise.all(
userIds.map(id => getUser(id))
);
```
- async/await
- async 函数基础
- async/await 是 Promise 的语法糖，让异步代码看起来像同步代码一样。
-
```js
// async 函数始终返回 Promise
async function greet() {
return 'Hello'; // 自动包装为 Promise.resolve('Hello')
}
greet().then(v => console.log(v)); // "Hello"
// 等价于
function greet() {
return Promise.resolve('Hello');
}
// 即使返回普通值，也是 Promise
async function getNumber() {
return 42;
}
console.log(getNumber() instanceof Promise); // true
// 抛出的错误变成 rejected Promise
async function fail() {
throw new Error('出错了');
}
fail().catch(err => console.log(err.message)); // "出错了"
```
- await 表达式
- await 只能在 async 函数（或模块顶层）内部使用。它暂停函数执行，等待 Promise resolve，然后返回 resolve 的值。
-
```js
async function example() {
console.log('1. 开始');
// await 暂停，等 Promise resolve
const result = await new Promise(resolve => {
setTimeout(() => resolve('数据'), 1000);
});
console.log('2. 收到:', result); // 1 秒后
console.log('3. 继续');
}
example();
console.log('4. async 函数外部');
// 输出：
// 1. 开始
// 4. async 函数外部（不等待 async 函数）
// （1 秒后）
// 2. 收到: 数据
// 3. 继续
```
- await 的本质——对比 then 链：
```js
// Promise 链
function getData() {
return getUser(1)
.then(user => getOrders(user.id))
.then(orders => getOrderDetail(orders[0].id))
.then(detail => {
console.log(detail);
return detail;
});
}
// async/await（完全等价，但可读性好得多）
async function getData() {
const user = await getUser(1);
const orders = await getOrders(user.id);
const detail = await getOrderDetail(orders[0].id);
console.log(detail);
return detail;
}
// 最大的优势：中间变量全部可用
// 不需要像 Promise 链那样用嵌套或外部变量传递
```
- 错误处理
- try/catch
```js
async function fetchUserData(userId) {
try {
const user = await getUser(userId);
const orders = await getOrders(user.id);
const detail = await getOrderDetail(orders[0].id);
return { user, orders, detail };
} catch (error) {
// 任何一步的 reject 或 throw 都会被捕获
console.error('获取数据失败:', error.message);
throw error; // 重新抛出或返回兜底数据
}
}
// 精细化错误处理：每步单独 try/catch
async function fetchWithFallback(userId) {
let user;
try {
user = await getUser(userId);
} catch (error) {
console.warn('用户服务异常，使用默认数据');
user = { id: userId, name: 'Unknown' };
}
let orders;
try {
orders = await getOrders(user.id);
} catch (error) {
console.warn('订单服务异常');
orders = [];
}
return { user, orders };
}
```

JavaScript on 安橙的博客

js 复习

语言核心基础

面向对象与核心机制

异步编程与浏览器 API