2026-01-24-前端开发速查单

1
// 1. 语句
2
// 以分号 ; 结束；可多语句一行；空语句合法
3
var a = 1;
4
var b = 2; // 示例：多个语句和空语句
5

6
// 2. 表达式
7
// 计算并返回值的式子，可作为语句
8
1 + 3; // → 4
9
var x = 1 + 2; // x → 3
10

11
// 3. 变量声明（var）
12
// var 声明；可分离声明与赋值
13
var a; // 声明
14
a = 1; // 赋值
15
// 关键说明：未声明直接使用 → ReferenceError；无 var 赋值 → 创建全局变量（不推荐）
16

17
// 4. 变量提升（Hoisting）
18
// var 声明提升到作用域顶部，赋值不提升
19
console.log(a); // → undefined
20
var a = 1;
21
// 相当于 var a; console.log(a); a=1;
22

23
// 5. 重复声明
24
// var 允许重复声明，后者覆盖
25
var x = 1;
26
var x = 2; // x → 2
27
// 第二次声明无效，但带赋值则覆盖
28

29
// 6. 标识符
30
// 字母/$/_ 开头，后续可加数字；区分大小写；中文合法
31
var 临时变量 = 1;
32
var π = 3.14;
33
// 不可用保留字（如 break、function、let、this 等）
34

35
// 7. 注释
36
// 单行 //；多行 /* */；
37
// 单行注释
38
/*
39
多行注释
40
*/
41
// 仅行首生效；多行注释不可嵌套
42

43
// 8. 块级作用域
44
// var 不支持块级作用域，变量泄漏至函数/全局
45
{
46
    var a = 1;
47
}
48
console.log(a); // → 1
49
// 现代推荐使用 let/const（块级作用域）
50

51
// 9. if 语句
52
// if (条件) 语句; 或带 {}
53
var x = 3;
54
if (x === 3) x++; // x → 4
55
// 条件强制转为布尔；避免 if (x = y)（赋值而非比较）；推荐常量在前 if (3 === x)
56

57
// 10. if…else
58
// 链式 else if；else 与最近 if 配对
59
var n = 0;
60
if (n > 0) {
61
    // 正数
62
} else if (n < 0) {
63
    // 负数
64
} else {
65
    // 零
66
}
67

68
// 11. switch
69
// switch (expr) { case 值: … break; default: … }
70
var value = 1;
71
switch (value) {
72
    case 1:
73
        console.log("one");
74
        break;
75
    default:
76
        console.log("other");
77
}
78

79
// 12. 三元运算符
80
// 条件 ? expr1 : expr2
81
var n = 4;
82
var s = n % 2 === 0 ? "偶" : "奇"; // s → "偶"
83

84
// 13. while 循环
85
// while (条件) 语句;
86
var i = 0;
87
while (i < 10) i++; // i → 10
88

89
// 14. for 循环
90
// for (init; cond; update) 语句;
91
for (var i = 0; i < 5; i++) {
92
    console.log(i); // 输出 0 到 4
93
}
94

95
// 15. do…while
96
// 先执行一次，再判断
97
var i = 0;
98
do {
99
    console.log(i);
100
    i++;
101
} while (i < 3); // 输出 0 1 2
102

103
// 16. break / continue
104
// break 跳出循环/块；continue 跳过本轮
105
for (var i = 0; i < 10; i++) {
106
    if (i === 5) break; // 提前结束循环
107
    if (i % 2 === 0) continue; // 跳过偶数
108
    console.log(i);
109
}
110
// 只影响最内层循环；标签可实现跳出多层
111

112
// 17. 标签 (Label)
113
// label: 语句；配合 break/continue label
114
outer: for (var i = 0; i < 3; i++) {
115
    inner: for (var j = 0; j < 3; j++) {
116
        if (i === 1 && j === 1) break outer; // 直接跳出外层循环
117
        console.log(i, j);
118
    }
119
}
120
// 可跳出/继续指定层循环或代码块；常用于嵌套循环

