ES6+ API

问题：var 的函数作用域和变量提升导致隐蔽 Bug

var：提升后初始化为 undefined，没有块级作用域，容易泄漏

解决：let/const 的块级作用域 + TDZ + 不可重复声明

let/const：声明前访问报错（TDZ），块级作用域隔离变量

// this 是最关键的区别
const obj = {
  name: "Tom",
  regular: function () {
    console.log(this.name); // 'Tom'（隐式绑定：obj.regular()）
  },
  arrow: () => {
    console.log(this.name); // undefined（继承外层，外层是全局 this = window）
  },
  delayed: function () {
    setTimeout(() => {
      console.log(this.name); // 'Tom'（箭头函数继承 delayed 的 this = obj）
    }, 100);
  },
};

// 箭头函数不能被 bind/call/apply 修改 this
const fn = () => console.log(this);
fn.call({ name: "test" }); // 还是原来的 this，call 无效

const obj = {
  name: 'Tom',
  regular: function() { console.log(this.name); },
  arrow: () => { console.log(this.name); },
};

obj.regular();  →  this = obj  →  输出 'Tom'
obj.arrow();    →  this = window →  输出 undefined（易错点）

为什么 obj.arrow() 不是 'Tom'？

普通函数 regular：
┌──────────┐  .regular()  ┌──────────────┐
│   obj    │ ────────────→│ regular()    │
│ name:'Tom│              │ this = obj   │ ← 隐式绑定：谁调用指向谁
└──────────┘              │ 输出 'Tom'   │
                          └──────────────┘

箭头函数 arrow：
┌──────────┐  .arrow()    ┌──────────────┐
│   obj    │ ────────────→│ arrow()      │
│ name:'Tom│              │ this = window│ ← 箭头函数不看调用方式！
└──────────┘              │ 定义时就锁定了│   在 obj 内部定义，但 obj 不是作用域
                          │ 外层 this    │   外层是全局 → this = window
                          │ 输出 undefined│
                          └──────────────┘

关键：箭头函数的 this 在【定义时】锁定，不是调用时！
     obj 不是函数，不形成作用域，所以 arrow 的外层是全局

const Foo = () => {};
new Foo(); // TypeError: Foo is not a constructor
Foo.prototype; // undefined

class Timer {
  constructor() {
    this.seconds = 0;
    // ✅ 箭头函数继承 Timer 的 this
    setInterval(() => this.seconds++, 1000);
    // ❌ 普通函数的 this 指向 window
    // setInterval(function() { this.seconds++; }, 1000);
  }
}

// 数组解构
const [a, b, ...rest] = [1, 2, 3, 4]; // a=1, b=2, rest=[3,4]

// 对象解构
const { name, age, city = "Beijing" } = { name: "Tom", age: 25 };

// 嵌套解构
const response = { data: { user: { name: "Tom" } } };
const {
  data: {
    user: { name: userName },
  },
} = response;
// userName = 'Tom'

// 常见坑
const { a: nested } = { a: { b: 1 } };
nested.b = 2; // 原对象也被改了（解构是浅拷贝）

let x, y;
// {x, y} = {x: 1, y: 2}; // 语法错误
({ x, y } = { x: 1, y: 2 }); // 加括号

// 对象解构的默认值：只有值严格等于 undefined 时才生效
const { name = "Tom", age = 0 } = { name: undefined };
// name='Tom', age=0

// 数组解构可以跳过元素
const [a, , c] = [1, 2, 3]; // a=1, c=3

// 坑1：解构是浅拷贝，嵌套对象仍共享引用
const { a: nested } = { a: { b: 1 } };
nested.b = 2; // 原对象也被改了

// 坑2：解构未匹配到的属性是 undefined
const { x, y } = { x: 1 }; // y 是 undefined

// 最佳实践：函数参数解构配合默认值
function createUser({ name = "Tom", age = 18 } = {}) {
  return { name, age };
}
createUser(); // { name: 'Tom', age: 18 }

// Map 的 key 可以是对象
const map = new Map();
const key = { id: 1 };
map.set(key, "value");
map.get(key); // 'value'

// Object 做不到
const obj = {};
obj[{ id: 1 }]; // undefined（key 被转成字符串 '[object Object]'）

// Map 的遍历顺序与插入顺序一致
const map = new Map();
map.set("c", 3);
map.set("a", 1);
map.set("b", 2);
[...map.keys()]; // ['c', 'a', 'b'] — 保持插入顺序

