ES6+ API - AI 时代的前端工程师面试指南

ES6 这块我按”能解释为什么”来记：let 的词法环境、Map 和 Object 的取舍、?? 与 || 的边界，比报菜名有用。

Q1: let/const/var 的区别？const 的值真的不能改吗？

ES5 时代: var 的设计缺陷

var 是函数作用域，变量提升后初始化为 undefined，容易掩盖 Bug。没有块级作用域，for 循环中的变量会泄漏到外部。

致命痛点: 变量提升导致隐蔽 Bug

console.log(a); var a = 1; 不报错，输出 undefined。你在不知情的情况下使用了未初始化的变量。

ES6 引入 let/const

let 和 const 是块级作用域，有暂时性死区（TDZ），不能重复声明。声明前访问会报错，比 var 的静默失败更安全。

核心机制: V8 的双环境设计

ES6 后 V8 将执行上下文拆分为”词法环境”（存放 let/const）和”变量环境”（存放 var）。let 受控于词法环境栈的推入与弹出，完美隔绝块级作用域。

关键洞察: const 保证的是引用不变

const 只保证引用不变，不保证值不变。const obj = {}; obj.name = 'Tom' 是合法的。

let/const/var 解决的核心问题：

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

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

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

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

let/const 用块级作用域和 TDZ 解决了 var 的设计缺陷，const 只保证引用不变。

var 的半吊子提升

var 声明会被提升，并且在创建阶段就被强行初始化为 undefined。

console.log(a); // undefined（不会报错！）
var a = 10;

这种设计极易掩盖 Bug。

let/const 与 TDZ

let 和 const 同样会被提升！但在执行到声明行之前，它们处于未初始化状态（TDZ）。此时访问会直接报错。

console.log(b); // ReferenceError
let b = 20;

报错比静默失败更安全。

var 就像一份租房合同——签完合同（声明）的瞬间，房子就是你的了（初始化为 undefined），你可以随时进去住（访问），虽然里面可能还是空的。let/const 就像买期房——虽然你已经签了购房合同（提升），但在交房日（声明语句）之前，你拿不到钥匙，硬闯进去就是违法（TDZ 报错）。而 const 是产权证——房子归你了，但你只能装修（修改属性），不能把房子拆了重建（重新赋值）。

很多人以为 let 不会提升，这是错误的。let 和 const 也会提升，但不会初始化。在声明语句之前访问会进入”暂时性死区”（TDZ），抛出 ReferenceError。

Q2: 箭头函数和普通函数有什么区别？

基础梳理

维度	普通函数	箭头函数
this	调用时决定（四种绑定规则）	定义时继承外层（词法 this）
arguments	有 arguments 对象	没有，用 rest 参数代替
构造函数	可以 new	不能 new（没有 prototype）
prototype	有	没有

专家视角深度剖析

箭头函数和普通函数的核心区别是 this 的来源不同。以下是经典输出题的图解分析：

// 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 的外层是全局

V8 中箭头函数的 this 实现

箭头函数在 V8 中被编译时，其 [[ThisMode]] 被标记为 kLexical。当引擎准备为它解析 this 时，一旦发现是 kLexical，会直接跳过运行时动态绑定阶段，强行去读取闭包上下文 Context 中的 this。这就是为什么 call/apply 也无法扭转箭头函数的 this。

箭头函数不能作为构造函数

箭头函数没有 prototype 属性，也没有内部的 [[Construct]] 方法。使用 new 调用箭头函数会直接抛出 TypeError。

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

箭头函数的实际应用场景

箭头函数最适合用于回调函数中需要继承外层 this 的场景，最典型的例子是数组方法和定时器回调。

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

普通函数的 this 就像租房——谁签的合同（谁调用），房子就归谁。你把钥匙（函数引用）给别人，别人就成了新的租户。箭头函数的 this 就像自建房——从出生起就被钉死在出生地（定义时的外层作用域），无论谁来住（怎么调用），房子的位置永远不会变。所以你在对象里写了一个箭头函数，它”出生”在全局作用域，this 就永远指向全局，跟这个对象没有半毛钱关系。