1
// 1. 基本类型（Primitive Types）
2
// string, number, boolean, null, undefined, symbol, bigint
3
var str = "hello";
4
var num = 42;
5
var bool = true;
6
// 值类型，存储在栈中；不可变（赋值时创建新值）
7

8
// 2. 引用类型（Reference Types）
9
// object, array, function, date, regexp, map, set 等
10
var arr = [1, 2, 3];
11
var obj = { a: 1 };
12
var fn = function () {};
13
// 引用类型，存储在堆中；变量保存引用，可变（修改影响原对象）
14

15
// 3. typeof 操作符
16
// 判断类型，返回字符串
17
typeof "hello"; // → "string"
18
typeof 42; // → "number"
19
typeof undefined; // → "undefined"
20
// null 返回 "object"（历史遗留 bug）；数组、普通对象均返回 "object"
21

22
// 4. instanceof 操作符
23
// 判断原型链关系（是否为某构造函数的实例）
24
arr instanceof Array; // → true
25
obj instanceof Object; // → true
26
// 适用于引用类型；基本类型包装对象可用；跨 iframe/window 时可能失效
27

28
// 5. 类型转换
29
// 隐式转换常见于运算；显式使用 Number(), String(), Boolean()
30
"5" - 1; // → 4（字符串转为数字）
31
"5" + 1; // → "51"（数字转为字符串）
32
!!0; // → false（转为布尔）
33
// + 操作符优先字符串拼接；严格相等 === 不进行类型转换（推荐）
34

35
// 6. NaN
36
// Not-a-Number，属于 number 类型
37
typeof NaN; // → "number"
38
0 / 0; // → NaN
39
// NaN !== NaN（唯一不自等的值）；判断用 Number.isNaN()（ES6）或全局 isNaN()
40

41
// 7. undefined vs null
42
// undefined：变量声明未赋值或对象属性不存在；null：有意表示空值
43
var a; // → undefined
44
var b = null; // → null
45
// undefined == null 为 true（宽松相等）；=== 为 false；通常用 null 表示“无对象”
46

47
// 8. Symbol（ES6 新增）
48
// 唯一且不可变的原始值，用于创建独一无二的标识符
49
const sym1 = Symbol("id");
50
const sym2 = Symbol("id"); // sym1 !== sym2
51
// 每次调用 Symbol() 返回新值；常用于对象属性键避免命名冲突
52

53
// 9. BigInt（ES2020 新增）
54
// 支持任意精度整数
55
const big = 9007199254740991n; // 数字后加 n
56
const bigger = BigInt("9007199254740991");
57
// 不能与普通 number 直接混合运算（会抛错）；用于超大整数计算

1
// 1. 算术运算符
2
// +, -, *, /, %, ** (幂运算，ES6)
3
5 + 3; // → 8
4
5 - 3; // → 2
5
5 * 3; // → 15
6
5 / 3; // → 1.666...
7
5 % 2; // → 1（取模/余数）
8
2 ** 3; // → 8（幂运算）
9
// % 对负数结果符号随被除数；** 优先级高于一元运算符
10

11
// 2. 自增自减运算符
12
// ++, --（前置/后置）
13
let i = 0;
14
i++; // → 0（后置：返回原值后自增，i 变为 1）
15
++i; // → 2（前置：先自增后返回，i 变为 2）
16

17
// 3. 比较运算符
18
// ==, ===, !=, !==, >, <, >=, <=
19
5 == "5"; // → true（宽松相等，进行类型转换）
20
5 === "5"; // → false（严格相等，无类型转换，推荐使用）
21
5 != "5"; // → false
22
5 !== "5"; // → true
23
// === / !== 避免意外类型转换；链式比较不支持（a < b < c 可能非预期）
24

25
// 4. 逻辑运算符
26
// &&（逻辑与），||（逻辑或），!（逻辑非）
27
true && false; // → false
28
true || false; // → true
29
!true; // → false
30
// 短路求值（&& 遇假即止，|| 遇真即止）；返回第一个决定性值或最后一个值（非布尔）
31