// Object 的数字 key 会被排序
const obj = { 3: "c", 1: "a", 2: "b" };
Object.keys(obj); // ['1', '2', '3'] — 数字 key 被排序

// ✅ 用 Map 的场景：频繁增删、非字符串 key
const cache = new Map();
cache.set(domNode, metadata); // DOM 节点作为 key

// ✅ 用 Object 的场景：稳定的属性结构
const config = { host: "localhost", port: 3000 };
// V8 的 Inline Cache 对稳定形状的 Object 极其优化

const wm = new WeakMap();
let obj = { name: "Tom" };
wm.set(obj, "metadata");
obj = null; // obj 被 GC，WeakMap 中的条目也会被清除

┌──────────────────────────────────────────────┐
│              Map 内部存储结构                   │
├──────────────────────────────────────────────┤
│  key 数量少或多都走同一套哈希表                     │
│  哈希桶定位 + 桶内链表/开放寻址匹配 key              │
│  另有插入顺序链，保证迭代顺序稳定                    │
├──────────────────────────────────────────────┤
│  set(key, val)                               │
│    → 计算 key 的哈希值                        │
│    → 定位桶（bucket）                         │
│    → 桶内链表/开放寻址 存储 key-value 对       │
│                                              │
│  get(key)                                    │
│    → 计算 key 的哈希值                        │
│    → 定位桶 → 遍历桶内元素匹配 key            │
│    → 返回 value                              │
└──────────────────────────────────────────────┘

// Map 的 key 可以是任意类型
const map = new Map();
const fnKey = () => {};
const objKey = { id: 1 };
map.set(fnKey, "function value");
map.set(objKey, "object value");
map.set(NaN, "NaN works too");

// Object 的数字 key 会排序
const obj = { 3: "c", 1: "a", 2: "b" };
Object.keys(obj); // ['1', '2', '3'] — 数字 key 被排序

// Map 严格保持插入顺序
const map2 = new Map();
map2.set("3", "c");
map2.set("1", "a");
map2.set("2", "b");
[...map2.keys()]; // ['3', '1', '2'] — 保持插入顺序

// Map 的遍历是 O(n)，且没有原型链干扰
const map = new Map();
map.set("a", 1);
map.set("b", 2);

// 直接遍历
for (const [key, value] of map) {
  console.log(key, value); // 只遍历自身的 key-value
}

// Object 需要 Object.keys/entries 过滤原型链
const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  // 只遍历自身可枚举属性，但需要额外方法调用
}

// 频繁增删场景：Map 通常更稳
// 测试：10000 次 set + get + delete 操作

// Map：哈希表 O(1) 操作，不受对象形状变化影响
const map = new Map();
for (let i = 0; i < 10000; i++) {
  map.set(i, i);
  map.get(i);
  map.delete(i);
}

// Object：频繁增删会让 V8 的 Hidden Class / Inline Cache 失效
const obj = {};
for (let i = 0; i < 10000; i++) {
  obj[i] = i;
  const _ = obj[i];
  delete obj[i];
}

┌─────────────────────────────────────────────────┐
│           WeakMap 弱引用机制                      │
├─────────────────────────────────────────────────┤
│  WeakMap.set(keyObj, value)                     │
│    → WeakMap 对 keyObj 是「弱引用」              │
│    → 不会阻止 keyObj 被 GC 回收                  │
│                                                 │
│  当 keyObj 从 GC Root 不可达时：                  │
│    → GC 标记阶段发现 keyObj 无强引用              │
│    → GC 清除阶段回收 keyObj                       │
│    → WeakMap 中的条目自动消失                     │
│                                                 │
│  为什么 WeakMap 不能被遍历？                      │
│    → 遍历需要枚举所有 key                         │
│    → 但 key 可能在任何时刻被 GC 回收              │
│    → 遍历结果不确定，违反语言规范                  │
└─────────────────────────────────────────────────┘

// ❌ 用 Map 存储 DOM 元素的元数据 → 内存泄漏
const metadataMap = new Map();

function bindData(element, data) {
  metadataMap.set(element, data);
}

// 当 element 从 DOM 移除后，metadataMap 仍持有强引用
// element 无法被 GC，导致内存泄漏
document.removeChild(element);
// metadataMap.get(element) 仍然存在！

// ✅ 用 WeakMap → 自动清理
const metadataWeakMap = new WeakMap();