Q3: 解构赋值的原理？有什么坑？

// 数组解构
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 }

Q4: Map 和 Object 的区别？什么时候用 Map？

维度	Object	Map
key 类型	只能是 String/Symbol	任意类型（对象、函数、NaN）
顺序	无序（数字 key 会排序）	有序（按插入顺序）
长度	Object.keys(obj).length	map.size
性能	频繁增删场景慢	频繁增删场景快

// 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 的内部实现原理

Map 内部使用哈希表实现（V8 中是 OrderedHashMap），同时维护一条插入顺序链，因此 size 是 O(1)，迭代严格按插入顺序。

// 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 vs Object 的选择策略

当 key 不是字符串、需要频繁增删、需要保持插入顺序时用 Map。稳定结构的属性访问用 Object 更快（V8 的 Inline Cache 优化）。

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

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

WeakMap 与 Map 的区别

WeakMap 的 key 必须是对象，且是弱引用——当 key 对象没有其他引用时会被垃圾回收，适合存储 DOM 节点关联数据。

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

Map 深度展开：内部实现与性能

Map 的内部实现原理（哈希表）： Map 内部使用哈希表实现。V8 使用 OrderedHashMap：哈希桶负责定位，另有一条插入顺序链保证迭代顺序稳定。

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

Map vs Object 详细对比（8 个维度）：

维度	Object	Map
key 类型	只能是 String/Symbol	任意类型（对象、函数、NaN、数字）
遍历顺序	数字 key 会升序排列，其他按插入顺序	严格按插入顺序
长度获取	`Object.keys(obj).length`（O(n)）	`map.size`（O(1)）
频繁增删	性能差（V8 Inline Cache 失效）	性能好（哈希表 O(1)）
原型链	有原型链属性干扰	无原型链污染
序列化	`JSON.stringify` 直接支持	不支持 JSON 序列化
迭代协议	需要 `Object.entries()`	原生可迭代（`for...of`）
内存开销	属性少时更省内存	属性多时更省内存（无 hidden class 开销）

// 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 的遍历性能优势：

// 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 的弱引用是语言层面的语义保证，不是手动引用计数。V8 的垃圾回收器（GC）使用标记-清除算法：当一个对象从 GC Root 不可达时，WeakMap 中的对应条目会在下次 GC 时被自动清除。

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

WeakMap 使用场景 1：DOM 节点关联数据

// ❌ 用 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 使用场景 2：私有变量实现

// 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 使用场景 3：缓存计算结果

// 使用 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 清除
// 不需要手动管理缓存的生命周期

Map 用哈希表实现 O(1) 增删查改，key 可以是任意类型且保持插入顺序；WeakMap 用弱引用关联对象，当 key 对象无其他引用时自动被 GC 清除，适合存储 DOM 元素关联数据和实现私有变量。

Set 深度展开：内部实现与去重机制

Set 的内部实现原理： Set 内部同样使用哈希表实现，但只存储 key，不存储 value。V8 对 Set 的优化策略与 Map 一致：少量元素用线性存储，大量元素切换到哈希表。

// 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]

Set 的去重机制（SameValueZero 算法）： Set 使用 SameValueZero 算法判断元素是否相同，与 === 几乎一致，唯一的区别是 NaN === NaN 为 false，而 Set 认为 NaN 等于 NaN。

// 基本类型去重
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 vs Array 对比：

维度	Set	Array
元素唯一性	自动去重（SameValueZero）	允许重复
查找元素	`set.has(val)` — O(1)	`arr.includes(val)` — O(n)
删除元素	`set.delete(val)` — O(1)	`arr.splice(i, 1)` — O(n)
有序性	有序（按插入顺序）	有序（按索引）
访问方式	不能通过索引访问	`arr[i]` 直接访问
适用场景	去重、集合运算、快速查找	有序数据、索引访问

// 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);
// 复杂度差距会随数据量放大

Set 的集合运算实现：

// 并集
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]

WeakSet 的使用场景

WeakSet 与 Set 的关系，等同于 WeakMap 与 Map 的关系：key 必须是对象，且是弱引用。

