JavaScript高级程序设计笔记 6

第6章 集合引用类型 — 快速复习笔记

1. Object

1.1 创建实例

• 构造函数：let obj = new Object();
• 对象字面量：let obj = {};（推荐）

1.2 访问属性

• 点语法：obj.name
• 中括号：obj["name"]（属性名含特殊字符或变量时使用）

2. Array

2.1 创建数组

• 构造函数：let arr = new Array(3);（单个数字表示长度），new Array(1,2,3)
• 数组字面量：let arr = [1,2,3];（推荐）
• Array.from()：将类数组结构（NodeList、arguments）或可迭代对象转为数组

  let arr = Array.from([1,2,3], x => x * 2); // [2,4,6]
  

• Array.of()：将参数转为数组（解决 new Array(3) 歧义）

  let arr = Array.of(3); // [3]
  

2.2 检测数组

• value instanceof Array（跨框架问题）
• Array.isArray(value)（推荐）

2.3 迭代器方法（ES6）

• keys()：返回索引迭代器
• values()：返回值迭代器
• entries()：返回 [索引, 值] 迭代器
• 配合 for-of 使用

2.4 填充与复制

• fill(value, start, end)：用 value 填充，可指定范围（修改原数组）
• copyWithin(target, start, end)：从 start 到 end 复制到 target 位置（修改原数组）

2.5 转换方法

• toString()：逗号分隔字符串
• toLocaleString()：本地化字符串
• join(separator)：指定分隔符，默认逗号

2.6 栈与队列方法

• 栈（LIFO）：push()（末尾加）、pop()（末尾删）
• 队列（FIFO）：shift()（开头删）、unshift()（开头加）

2.7 排序方法

• reverse()：反转
• sort(compareFn)：默认转为字符串排序，可传比较函数

  arr.sort((a,b) => a - b); // 升序
  

2.8 操作方法

• concat(arr2)：连接，返回新数组（不修改原数组）
• slice(start, end)：切片，返回新数组
• splice(start, deleteCount, ...items)：删除/插入/替换，返回删除元素（修改原数组）

2.9 搜索与位置方法

• 严格相等：indexOf()、lastIndexOf()、includes()
• 断言函数（ES6）：find()、findIndex()

  let arr = [1,2,3];
  arr.find(item => item > 1);     // 2
  arr.findIndex(item => item > 1); // 1
  

2.10 迭代方法（不修改原数组）

• every()：全部满足返回 true
• filter()：返回满足条件的元素组成新数组
• forEach()：遍历
• map()：映射为新数组
• some()：有一个满足返回 true

2.11 归并方法

• reduce(prev, cur, index, arr) => {}, initialValue)：从左归并
• reduceRight()：从右归并

2.12 定型数组（TypedArray）

• 目的：处理二进制数据（如 WebGL、文件操作）
• 类型：Int8Array、Uint8Array、Int16Array、Float32Array 等
• 创建：new Int8Array(10)、new Uint8Array([1,2,3])
• 不能直接使用普通数组方法，但大部分方法类似
• 与 ArrayBuffer 和 DataView 配合使用

3. Map

3.1 基本 API

• 创建：let map = new Map();
• 初始化：new Map([["key1","val1"], ["key2","val2"]])
• 方法：set(key, value)、get(key)、has(key)、delete(key)、clear()
• 属性：size

3.2 与 Object 的区别

特性	Object	Map
键类型	字符串或 Symbol	任意类型
键顺序	无序（ES6 后数值键有序）	插入顺序
size	手动计算 Object.keys().length	map.size
迭代	需要 Object.keys/values/entries	原生支持 for-of、forEach
性能	频繁增删键较差	频繁增删键性能好

3.3 迭代

• map.keys()、map.values()、map.entries()
• 直接 for-of 遍历 Map 等价于遍历 entries

4. WeakMap

4.1 特点

• 键必须是对象（不能是原始值）
• 键是弱引用：没有其他引用时会被垃圾回收，不会阻止 GC
• 不可迭代（无 keys/values/entries，无 size 属性）
• 不能清空（无 clear 方法）

4.2 方法

• set(key, value)、get(key)、has(key)、delete(key)

4.3 使用场景

• 存储私有数据（不会被 GC 阻止）
• 保存 DOM 元素相关数据（无需担心内存泄漏）
• 缓存（自动清理）

5. Set

5.1 基本 API

• 创建：let set = new Set();
• 初始化：new Set([1,2,3])
• 方法：add(value)、has(value)、delete(value)、clear()
• 属性：size
• 值唯一（使用 SameValueZero 比较）

5.2 迭代

• set.keys()（等价于 values）、set.values()、set.entries()（键值相同）
• 支持 for-of

5.3 与数组互转

• 数组转 Set：new Set(arr)
• Set 转数组：[...set] 或 Array.from(set)

5.4 去重

let unique = [...new Set([1,2,2,3])]; // [1,2,3]

6. WeakSet

6.1 特点

• 值必须是对象
• 弱引用，不阻止 GC
• 不可迭代，无 size、无 clear

6.2 方法

• add(value)、has(value)、delete(value)

6.3 使用场景

• 标记对象“已处理”或“已访问”，避免内存泄漏

7. 常见面试题速查

Array

1. 如何快速将类数组转为数组？
   → Array.from(arrayLike) 或 [...arrayLike]。

2. splice 和 slice 的区别？
   → splice 修改原数组，返回删除元素；slice 不修改，返回新数组。

3. 如何数组去重？
   → [...new Set(arr)] 或 arr.filter((v,i) => arr.indexOf(v) === i)。

4. forEach 和 map 的区别？
   → forEach 无返回值，map 返回新数组。

5. reduce 可以用来做什么？
   → 求和、求积、扁平化、对象转换等。

6. 如何浅拷贝一个数组？
   → arr.slice()、[...arr]、Array.from(arr)。

Map & Set

7. Map 和 Object 什么时候用 Map？
   → 键值对频繁增删、键为对象、需要保持插入顺序时。

8. WeakMap 为什么不可迭代？
   → 键是弱引用，随时可能被 GC 清除，无法获取所有键。

9. Set 如何判断元素相等？
   → 使用 SameValueZero 算法（与 === 类似，但 NaN 等于 NaN）。

10. 如何用 Set 实现并集、交集、差集？

    let a = new Set([1,2,3]);
    let b = new Set([2,3,4]);
    // 并集
    let union = new Set([...a, ...b]);
    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    // 差集 (a - b)
    let diff = new Set([...a].filter(x => !b.has(x)));
    

定型数组

11. 什么时候使用定型数组？
    → 处理二进制数据（如 Canvas 像素、WebGL、文件操作、音频处理）。

12. ArrayBuffer 和 TypedArray 的关系？
    → ArrayBuffer 是原始二进制数据缓冲区，TypedArray 是视图，用于读写缓冲区。