function bindData(element, data) {
  metadataWeakMap.set(element, data);
}

// 当 element 从 DOM 移除且无其他引用时
// WeakMap 中的条目自动被 GC 清除，无内存泄漏

// WeakMap 实现真正的私有变量（ES2022 之前的标准方案）
const _private = new WeakMap();

class Counter {
  constructor() {
    _private.set(this, { count: 0 });
  }

  increment() {
    const priv = _private.get(this);
    priv.count++;
  }

  getCount() {
    return _private.get(this).count;
  }
}

const counter = new Counter();
counter.increment();
counter.getCount(); // 1
// 外部无法直接访问 _private 中的数据
// 且当 counter 实例被 GC 后，_private 中的条目也会被清除

// 使用 WeakMap 缓存对象的计算结果
// 当对象不再需要时，缓存自动释放
const cache = new WeakMap();

function heavyComputation(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = expensiveCalculation(obj);
  cache.set(obj, result);
  return result;
}

// 当 obj 不再被引用时，缓存条目自动被 GC 清除
// 不需要手动管理缓存的生命周期

// Set 的本质是一个只有 key 的 Map
// 内部结构：每个元素既是 key 又是 value
const set = new Set();
set.add(1);
set.add(2);
set.add(1); // 重复元素，自动忽略

console.log(set.size); // 2
console.log([...set]); // [1, 2]

// 基本类型去重
const set1 = new Set([1, 2, 2, 3, 3]);
[...set1]; // [1, 2, 3]

// NaN 去重（SameValueZero 的特殊之处）
const set2 = new Set([NaN, NaN, NaN]);
[...set2]; // [NaN] — 只保留一个 NaN

// 对象引用去重（引用不同就是不同元素）
const set3 = new Set();
set3.add({ id: 1 });
set3.add({ id: 1 });
set3.size; // 2 — 引用不同，无法去重

// 如果需要按内容去重对象，需要借助 Map
const seen = new Map();
const items = [{ id: 1 }, { id: 1 }, { id: 2 }];
const unique = items.filter((item) => {
  const key = item.id;
  if (seen.has(key)) return false;
  seen.set(key, true);
  return true;
});
// unique: [{ id: 1 }, { id: 2 }]

// Set 的去重性能优势
const largeArray = Array.from({ length: 100000 }, () =>
  Math.floor(Math.random() * 1000),
);

// Set 去重：O(n)
const unique1 = [...new Set(largeArray)];

// filter + indexOf 去重：O(n²)
const unique2 = largeArray.filter((v, i, arr) => arr.indexOf(v) === i);
// 复杂度差距会随数据量放大

// 并集
const union = (a, b) => new Set([...a, ...b]);

// 交集
const intersect = (a, b) => new Set([...a].filter((x) => b.has(x)));

// 差集
const difference = (a, b) => new Set([...a].filter((x) => !b.has(x)));

// 使用示例
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

[...union(setA, setB)]; // [1, 2, 3, 4, 5, 6]
[...intersect(setA, setB)]; // [3, 4]
[...difference(setA, setB)]; // [1, 2]

// 使用场景 1：标记已处理的对象
const visited = new WeakSet();

function processNode(node) {
  if (visited.has(node)) return; // 防止循环引用
  visited.add(node);
  // 处理 node...
  node.children.forEach((child) => processNode(child));
}

// 使用场景 2：防止对象被重复添加到 DOM
const attachedElements = new WeakSet();

function attachOnce(element, parent) {
  if (attachedElements.has(element)) {
    console.warn("Element already attached");
    return;
  }
  attachedElements.add(element);
  parent.appendChild(element);
}

// 当 element 从 DOM 移除且无其他引用时
// WeakSet 中的标记自动被 GC 清除

// 可选链：安全访问嵌套属性
const city = user?.address?.city; // 如果 address 是 undefined，返回 undefined

// 空值合并：只对 null 和 undefined 生效
const a = null ?? "default"; // 'default'
const b = 0 ?? "default"; // 0（0 不是 null/undefined）
const c = 0 || "default"; // 'default'（0 是 falsy）

// 实际场景：用户配置合并
const config = {
  timeout: userConfig.timeout ?? 5000, // 用户传 0 时保留 0
  // ❌ 用 || 的话：userConfig.timeout || 5000，传 0 会被覆盖为 5000
};