32
// 5. 位运算符
33
// &, |, ^, ~, <<, >>, >>>
34
5 & 3; // → 1（按位与）
35
5 | 3; // → 7（按位或）
36
5 ^ 3; // → 6（按位异或）
37
~5; // → -6（按位取反）
38
5 << 1; // → 10（左移）
39
5 >> 1; // → 2（有符号右移）
40
5 >>> 1; // → 2（无符号右移）
41
// 操作 32 位整数；>>> 对负数填充 0（常用于无符号处理）
42

43
// 6. 赋值运算符
44
// =, +=, -=, *=, /=, %=, **= 等
45
let x = 5;
46
x += 3; // → 8（等价于 x = x + 3）
47
x **= 2; // → 64（等价于 x = x ** 2）
48
// 支持所有算术及位运算符的复合形式；链式赋值从右到左
49

50
// 7. 逗号运算符
51
// expr1, expr2（从左到右求值，返回最后一个）
52
let a = (1, 2, 3); // a → 3
53
for (let i = 0, len = arr.length; i < len; i++) {
54
    /* ... */
55
}
56
// 常用于 for 循环初始化多个变量；整体表达式返回最后值
57

58
// 8. 可选链运算符（?.，ES2020）
59
// 安全访问嵌套属性
60
let city = user?.address?.city; // 若 user 或 address 为 null/undefined，返回 undefined
61
// 短路求值，不抛错；可用于方法调用 obj?.method() 和数组 obj?.[index]
62

63
// 9. 空值合并运算符（??，ES2020）
64
// 返回第一个非 null/undefined 值
65
let x = null ?? "default"; // → "default"
66
let y = 0 ?? 10; // → 0（0 是有效值）
67
// 区别于 ||（|| 对所有假值生效）；仅对 null/undefined 短路
68

69
// 10. 展开运算符（...，ES6/ES2018）
70
// 展开数组/对象/可迭代对象
71
let newArr = [...arr, 4, 5]; // 数组展开
72
let newObj = { ...obj, a: 1 }; // 对象浅拷贝并覆盖属性
73
function sum(...nums) {
74
    return nums.reduce((a, b) => a + b);
75
}
76
// 数组用于复制/合并；对象用于浅拷贝；函数参数收集剩余参数

1
// 1. 函数声明（Function Declaration）
2
// function name(params) { … }
3
function add(a, b) {
4
    return a + b;
5
}
6
add(2, 3); // → 5（可在声明前调用）
7
// 函数声明会被整体提升（hoisting）；可在声明前调用；适合定义全局可用函数
8

9
// 2. 函数表达式（Function Expression）
10
// var name = function(params) { … }
11
var add = function (a, b) {
12
    return a + b;
13
};
14
add(2, 3); // → 5
15
// 不会被提升（仅变量名提升）；需在赋值后调用；末尾建议加分号；常用于匿名函数
16

17
// 3. 立即执行函数表达式（IIFE）
18
// (function(){ … })(); 或 !function(){ }(); 等模式
19
(function () {
20
    console.log("立即执行");
21
})();
22
// 创建独立作用域，避免污染全局；常用于模块化、初始化代码或私有变量封装
23

24
// 4. return 语句
25
// 返回值；无 return 返回 undefined
26
function f() {
27
    return 1; // 返回 1
28
}
29
function g() {} // 返回 undefined
30
// 可返回任意类型（包括函数、对象）；return 后代码不执行；用于显式返回值
31

32
// 5. arguments 对象
33
// 函数内部类数组对象，包含所有实参
34
function f() {
35
    console.log(arguments[0]); // 第一个参数
36
    console.log(arguments.length);
37
}
38
f(1, 2, 3); // 输出 1 和 3
39
// 类数组（有 length、可索引），非真数组；箭头函数中无 arguments；严格模式下行为更严格
40

