CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
JavaScript 进阶/课时/集合与 JSON
RawBlame
课时目录12 节

JavaScript 进阶

  1. 01JS 进阶地图
  2. 02变量与提升
  3. 03运算符与相等
  4. 04控制流深入
  5. 05函数与 this
  6. 06异步深入
  7. 07对象与原型
  8. 08集合与 JSON
  9. 09模块系统
  10. 10内存与 GC
  11. 11调试与异常
  12. 12综合练习

集合与 JSON

Map/Set/WeakMap/WeakSet、JSON、data structures。

30 分钟

集合与 JSON

javascript-core 侧重数组;本课覆盖 Map/Set/WeakMap/WeakSet、JSON 序列化边界 与常见数据结构选型。API 层与 nodejs-essentials 大量处理 JSON;react-essentials 用 Set 去重、Map 缓存很常见。

学习目标

  • 在 Object vs Map、Array vs Set 之间正确选型
  • 理解 WeakMap/WeakSet 的弱引用与 GC 关系
  • 安全使用 JSON.parse / JSON.stringify

Map 与 Set

const bySlug = new Map([
  ['js-core', { title: 'JavaScript 核心' }],
  ['js-advanced', { title: 'JavaScript 进阶' }],
]);

bySlug.get('js-core');
bySlug.set('react', { title: 'React' });
bySlug.has('react'); // true

const tags = new Set(['frontend', 'javascript', 'frontend']);
tags.size; // 2
tags.add('nodejs');
[...tags];

Map 键可以是任意类型(含对象);Object 键只能是 string/Symbol。频繁增删键值对时 Map 性能更好。

WeakMap / WeakSet

const cache = new WeakMap();
let obj = { id: 1 };
cache.set(obj, { computed: 42 });
// obj = null 后,cache 中条目可被 GC 回收(无强引用)

Weak 集合不可遍历、无 size;适合 DOM 节点关联元数据、私有缓存,避免内存泄漏。

Object 与 Map 选型

场景推荐
固定 shape、JSON 序列化普通 Object
键非字符串、频繁增删Map
去重Set
需要 .length 有序列表Array

JSON 序列化

const lesson = {
  title: '集合',
  meta: { order: 8 },
  created: new Date(),
  fn: () => {},
};

JSON.stringify(lesson);
// {"title":"集合","meta":{"order":8},"created":"2026-..."}
// fn 被忽略;Date 变 ISO 字符串
JSON.parse('{"a":1}', (key, value) => {
  if (key === 'a') return value * 2;
  return value;
}); // { a: 2 } — reviver

安全:勿对不可信字符串直接 JSON.parse 后当代码执行;大整数可能精度丢失。

常见数据结构模式

// LRU 简易思路:Map 保持插入顺序
class LRU {
  constructor(limit = 100) {
    this.limit = limit;
    this.map = new Map();
  }
  get(key) {
    if (!this.map.has(key)) return;
    const v = this.map.get(key);
    this.map.delete(key);
    this.map.set(key, v);
    return v;
  }
  set(key, value) {
    if (this.map.has(key)) this.map.delete(key);
    this.map.set(key, value);
    if (this.map.size > this.limit) {
      const first = this.map.keys().next().value;
      this.map.delete(first);
    }
  }
}

练习

  • 用 Map 统计字符串数组中各词出现次数
  • 用 Set 对 [1,2,2,3,3,3] 去重并求并集
  • 序列化含 undefined、Date、函数的对象,观察差异

小结

Map/Set 补 Object/Array 短板;Weak 集合配合 GC;JSON 有类型与精度边界。 下一课模块系统。

加载本节练习…
← 上一课对象与原型下一课 →模块系统