// 短路：callback 不会被调用
const result = null?.callback();
// 等价于：null == null ? undefined : null.callback()

// ✅ 可选链用于安全访问深层属性
const city = user?.address?.city;

// ❌ 不要过度使用可选链——可能掩盖数据结构问题
const value = a?.b?.c?.d?.e; // 如果结构这么深，说明设计有问题

// ✅ 空值合并用于设置默认值
const timeout = config.timeout ?? 3000;

// Symbol：唯一的值，常用于对象的唯一 key
const id = Symbol("id");
const obj = { [id]: 123, name: "Tom" };
Object.keys(obj); // ['name']（Symbol key 不会被 for...in 遍历到）

// 内置 Symbol
const obj2 = {
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return 42;
    if (hint === "string") return "hello";
    return true;
  },
};
+obj2; // 42
`${obj2}`; // 'hello'

Symbol("id") === Symbol("id"); // false — 每次创建都是新的
Symbol.for("id") === Symbol.for("id"); // true — 全局注册表

// 查看全局注册表中的 Symbol
Symbol.keyFor(Symbol.for("id")); // 'id'
Symbol.keyFor(Symbol("id")); // undefined（不在全局注册表中）

// Symbol.iterator：定义对象的迭代行为
const range = {
  from: 1,
  to: 5,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        return current <= last
          ? { value: current++, done: false }
          : { done: true };
      },
    };
  },
};
[...range]; // [1, 2, 3, 4, 5]

// Symbol.hasInstance：自定义 instanceof 行为
class Even {
  static [Symbol.hasInstance](num) {
    return typeof num === "number" && num % 2 === 0;
  }
}
2 instanceof Even; // true
3 instanceof Even; // false

┌──────────────────────────────────────────────────────────────┐
│                  数组方法的三大流派                              │
├────────────────────┬────────────────────┬────────────────────┤
│  副作用派           │  纯函数派           │  折叠派          │
│  (Mutating)        │  (Non-Mutating)    │  (Reduce)          │
├────────────────────┼────────────────────┼────────────────────┤
│  push / pop        │  map / filter      │  reduce             │
│  splice            │  slice / concat    │  reduceRight         │
│  sort / reverse     │  flat / flatMap    │                    │
│  shift / unshift    │  toSorted (ES2023) │                    │
│  fill / copyWithin  │  toSpliced (ES2023)│                    │
├────────────────────┼────────────────────┼────────────────────┤
│  直接修改原数组      │  返回新数组         │  把数组"折叠"成任意值  │
│  调用后原数组变了    │  原数组不变         │  原数组不变          │
└────────────────────┴────────────────────┴────────────────────┘

const arr = [3, 1, 2];

// 副作用派：原地修改
arr.sort(); // arr 变成 [1, 2, 3]，原数组被改了
arr.push(4); // arr 变成 [1, 2, 3, 4]
arr.splice(1, 1); // arr 变成 [1, 3, 4]，删除了索引 1

// 你以为只是"查看"了一下，其实原数组已经面目全非

const arr = [3, 1, 2];

// 纯函数派：返回新数组
const sorted = arr.toSorted(); // [1, 2, 3]，arr 仍是 [3, 1, 2]
const sliced = arr.slice(1); // [1, 2]，arr 不变
const filtered = arr.filter((n) => n > 1); // [3, 2]，arr 不变
const mapped = arr.map((n) => n * 2); // [6, 2, 4]，arr 不变

// ❌ 大多数人的 reduce 用法：求和
const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0);
// 10 — 这只是 reduce 最初级的用法

// ✅ 真正有用的：把数组降维成 Map 字典，O(n) → O(1) 查找
const users = [
  { id: 1, name: "Alice", dept: "engineering" },
  { id: 2, name: "Bob", dept: "design" },
  { id: 3, name: "Charlie", dept: "engineering" },
];

// 把 O(n) 的数组查找变成 O(1) 的 Map 查找
const userMap = users.reduce((map, user) => {
  map.set(user.id, user);
  return map;
}, new Map());

userMap.get(2); // { id: 2, name: 'Bob', dept: 'design' } — O(1)
// 如果用 users.find(u => u.id === 2)，每次都是 O(n)

// 场景：管理后台有一个 5000 人的员工列表
// 需要根据部门分组展示