41
// 6. 默认参数（ES6）
42
// param = defaultValue
43
function greet(name = "World") {
44
    return `Hello, ${name}!`;
45
}
46
greet(); // → "Hello, World!"
47
greet("Alice"); // → "Hello, Alice!"
48
// 调用时未传参使用默认值；默认值可为表达式（惰性求值）；位于参数列表任意位置
49

50
// 7. 剩余参数（Rest Parameters，ES6）
51
// ...params 接收剩余参数(接受多个参数用)
52
function sum(...nums) {
53
    return nums.reduce((a, b) => a + b, 0);
54
}
55
sum(1, 2, 3, 4); // → 10
56
// 必须为最后一个参数；nums 为真数组；替代 arguments 的现代方式
57

58
// 8. 参数解构（Destructuring Parameters，ES6）
59
// 函数参数直接解构对象/数组
60
function greet({ name, age = 18 }) {
61
    return `Name: ${name}, Age: ${age}`;
62
}
63
greet({ name: "Alice" }); // → "Name: Alice, Age: 18"
64
// 简化对象/数组参数提取；支持默认值和嵌套解构；提高代码可读性
65

66
// 9. 箭头函数（Arrow Functions，ES6）
67
// (params) => expr 或 (params) => { … }
68
const add = (a, b) => a + b;
69
const multiply = (a, b) => {
70
    return a * b;
71
};
72
// 语法简洁；无自己的 this、arguments、super；不能作为构造函数（无 prototype）
73

74
// 10. this 绑定方法
75
// call(), apply(), bind()
76
function greet() {
77
    console.log(`Hello, ${this.name}`);
78
}
79
const obj = { name: "Alice" };
80
greet.call(obj); // → "Hello, Alice"
81
greet.apply(obj);
82
const bound = greet.bind(obj);
83
bound(); // → "Hello, Alice"
84
// call/apply 立即执行（apply 传数组参数）；bind 返回新函数（硬绑定 this）
85

86
// 11. 高阶函数（Higher-Order Functions）
87
// 函数作为参数或返回值
88
[1, 2, 3].map((x) => x * 2); // → [2, 4, 6]
89
function createAdder(n) {
90
    return (x) => x + n;
91
}
92
const add5 = createAdder(5);
93
add5(10); // → 15
94
// 常见于数组方法（map、filter、reduce）；支持函数式编程范式
95

96
// 12. 递归（Recursion）
97
// 函数调用自身
98
function fact(n) {
99
    if (n <= 1) return 1;
100
    return n * fact(n - 1);
101
}
102
fact(5); // → 120
103
// 必须有终止条件（基线案例）；避免无限递归导致栈溢出；尾递归优化（部分引擎支持）

1
// 1. length（属性，非方法）
2
[1, 2, 3].length; // → 3
3
// 设置长度可截断或扩展（扩展部分填充 undefined）
4
let arr = [1, 2, 3];
5
arr.length = 2; // → [1,2]
6

7
// 2. push(...items) → 修改原数组，返回新长度 *
8
[1, 2, 3].push(4); // → 4（新长度），数组变为 [1,2,3,4]
9

10
// 3. unshift(...items) → 修改原数组，返回新长度 *
11
[1, 2, 3].unshift(0); // → 4（新长度），数组变为 [0,1,2,3]
12

13
// 4. pop() → 修改原数组，返回被删除的元素 *
14
[1, 2, 3].pop(); // → 3，数组变为 [1,2]
15

16
// 5. shift() → 修改原数组，返回被删除的元素 *
17
[1, 2, 3].shift(); // → 1，数组变为 [2,3]
18

19
// 6. at(index) → 安全访问索引（支持负数）
20
[1, 2, 3].at(2); // → 3
21
[1, 2, 3].at(-1); // → 3（从末尾算起）
22

23
// 7. indexOf(searchElement, fromIndex?)
24
[1, 2, 3].indexOf(3); // → 2
25
[1, 2, 3, 2].indexOf(2, 2); // → 3（从索引2开始查找）
26