// 使用场景 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 清除

Q5: 可选链 (?.) 和空值合并 (??) 的区别？

可选链与空值合并都是 ES2020 引入的语法：

// 可选链：安全访问嵌套属性
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）

?? 和 || 的本质区别

?? 比 || 更精准：|| 对所有 falsy 值生效（0、”、false、null、undefined、NaN），?? 只对 null 和 undefined 生效。

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

可选链的短路特性

可选链 ?. 在遇到 null 或 undefined 时会立即短路返回 undefined，不会再执行后续的属性访问。

// 短路：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;

Q6: Symbol 有什么用？

// 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 的唯一性保证

每个 Symbol 值都是唯一的，即使描述（description）相同。Symbol.for() 是例外——它会在全局注册表中查找或创建 Symbol。

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 的应用

// 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

Q7: 数组方法的三大流派？为什么 React 里不能直接 sort？

三大流派分类

问到”你常用哪些数组方法”时，如果你只是报菜名，那只能拿 60 分。真正拉开差距的回答是：按副作用行为把数组方法分成三个流派，每个流派的适用场景和坑完全不同。

┌──────────────────────────────────────────────────────────────┐
│                  数组方法的三大流派                              │
├────────────────────┬────────────────────┬────────────────────┤
│  副作用派           │  纯函数派           │  折叠派          │
│  (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)│                    │
├────────────────────┼────────────────────┼────────────────────┤
│  直接修改原数组      │  返回新数组         │  把数组"折叠"成任意值  │
│  调用后原数组变了    │  原数组不变         │  原数组不变          │
└────────────────────┴────────────────────┴────────────────────┘

副作用派：直接修改原数组

副作用派方法会原地修改数组本身。在纯 JavaScript 脚本里没问题，但一旦进入 React/Vue 的响应式世界，就可能变成隐形炸弹。

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

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

纯函数派：返回新数组，原数组不动

纯函数派方法不会触碰原数组，而是返回一个全新的数组。这是 React/Vue 等框架最喜欢的模式——因为框架需要通过引用比较（===）来判断数据是否变化。

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 不只是求和

大部分人对 reduce 的理解停留在”求数组之和”。但 reduce 真正的威力是把数组”降维”成任意数据结构——Map、Object、嵌套树，什么都行。

// ❌ 大多数人的 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

React 和 Vue 的响应式系统都依赖引用比较来检测数据变化。如果你直接修改原数组，引用没变，框架就”看不见”变化，界面不会更新。

// ❌ 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 返回新数组，原数组不变，语义最清晰
}

Vue 3 用 Proxy 代理响应式数据，arr.sort() 和 arr.splice() 会触发 Proxy 的 set 陷阱，Vue 能检测到变化。但这不意味着你可以随意使用副作用方法——在 computed 或 watch 中直接修改响应式数组会导致无限循环或意外行为。养成用纯函数派方法的习惯，框架无关，代码更安全。

ES2023 不可变方法：toSorted、toSpliced、toReversed

ES2023 终于给数组加上了纯函数版本的变异方法，解决了困扰开发者多年的痛点：

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]，从未被修改

V8 引擎底层：数组方法的性能陷阱

unshift 的 O(n) 开销： unshift 在数组头部插入元素，V8 需要把所有现有元素往后移一位——这是连续内存的移位操作，时间复杂度 O(n)。数据量大时性能断崖式下降。

// ❌ 循环中用 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 arr[1] 的危害： 用 delete 删除数组元素会在数组中留下”空洞”（empty slot），V8 会把这种数组从高效的 Packed Elements 模式降级为低效的 Holey Elements 模式，甚至进一步降级到 Dictionary Elements（字典模式），性能断崖式下降。

// ❌ 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 本身就是哈希表，不存在"降级"问题

数组方法按副作用分为三派：副作用派（sort/splice/push）直接改原数组，纯函数派（map/filter/slice/toSorted）返回新数组，reduce 是折叠派能折叠成任意结构。React/Vue 中应优先用纯函数派；V8 底层对 Packed/Holey/Dictionary 三种数组模式有巨大的性能差异，避免 delete 和稀疏赋值。