// ❌ 每次渲染都 filter — O(n) × 部门数
const engineeringUsers = users.filter((u) => u.dept === "engineering");
const designUsers = users.filter((u) => u.dept === "design");
// ... 每个部门遍历一次，10 个部门就是 50000 次比较

// ✅ 用 reduce 一次性分组 — 只遍历一次 O(n)
const grouped = users.reduce((groups, user) => {
  const dept = user.dept;
  if (!groups.has(dept)) {
    groups.set(dept, []);
  }
  groups.get(dept).push(user);
  return groups;
}, new Map());

grouped.get("engineering"); // [{ id: 1, name: 'Alice', ... }, ...]
grouped.get("design"); // [{ id: 2, name: 'Bob', ... }]
// 5000 条数据只遍历一次，避免按部门重复扫描

// ❌ React 中直接 sort 原数组 — 界面不更新
const [users, setUsers] = useState(initialUsers);

function handleSort() {
  users.sort((a, b) => a.name.localeCompare(b.name));
  setUsers(users); // users 的引用没变！React 认为数据没变化，不重渲染
}

// ❌ 用展开运算符创建新数组再 sort — 可以工作但有隐患
function handleSort() {
  const sorted = [...users].sort((a, b) => a.name.localeCompare(b.name));
  setUsers(sorted); // 引用变了，React 会重渲染
  // 但 [...users] 只是浅拷贝，嵌套对象仍是同一个引用
}

// ✅ 最干净的写法：ES2023 不可变方法
function handleSort() {
  setUsers(users.toSorted((a, b) => a.name.localeCompare(b.name)));
  // toSorted 返回新数组，原数组不变，语义最清晰
}

const original = [3, 1, 4, 1, 5, 9];

// ES2023 之前：需要先拷贝再操作
const sorted1 = [...original].sort((a, b) => a - b);
const reversed1 = [...original].reverse();
const spliced1 = [...original].splice(1, 2);

// ES2023：直接调用纯函数版本
const sorted2 = original.toSorted((a, b) => a - b); // [1, 1, 3, 4, 5, 9]
const reversed2 = original.toReversed(); // [9, 5, 1, 4, 1, 3]
const spliced2 = original.toSpliced(1, 2); // [3, 1, 5, 9]

// original 始终是 [3, 1, 4, 1, 5, 9]，从未被修改

// ❌ 循环中用 unshift — O(n²)
const result = [];
for (let i = 0; i < 10000; i++) {
  result.unshift(i); // 每次都移位所有已有元素
}
// 10000 次移位，总操作次数 = 1+2+3+...+10000 = O(n²)

// ✅ 先 push 再 reverse — O(n)
const result2 = [];
for (let i = 0; i < 10000; i++) {
  result2.push(i); // O(1) 尾部插入
}
result2.reverse(); // 一次性 O(n) 反转

// ❌ delete 制造空洞 — 性能灾难
const arr = [1, 2, 3, 4, 5];
delete arr[1];
console.log(arr); // [1, empty, 3, 4, 5]
console.log(arr.length); // 5（length 不变！）
console.log(arr[1]); // undefined（不是真的删除，是变成 empty）

// ❌ 空洞数组的遍历也有坑
arr.forEach((x) => console.log(x)); // 只输出 1, 3, 4, 5（跳过 empty）
arr.map((x) => x * 2); // [2, empty, 6, 8, 10]（empty 被保留）

┌──────────────────────────────────────────────────────────────┐
│              V8 数组的三种 Elements 模式                        │
├──────────────────────────────────────────────────────────────┤
│  Packed Elements（紧密模式）                                    │
│    → 连续存储，没有空洞                                         │
│    → V8 可以用连续内存块直接索引访问，性能最优                     │
│    → [1, 2, 3, 4, 5]                                         │
│                                                              │
│  Holey Elements（空洞模式）                                     │
│    → 存在 empty slot（delete 或稀疏赋值导致）                    │
│    → 每次访问需要额外检查"这个位置是不是空洞"                      │
│    → 访问性能通常低于 Packed                                    │
│    → [1, empty, 3, 4, 5]                                     │
│                                                              │
│  Dictionary Elements（字典模式）                                │
│    → 空洞太多时，V8 直接退化为哈希表存储                          │
│    → 每次访问都要算哈希，性能断崖式下降                            │
│    → 访问成本进一步高于 Holey                                   │
│    → { 0: 'a', 10000: 'b', 99999: 'c' }                      │
└──────────────────────────────────────────────────────────────┘