27
// 8. includes(searchElement, fromIndex?)
28
[1, 2, 3].includes(3); // → true
29
[1, 2, NaN].includes(NaN); // → true（正确处理 NaN）
30

31
// 9. map(callback) → 返回新数组
32
[1, 2, 3].map((num) => Math.pow(num, 2)); // → [1,4,9]
33

34
// 10. filter(callback) → 返回新数组
35
[1, 2, 3].filter((num) => num % 2); // → [1,3]（奇数）
36

37
// 11. every(callback) → 全部满足返回 true
38
[1, 2, 3].every((num) => num > 1); // → false
39

40
// 12. some(callback) → 至少一个满足返回 true
41
[1, 2, 3].some((num) => num === 3); // → true
42

43
// 13. fill(value, start?, end?) → 修改原数组 *
44
[1, 2, 3].fill(10); // → [10,10,10]
45
[1, 2, 3, 4].fill(0, 1, 3); // → [1,0,0,4]
46

47
// 14. reduce(callback, initialValue?) → 归约成单个值
48
[1, 2, 3].reduce((acc, num) => acc + num, 0); // → 6
49

50
// 15. concat(...values) → 返回新数组（拼接）
51
[1, 2, 3].concat([4, 5]); // → [1,2,3,4,5]
52

53
// 16. reverse() → 修改原数组，反转 *
54
[1, 2, 3].reverse(); // → [3,2,1]
55

56
// 17. sort(compareFn?) → 修改原数组 *
57
[2, 1, 3].sort(); // → [1,2,3]（默认字符串排序）
58
[10, 2, 5].sort((a, b) => a - b); // → [2,5,10]（数值排序）
59

60
// 18. join(separator?) → 连接成字符串
61
[1, 2, 3].join("-"); // → "1-2-3"
62

63
// 19. flat(depth?) → 扁平化（默认 depth=1）
64
[1, 2, [3]].flat(); // → [1,2,3]
65
[1, [2, [3]]].flat(2); // → [1,2,3]
66
[1, [2, [3]]].flat(Infinity); // → [1,2,3]（完全展平）
67

68
// 20. find(callback) → 返回第一个满足条件的元素（或 undefined）
69
[1, 2, 3].find((num, i) => i === 1); // → 2
70

71
// 21. findIndex(callback) → 返回第一个满足条件的索引（或 -1）
72
[1, 2, 3].findIndex((num) => num === 2); // → 1
73

74
// 22. toString() → 转换为字符串
75
[1, 2, 3].toString(); // → "1,2,3"
76

77
// 23. slice(start?, end?) → 浅拷贝 + 截取，返回新数组
78
[1, 2, 3].slice(1, 3); // → [2,3]
79
[1, 2, 3].slice(-2); // → [2,3]
80

81
// 24. splice(start, deleteCount?, ...items) → 修改原数组，返回被删除元素数组 *
82
[1, 2, 3, 4].splice(1, 2); // → [2,3]，数组变为 [1,4]
83
[1, 4].splice(1, 0, 2, 3); // → []（无删除），数组变为 [1,2,3,4]
84

85
// 25. Array.isArray(value)（静态方法）
86
Array.isArray([1, 2, 3]); // → true
87
Array.isArray("{1,2,3}"); // → false
88

89
// 26. Array.from(arrayLike, mapFn?)（静态方法）
90
Array.from("123"); // → ['1','2','3']
91
Array.from([1, 2, 3], (x) => x * 2); // → [2,4,6]
92

93
// 27. forEach(callback) → 遍历，无返回值
94
[1, 2, 3].forEach((num) => console.log(num)); // 输出 1 2 3（逐行）
95

96
// 28. flatMap(callback) → 先 map 后 flat(1)
97
[1, 2, 3].flatMap((x) => [x, x * 2]); // → [1,2, 2,4, 3,6]