底层源码：V8 如何处理 Generator 和 async/await

Generator 在 V8 中是怎么实现暂停和恢复的？

Generator 被 V8 编译为状态机（详见 V8 源码：src/interpreter/bytecode-generator.cc）：

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

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

语义上可以把它理解为 Generator + 自动执行器的组合：await 相当于挂起等待 Promise settle，settle 后再恢复执行。需要区分的是，这是转译层面的等价模型——Babel 会把 async 函数编译成 Generator，而 V8 原生实现走的是内部挂起/恢复内建函数，不会真的创建一个 JS Generator 对象。

十、及格回答 vs 满分回答

问题：“let/const 和 var 的区别？”

及格回答（60-70分）：

“var 是函数作用域，let/const 是块级作用域。let/const 有暂时性死区，不能重复声明。const 不能重新赋值但可以修改对象属性。”

问题出在：知道规则但不理解底层。 满分回答（90-100分）：

“区别不仅在于作用域范围（函数作用域 vs 块级作用域），更在 V8 的字节码生成机制。var 声明在编译阶段绑定到函数的 VariableProxy，生成 LdaGlobal 字节码。而 let/const 绑定到块级作用域的 Declaration Scope，生成 LdaContextSlot。^[1]”

“TDZ 的本质是 V8 在进入块级作用域时，将 let/const 变量初始化为特殊的 the_hole（空洞）值。在遇到赋值语句前访问它，V8 检测到 the_hole 即抛出 ReferenceError，这是保证代码严谨性的机制。^[2]”

“Generator 在 V8 中被编译为状态机。每次 yield 暂停时，V8 保存当前的执行状态到 Generator 对象的 context 中。next() 恢复时，从 context 中恢复状态继续执行。async/await 可等价理解为 Generator + 自动执行器：await 挂起等待 Promise settle 后恢复；Babel 正是这样转译的，V8 原生则用 resumable function 内建机制实现。^[3]“

问题：“说说你 ES6 ES7 都用了什么 API”

及格回答（60-70分）：

“我用过 let/const、箭头函数、解构赋值、Promise、async/await、Map/Set、可选链、空值合并……”

问题出在：报菜名，没有深度。 满分回答（90-100分）：

“ES6+ 的演进有三条主线。第一条是异步编程的演进——从回调地狱到 Promise 再到 async/await。Promise 解决了回调嵌套问题，async/await 让异步代码看起来像同步代码。语义上 async/await 等价于 Generator + 自动执行器，Babel 的 regenerator 就是按这个模型转译的；V8 原生用 resumable function 内建机制完成挂起与恢复。^[1]”

“第二条是数据结构的完善。ES5 时代只有 Object 和 Array，但 Object 的 key 只能是字符串，频繁增删性能差，遍历顺序不稳定。ES6 引入 Map/Set/WeakMap 解决了这些问题。Map 的 key 可以是任意类型，内部用哈希表实现，增删查通常是 O(1)（不考虑哈希冲突的极端情况）。WeakMap 的 key 是弱引用，当 key 对象没有其他引用时会被垃圾回收，适合存储 DOM 节点关联数据——用 Map 存 DOM 元素的元数据，节点移除后 Map 仍持有强引用，导致内存泄漏。^[2]”

“第三条是防御性编程糖。ES2020 引入的可选链 ?. 和空值合并 ?? 解决了深层属性访问和默认值设置的痛点。?? 比 || 更精准——|| 对所有 falsy 值生效（0、”、false），?? 只对 null 和 undefined 生效。实际项目中用户传 timeout: 0 时，用 || 会被覆盖为默认值，用 ?? 则正确保留 0。^[3]”

“实际工程中还有兼容性问题需要关注。语法层（let/const、箭头函数、解构）靠 Babel 转译，内建对象（Promise、Map/Set、Symbol）靠 Polyfill，而 Proxy/Reflect 这类元编程 API 无法 Polyfill。配置 useBuiltIns: 'usage' 可以按需引入 polyfill，只打包用到的 API。物流 PDA 设备用 Chromium 49 内核，Promise.allSettled 没被 polyfill 直接白屏——这些踩坑经验才是真正体现工程能力的地方。“