// ❌ 稀疏数组触发 Dictionary Elements 降级
const sparse = [];
sparse[0] = "a";
sparse[10000] = "b";
sparse[99999] = "c";
// V8 会把 sparse 从 Packed 降级到 Dictionary Elements
// 此时 arr[i] 的访问从 O(1) 直接索引变成 O(1) 哈希查找
// 但常数因子大得多，而且失去了 V8 对连续数组的各种优化

// ✅ 正确做法：用 Map 替代稀疏数组
const map = new Map();
map.set(0, "a");
map.set(10000, "b");
map.set(99999, "c");
// Map 本身就是哈希表，不存在"降级"问题

// 每次 yield 暂停时，V8 保存当前的执行状态
// （包括局部变量、程序计数器）到 Generator 对象的 context 中。
// next() 恢复时，从 context 中恢复状态继续执行。

// async/await 在语义上等价于 Generator + 自动执行器：
// Babel/regenerator 的转译就是这种形态；
// V8 原生则用 resumable function 内建机制完成挂起与恢复。

┌─────────────────────────────────────────────────────────┐
│              ES6+ 特性的三层分类                          │
├─────────────────────────────────────────────────────────┤
│  第一层：语法层（Syntax）                                 │
│    let/const、箭头函数、解构赋值、模板字符串、class        │
│    → 靠 Babel 转译（代码转换，不改变运行时）              │
│                                                         │
│  第二层：内建对象（Built-in Objects）                      │
│    Promise、Map/Set/WeakMap、Symbol、Array.includes      │
│    → 靠 Polyfill（注入缺失的 API 实现）                  │
│                                                         │
│  第三层：元编程 API（不可 Polyfill）                      │
│    Proxy、Reflect、WeakRef                              │
│    → 无法 Polyfill（依赖引擎内部机制）                    │
│    → 只能换方案或放弃兼容                                  │
└─────────────────────────────────────────────────────────┘

// 第一层：语法层 — Babel 转译
// 输入（ES6+）
const fn = () => {
  const { name, age } = getUser();
  return `Hello ${name}, age ${age}`;
};

// 输出（ES5，Babel 转译后）
var fn = function fn() {
  var _getUser = getUser();
  var name = _getUser.name;
  var age = _getUser.age;
  return "Hello " + name + ", age " + age;
};
// 只是代码层面的等价转换，不需要额外运行时

// 第二层：内建对象 — Polyfill 注入
// Promise、Map、Set、Symbol 等在旧浏览器中不存在
// Polyfill 会在全局注入这些 API 的 JavaScript 实现

// 第三层：元编程 API — 无法 Polyfill
// Proxy 依赖引擎内部的拦截机制，纯 JavaScript 无法模拟
// Reflect 的部分方法依赖底层元操作

┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│   解析 Parse  │ →  │  转换 Transform│ →  │  生成 Generate│
├──────────────┤    ├──────────────┤    ├──────────────┤
│ 源代码        │    │ AST           │    │ 新 AST       │
│   ↓           │    │   ↓           │    │   ↓           │
│ 词法分析       │    │ 插件遍历 AST   │    │ 代码生成器    │
│   ↓           │    │   ↓           │    │   ↓           │
│ Token 流      │    │ 修改/替换节点  │    │ 目标代码      │
│   ↓           │    │   ↓           │    │              │
│ 语法分析       │    │ 新 AST        │    │              │
│   ↓           │    │              │    │              │
│ AST           │    │              │    │              │
└──────────────┘    └──────────────┘    └──────────────┘

// Babel 插件的本质：接收 AST，返回新 AST
// 以箭头函数转换为例（简化版）
const plugin = {
  visitor: {
    // 访问 ArrowFunctionExpression 节点
    ArrowFunctionExpression(path) {
      const { params, body } = path.node;
      // 替换为普通函数表达式
      path.replaceWith({
        type: "FunctionExpression",
        params,
        body: {
          type: "BlockStatement",
          body: [{ type: "ReturnStatement", argument: body }],
        },
      });
    },
  },
};

// babel.config.js — preset-env 的基本配置
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        // 指定目标环境
        targets: "> 0.25%, not dead",
        // 或者指定具体浏览器
        // targets: { chrome: '58', ie: '11' }

        // 决定如何注入 Polyfill
        useBuiltIns: "usage", // 'usage' | 'entry' | false
        corejs: 3, // core-js 版本
      },
    ],
  ],
};