1
// 1. 创建字符串
2
// 单引号、双引号、模板字符串（反引号）
3
let str1 = "hello";
4
let str2 = "hello";
5
let name = "World";
6
let str3 = `Hello ${name}!`; // → "Hello World!"
7
// 三种方式等价；模板字符串支持 ${} 表达式插值和多行文本（保留换行）
8

9
// 2. 字符串长度
10
// str.length（只读属性）
11
"hello".length; // → 5
12
"😊".length; // → 2（UTF-16 码元计数）
13
// 返回 UTF-16 码元数量；代理对（如 emoji）计为 2；不可修改
14

15
// 3. 访问字符
16
// str[index] 或 str.charAt(index)
17
let str = "hello";
18
str[0]; // → "h"
19
str.charAt(0); // → "h"
20
str[10]; // → undefined
21
str.charAt(10); // → ""
22
// [] 越界返回 undefined；charAt 越界返回空字符串；字符串不可变
23

24
// 4. concat()
25
// 连接字符串
26
"hello".concat(" ", "world"); // → "hello world"
27
// 返回新字符串；现代更推荐 + 操作符或模板字符串
28

29
// 5. slice()
30
// 提取子串
31
"hello world".slice(1, 4); // → "ell"
32
"hello world".slice(-5); // → "world"
33
// 参数 start, end（不包含 end）；支持负数（从末尾算）；返回新字符串
34

35
// 6. substring()
36
// 提取子串
37
"hello world".substring(1, 4); // → "ell"
38
// 类似 slice；若 start > end 自动交换；不支持负数；返回新字符串
39

40
// 7. substr()（已废弃）
41
// 提取子串
42
//"hello world".substr(1, 3);       // → "ell"
43
// 参数 start, length；已废弃，不推荐使用；优先 slice/substring
44

45
// 8. indexOf()
46
// 查找子串首次出现索引
47
"hello world".indexOf("world"); // → 6
48
"hello".indexOf("x"); // → -1
49
"hello hello".indexOf("hello", 6); // → 6（从索引 6 开始）
50
// 返回首次出现位置；不存在返回 -1；区分大小写
51

52
// 9. lastIndexOf()
53
// 从末尾查找子串索引
54
"hello hello".lastIndexOf("hello"); // → 6
55
// 返回最后一次出现位置；支持从指定位置向前搜索
56

57
// 10. includes()（ES6）
58
// 判断是否包含子串
59
"hello world".includes("world"); // → true
60
"hello".includes("world", 6); // → false
61
// 返回 boolean；区分大小写；支持从指定位置开始检查
62

63
// 11. startsWith()（ES6）
64
// 判断是否以指定字符串开头
65
"hello world".startsWith("hello"); // → true
66
"hello".startsWith("lo", 3); // → true
67
// 返回 boolean；支持从指定位置开始检查
68

69
// 12. endsWith()（ES6）
70
// 判断是否以指定字符串结尾
71
"hello world".endsWith("world"); // → true
72
"hello".endsWith("lo", 5); // → true（检查前 5 个字符）
73
// 返回 boolean；第二个参数指定检查长度
74

75
// 13. trim()
76
// 去除首尾空白字符
77
"  hello world  ".trim(); // → "hello world"
78
// 返回新字符串；去除空格、制表符、换行等；不修改原字符串
79

80
// 14. trimStart() / trimEnd()（ES2019）
81
// 去除开头/结尾空白
82
"  hello  ".trimStart(); // → "hello  "
83
"  hello  ".trimEnd(); // → "  hello"
84
// 别名 trimLeft()/trimRight()；返回新字符串
85

86
// 15. toUpperCase()
87
// 转换为大写
88
"hello".toUpperCase(); // → "HELLO"
89
// 返回新字符串；有 toLocaleUpperCase() 支持本地化规则
90

91
// 16. toLowerCase()
92
// 转换为小写
93
"Hello".toLowerCase(); // → "hello"
94
// 返回新字符串；有 toLocaleLowerCase() 支持本地化规则
95