Babel + Polyfill 深度展开：ES6+ 的工程化兼容方案

ES6+ 特性的三层分类： ES6+ 的新特性在兼容性层面可以分为三类，处理方式完全不同：

┌─────────────────────────────────────────────────────────┐
│              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 的部分方法依赖底层元操作

Babel 的转换原理（AST 解析 -> 代码生成）： Babel 的工作流程分为三个阶段：解析（Parse）、转换（Transform）、生成（Generate）。

┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│   解析 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/preset-env 的作用： @babel/preset-env 是 Babel 的智能预设，它根据目标浏览器环境，自动决定需要哪些转换插件和 Polyfill。

// 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 是 JavaScript 标准库的模块化 Polyfill 集合，提供了 ES5 到最新提案中几乎所有 API 的兼容实现。

┌─────────────────────────────────────────────────────────┐
│                    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 配置详解： browserslist 是前端工具链的统一目标环境配置，被 Babel、Autoprefixer、ESLint 等工具共享。

# .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: ‘usage’ 按需引入： useBuiltIns 决定了 core-js Polyfill 的注入方式，'usage' 是最推荐的模式。

┌─────────────────────────────────────────────────────────┐
│           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

用 entry 模式时，必须在入口文件顶部手动 import 'core-js/stable'，否则 Polyfill 不会被注入。用 usage 模式则不需要手动导入，Babel 会自动扫描并注入。但 usage 模式有一个坑：它只能静态分析源码，如果通过 window.Promise 动态访问 API，可能漏掉 Polyfill。

语法层靠 Babel 转译（AST 解析 -> 代码生成），内建对象靠 core-js Polyfill，@babel/preset-env + useBuiltIns: 'usage' + .browserslistrc 三者配合实现按需兼容。Proxy 等元编程 API 无法 Polyfill，只能换方案。

常见追问

Generator 和 async/await 的关系?

答题要点： 说出 async/await 是 Generator + Promise 的语法糖。高分回答： “async/await 在语义上是 Generator + Promise 的语法糖。Generator 提供暂停/恢复能力（yield），async/await 在此基础上自动执行并处理 Promise。Babel/regenerator 的转译正是把 async 编译成 Generator：遇到 await 就 yield 一个 Promise，Promise settle 后由自动执行器调用 gen.next(value) 继续；错误通过 gen.throw(err) 注入，所以 await 的错误能被 try/catch 捕获。V8 原生实现则用 resumable function 内建机制，效果等价。”

Map 和 Object 的性能差异在哪?

答题要点： 从 V8 的 Inline Cache 角度分析。高分回答： “Object 的属性查找依赖 V8 的 Inline Cache，如果对象形状稳定（monomorphic），性能极高——直接根据缓存的内存偏移量取值，O(1) 复杂度。但如果频繁增删属性导致形状变化（polymorphic/megamorphic），Inline Cache 失效，性能会下降。Map 的内部实现是哈希表，增删操作始终是 O(1)，不受形状变化影响。所以频繁增删场景用 Map 更好，稳定结构的属性访问用 Object 更快。”

for...of 和 for...in 的区别?

答题要点： 从遍历目标和遍历内容两个维度对比。高分回答： “for...in 遍历对象的可枚举属性（包括原型链上的），key 是字符串。for...of 遍历可迭代对象（Array、Map、Set、String 等），value 是值。数组遍历推荐用 for...of，不要用 for...in——for...in 会遍历原型链上的属性，且顺序不保证。”

Object.is() 和 === 有什么区别?

答题要点： 说出两个特殊 case。高分回答： “Object.is() 比 === 更严格，有两个关键区别：

Object.is(NaN, NaN) 返回 true，而 NaN === NaN 返回 false
Object.is(+0, -0) 返回 false，而 +0 === -0 返回 true

其他情况两者行为一致。Object.is 的本质是比较两个值的 SameValue 算法，而 === 用的是 Strict Equality 算法。”

ES6 模块和 CommonJS 的区别?