┌─────────────────────────────────────────────────────────┐
│                    core-js 模块结构                       │
├─────────────────────────────────────────────────────────┤
│  core-js/es      → ECMAScript 标准 API                   │
│    ├─ promise    → Promise 构造函数和方法                  │
│    ├─ map        → Map 构造函数                           │
│    ├─ set        → Set 构造函数                           │
│    ├─ symbol     → Symbol 构造函数和内置 Symbol            │
│    ├─ array      → Array.from、Array.includes 等          │
│    └─ object     → Object.assign、Object.entries 等       │
│                                                         │
│  core-js/proposals → Stage 1-3 的提案 API                │
│  core-js/stable    → 已纳入标准的 API                     │
│                                                         │
│  为什么需要 core-js？                                      │
│    → Babel 只转译语法，不处理内建对象                       │
│    → core-js 提供内建对象的 Polyfill 实现                  │
│    → 模块化设计，可以按需引入，减小打包体积                  │
└─────────────────────────────────────────────────────────┘

# .browserslistrc — 目标浏览器配置

# 常用查询语法：
# > 0.5%        — 全球市场份额 > 0.5% 的浏览器
# last 2 versions — 每个浏览器的最近 2 个版本
# not dead      — 排除官方已停止维护的浏览器
# not ie 11     — 排除 IE 11
# Chrome >= 80  — Chrome 80 及以上

# 推荐配置（现代项目）
> 0.5%
last 2 versions
not dead
not ie 11

# 保守配置（需要兼容旧设备）
> 0.2%
last 2 versions
ie >= 11

# 查看当前配置匹配了哪些浏览器：
# npx browserslist

┌─────────────────────────────────────────────────────────┐
│           useBuiltIns 三种模式对比                        │
├──────────────┬──────────────────────────────────────────┤
│  false       │ 不注入任何 Polyfill                       │
│              │ 适合：不需要兼容旧浏览器                    │
├──────────────┼──────────────────────────────────────────┤
│  'entry'     │ 在入口文件手动 import 一次                  │
│              │ 根据 targets 过滤掉不需要的 Polyfill       │
│              │ 缺点：仍会引入整个 core-js 中目标环境       │
│              │ 不支持的所有 Polyfill，体积较大             │
├──────────────┼──────────────────────────────────────────┤
│  'usage'     │ 扫描源码，只注入用到的 Polyfill             │
│              │ 优点：最小化打包体积                        │
│              │ 缺点：可能遗漏动态使用的 API                │
└──────────────┴──────────────────────────────────────────┘

// useBuiltIns: 'usage' 的工作原理示例

// 源码中使用了 Promise.allSettled 和 Array.includes
const result = await Promise.allSettled(promises);
const hasItem = arr.includes(target);

// Babel + core-js 自动注入的 Polyfill（仅这两个 API）：
// import "core-js/modules/es.promise.all-settled.js";
// import "core-js/modules/es.array.includes.js";

// 如果用 'entry' 模式，会在入口注入所有目标环境缺失的 Polyfill
// import "core-js/modules/es.promise.js";
// import "core-js/modules/es.map.js";
// import "core-js/modules/es.set.js";
// import "core-js/modules/es.symbol.js";
// ... 几百个模块，体积差距巨大

// babel.config.js — 生产级配置
module.exports = (api) => {
  const isProd = api.env("production");

  return {
    presets: [
      [
        "@babel/preset-env",
        {
          // 使用 browserslist 配置
          useBuiltIns: "usage",
          corejs: {
            version: 3,
            proposals: true, // 包含尚未正式纳入标准的提案 API
          },
          // 不转换 ES 模块语法，交给 Webpack 处理（支持 tree-shaking）
          modules: false,
          // 调试模式：查看每个目标环境需要哪些 Polyfill
          // debug: true,
        },
      ],
      [
        "@babel/preset-typescript",
        {
          // 仅做类型剥离，不做类型检查（类型检查交给 tsc）
          onlyRemoveTypeImports: true,
        },
      ],
    ],
    plugins: [
      // 生产环境移除 console.log
      isProd && "transform-remove-console",
      // 按需导入（如 antd、lodash）
      ["import", { libraryName: "antd", libraryDirectory: "es", style: true }],
    ].filter(Boolean),
  };
};

# .browserslistrc — 生产环境推荐配置
> 0.5%
last 2 versions
not dead
not ie 11