96
// 17. replace()
97
// 替换子串
98
"hello world".replace("world", "JS"); // → "hello JS"
99
// 默认只替换第一个；支持正则（如 /world/g 全局替换）
100

101
// 18. replaceAll()（ES2021）
102
// 替换所有匹配
103
"hello hello".replaceAll("hello", "hi"); // → "hi hi"
104
// 返回新字符串；等价于 replace(/hello/g, "hi")
105

106
// 19. split()
107
// 分割为数组
108
"a,b,c".split(","); // → ["a", "b", "c"]
109
"hello".split(""); // → ["h","e","l","l","o"]
110
"hello".split(); // → ["hello"]
111
// 返回数组；可指定分隔符和最大长度
112

113
// 20. repeat()（ES6）
114
// 重复字符串
115
"abc".repeat(3); // → "abcabcabc"
116
"abc".repeat(0); // → ""
117
// 参数为次数；非整数取整；负数或 Infinity 报错
118

119
// 21. padStart() / padEnd()（ES2017）
120
// 填充到指定长度
121
"5".padStart(4, "0"); // → "0005"
122
"5".padEnd(4, "0"); // → "5000"
123
// 若已达长度不填充；填充字符串可循环使用
124

125
// 22. match()
126
// 正则匹配
127
"abc123abc".match(/abc/g); // → ["abc", "abc"]
128
"abc123".match(/abc/); // → ["abc", ...详细信息]
129
// 返回数组或 null；带 g 返回所有匹配；无 g 返回捕获组等详细信息
130

131
// 23. search()
132
// 正则搜索首次匹配索引
133
"hello world".search(/world/); // → 6
134
"hello".search(/x/); // → -1
135
// 返回首次匹配索引；不支持 g 标志
136

137
// 24. charAt() / charCodeAt()
138
// 获取字符或 UTF-16 码点
139
"hello".charAt(1); // → "e"
140
"hello".charCodeAt(1); // → 101
141
// charCodeAt 支持 codePointAt() 处理大码点；charAt 越界返回 ""
142

143
// 25. String.fromCharCode()（静态方法）
144
// 从码点创建字符串
145
String.fromCharCode(65, 66); // → "AB"
146
// 处理 UTF-16 码点；推荐 fromCodePoint() 支持完整 Unicode
147

148
// 26. 模板字符串
149
// 反引号，支持插值和多行
150
let name = "World";
151
`Hello
152
${name}!`; // 多行字符串，保留格式
153
// ${} 内可执行任意表达式；常用于 HTML 模板、复杂字符串构建
154

155
// 27. String.raw()（静态方法）
156
// 原始模板字符串
157
String.raw`Hello\nWorld`; // → "Hello\\nWorld"
158
// 转义序列原样保留（如 \n 不换行）；常用于正则、路径等场景

1
// 1. 创建对象
2
// {} 或 new Object()
3
var obj = { a: 1, b: 2 };
4
var obj2 = new Object();
5
// 推荐使用字面量 {}；属性名可加引号（用于特殊字符或保留字）
6

7
// 2. 访问属性
8
// obj.key 或 obj["key"]
9
obj.name; // 点语法（适用于有效标识符）
10
obj["first-name"]; // 括号语法（支持表达式或特殊字符）
11

12
// 3. 添加/修改属性
13
// obj.key = value;
14
obj.age = 25; // 添加新属性或修改现有属性
15
obj.age = 30; // 修改
16
// 对象是可变的；直接赋值即可添加或覆盖
17

18
// 4. 删除属性
19
// delete obj.key;
20
delete obj.age; // → true（成功删除）
21
delete obj.nonexistent; // → true（不存在的属性也返回 true）
22
// 返回 boolean；删除后属性变为 undefined；不影响原型链
23

24
// 5. 对象方法
25
// 属性值为函数
26
var obj = {
27
    greet: function () {
28
        console.log("Hello");
29
    },
30
};
31
obj.greet(); // 输出 "Hello"
32
// 方法内 this 指向对象本身；推荐使用简写形式（见下文）
33