答题要点： 从加载方式、值的引用关系、循环依赖处理三个维度对比。高分回答： “核心区别有三个：

加载方式：CommonJS 是运行时同步加载（require），ES6 模块是编译时静态分析（import/export）
值的关系：CommonJS 导出的是值的拷贝，ES6 模块导出的是值的引用——模块内部变量变化，导入方也能感知到
循环依赖：CommonJS 遇到循环依赖会返回已执行部分的值（可能不完整），ES6 模块因为是引用关系，能正确处理循环依赖”

Set 和数组的区别? 去重用哪个?

答题要点： 从数据结构特性和去重场景两个角度分析。高分回答： “Set 和数组的核心区别是 Set 的元素唯一（基于 SameValueZero 算法）。

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

// 对象去重——Set 帮不了，因为引用不同
const objs = [{ id: 1 }, { id: 1 }];
[...new Set(objs)]; // 两个都在，因为引用不同
// 需要用 Map 或 reduce 按 id 去重

Set 去重的时间复杂度是 O(n)，而 Array.prototype.filter + indexOf 是 O(n^2)。大数据量场景优先用 Set。”

Promise.all / Promise.race / Promise.allSettled 的区别?

答题要点： 从行为差异和适用场景两个维度对比。高分回答： “三者的区别：

Promise.all：所有 Promise 都成功才返回成功，有一个失败就立即失败（fail-fast）
Promise.race：返回第一个完成的结果（不管成功还是失败）
Promise.allSettled：等所有 Promise 都完成（不管成功还是失败），返回每个结果的状态数组

// Promise.all 的 fail-fast 特性
const p1 = Promise.resolve(1);
const p2 = Promise.reject('error');
const p3 = Promise.resolve(3);
await Promise.all([p1, p2, p3]); // 立即失败，不会等 p3

// Promise.allSettled 不会 fail-fast
await Promise.allSettled([p1, p2, p3]);
// [{status:'fulfilled',value:1}, {status:'rejected',reason:'error'}, {status:'fulfilled',value:3}]

实际项目建议：用 Promise.allSettled 替代 Promise.all + try/catch，更优雅地处理部分失败。”

如何实现一个符合 Promise A+ 规范的 Promise?

答题要点： 说出状态机、回调队列、异步调度、thenable 展平四个核心。高分回答： “手写 Promise 的关键不是背代码，而是理解四件事：

状态机：pending → fulfilled/rejected，状态只能改变一次（不可逆）
回调队列：pending 状态时把 then 的回调存起来，状态改变后批量执行
异步调度：then 的回调必须用 queueMicrotask 异步执行，防 Zalgo 现象
thenable 展平：resolvePromise 递归处理嵌套的 Promise 和 thenable 对象

V8 中 Promise.then 的回调是通过微任务队列执行的。then 方法返回一个新的 Promise，实现了链式调用。每次 then 都创建新的 Promise 实例，状态由回调函数的返回值决定。“

延伸阅读与引用参考

V8 Blog: Understanding V8’s Bytecode：V8 官方文档，解释 Ignition 解释器如何处理 let/const 的 LdaGlobal/LdaContextSlot 字节码生成、变量提升与作用域绑定机制。^[1]
Axel Rauschmayer: Variables and Shadowing (ES6)：Axel Rauschmayer 在 Exploring ES6 中对 TDZ（暂时性死区）、the_hole 值和块级作用域的权威剖析，是理解 ES6 变量声明底层机制的最佳参考。^[2]
V8 Source Code: bytecode-generator.cc：V8 字节码生成器的源码，包含箭头函数 kLexical this 模式、Generator 状态机以及 async 函数的挂起/恢复实现。^[3]
MDN Web Docs: ES6：MDN 对 ES6+ 特性的完整文档，包括 Map/Set/WeakMap、Symbol、解构赋值、可选链、空值合并等所有 API 的权威说明。
Exploring JavaScript (ES2015)：Axel Rauschmayer 的 JavaScript 系列书籍网站，覆盖 ES2015 到最新标准的全面深度解析，包括箭头函数、解构赋值、Symbol 等专题。