34
// 6. 遍历对象
35
// for...in, Object.keys(), Object.values(), Object.entries()
36
for (let key in obj) {
37
    console.log(key, obj[key]);
38
}
39
Object.keys(obj); // → ["a", "b"]
40
// for...in 会遍历原型链（需 hasOwnProperty 检查）；Object.keys() 只遍历自身可枚举属性
41

42
// 7. Object.keys()
43
// 返回所有自身可枚举属性名数组
44
Object.keys(obj); // → ["a", "b"]
45
// 返回字符串数组；不包含 Symbol 属性或不可枚举属性
46

47
// 8. Object.values()（ES2017）
48
// 返回所有自身可枚举属性值数组
49
Object.values(obj); // → [1, 2]
50
// 顺序与 keys 对应；不包含 Symbol 值
51

52
// 9. Object.entries()（ES2017）
53
// 返回 [key, value] 数组的数组
54
Object.entries(obj); // → [["a", 1], ["b", 2]]
55
// 常用于 Map 转换或迭代；可与 Object.fromEntries() 反转
56

57
// 10. Object.assign()（ES2015）
58
// 合并对象，浅拷贝
59
let merged = Object.assign({}, obj1, obj2);
60
// 修改第一个参数（目标对象）；相同属性后者覆盖；仅浅拷贝
61

62
// 11. 展开运算符（ES2018）
63
// {...obj} 展开对象
64
const newObj = { ...obj, a: 3 }; // 浅拷贝并覆盖 a
65
// 创建新对象；支持属性覆盖；比 Object.assign 更简洁
66

67
// 12. 对象解构（ES6）
68
// const { key } = obj;
69
const { name, age = 18 } = person; // 支持默认值
70
// 可嵌套解构；支持重命名 { old: newName }
71

72
// 13. 属性简写（ES6）
73
// key 与变量名相同时可简写
74
const name = "Tom";
75
const obj = { name }; // 等价于 { name: name }
76
// 简化对象字面量定义
77

78
// 14. 方法简写（ES6）
79
// { method() { … } }
80
const obj = {
81
    greet() {
82
        console.log("Hello");
83
    },
84
};
85
// 省略 function 关键字；this 绑定同普通方法
86

87
// 15. 计算属性名（ES6）
88
// [expr]: value
89
const key = "name";
90
const obj = { [key]: "Tom" };
91
// 属性名可用表达式计算；支持动态键名
92

93
// 16. Object.freeze()
94
// 冻结对象，不可添加/删除/修改
95
Object.freeze(obj);
96
obj.newProp = 1; // 严格模式下报错，非严格模式静默失败
97
// 浅冻结（嵌套对象仍可修改）；防止意外变更
98

99
// 17. Object.seal()
100
// 密封对象，不能添加/删除，可修改现有属性
101
Object.seal(obj);
102
obj.existing = 2; // 可修改
103
obj.new = 1; // 不可添加
104
// 现有属性仍可改值；常用于配置对象
105

106
// 18. hasOwnProperty()
107
// 检查是否为自身属性（不检查原型链）
108
obj.hasOwnProperty("name"); // → true/false
109
// 推荐现代替代 Object.hasOwn(obj, "name")（ES2022）
110

111
// 19. in 操作符
112
// 检查属性是否在对象或原型链中
113
"name" in obj; // → true（包含继承属性）
114
// 区别于 hasOwnProperty（后者只查自身）
115

116
// 20. getter/setter（访问器属性）
117
// get/set 定义计算属性
118
const obj = {
119
    _first: "John",
120
    _last: "Doe",
121
    get fullName() {
122
        return this._first + " " + this._last;
123
    },
124
    set fullName(name) {
125
        [this._first, this._last] = name.split(" ");
126
    },
127
};
128
obj.fullName; // → "John Doe"
129
obj.fullName = "Jane Smith";
130
// 不存储实际值；getter 无参数，setter 一个参数；不能与普通属性同名