这个问题的关键在于理解：class 并不是一种新的面向对象机制，而是对 原型继承（prototype-based inheritance） 的语法封装。底层仍然是函数构造器 + 原型链。

如果把 class 当作 Java 那种基于类的模型去理解，就会产生误解。

先看一个简单例子：

class Person {
  constructor(name) {
    this.name = name;
  }

  say() {
    console.log(this.name);
  }

  static create(name) {
    return new Person(name);
  }
}

它在底层大致等价于：

function Person(name) {
  this.name = name;
}

Person.prototype.say = function () {
  console.log(this.name);
};

Person.create = function (name) {
  return new Person(name);
};

一、实例方法的实现

类中的方法：

say() {}

本质是定义在 Person.prototype 上。

并且具有几个默认特性：

• 不可枚举（enumerable: false）
• 可写（writable: true）
• 可配置（configurable: true）

这和直接给 prototype 赋值略有区别，因为手动赋值默认是可枚举的。

二、constructor 的本质

constructor 本质仍然是一个函数。

但 class 定义的构造函数有两个特殊点：

1. 不能作为普通函数调用

   Person(); // 报错
   

   必须通过 new。

2. 默认开启严格模式（strict mode）

这是和 ES5 构造函数的重要差异。

三、继承的底层实现

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

底层大致等价于：

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 继承静态方法
Object.setPrototypeOf(Student, Person);

这里有两个关键继承链：

1. 实例继承链： Student.prototype → Person.prototype

2. 构造函数继承链（静态方法继承）： Student → Person

很多人只记得 prototype 继承，忽略了构造函数本身的原型链。

四、super 的底层机制

super 并不是简单的 Parent.prototype.method.call(this)。

它依赖于一个内部机制：

[[HomeObject]]

当方法定义在 class 内部时，会隐式绑定一个 HomeObject，用于在运行时确定“当前方法属于哪个对象”，从而正确查找父类方法。

这也是为什么下面写法不能正确使用 super：

const obj = {
  method() {}
};

只有 class 或对象字面量简写方法才有 [[HomeObject]]。

五、class 的一些“语法层面增强”

虽然本质还是原型，但 class 增加了一些语义约束：

• 方法默认不可枚举
• 必须使用 new
• 自动严格模式
• 支持 static 方法
• 支持 getter / setter
• 支持私有字段（#field）

尤其是私有字段：

class A {
  #x = 1;
}

这个已经不再是纯原型模拟可以实现的，而是引擎层面的私有槽（private slot），编译到 ES5 时通常需要 WeakMap 来模拟。

六、为什么说它是“语法糖”

因为：

• 实例仍然是对象
• 继承仍然是原型链
• 方法仍然挂在 prototype 上
• 构造器本质仍然是函数

class 并没有引入新的对象模型，只是让语法更接近传统面向对象语言，同时补充了一些约束与语义增强。

七、工程理解层面

理解 class 的底层实现非常重要，因为很多问题本质都是原型链问题：

• 方法查找路径
• instanceof 判断机制
• 静态方法继承
• super 调用行为
• this 绑定

如果只停留在 class 表层语法，很难排查继承链相关问题。

这个问题的关键不在于“WeakMap 能不能断开循环引用”，而在于理解 JavaScript 的垃圾回收机制是如何判定对象是否可回收的。

在现代 JavaScript 引擎（例如 V8）中，垃圾回收采用的是“可达性分析（reachability）”，而不是简单的引用计数。也就是说，只要一个对象从根对象（全局对象、当前执行栈、闭包等）不可达，就会被回收。

因此，单纯的循环引用并不会导致内存泄漏。真正的问题在于：

某个长生命周期对象（例如全局缓存、单例、DOM 节点、事件系统）持有对短生命周期对象的强引用，导致后者始终可达，无法被回收。

WeakMap 正是用来解决这种“强引用导致无法释放”的问题。

一、普通 Map 为什么会造成问题

考虑一个典型场景：给 DOM 节点附加额外数据。

const map = new Map();

function register(node) {
  map.set(node, { some: "data" });
}

这里 Map 的 key 是 DOM 节点。问题在于：

• Map 对 key 是强引用
• 只要 map 还存在
• 即使 DOM 节点从页面中删除
• 节点对象仍然被 Map 持有
• 因此不会被垃圾回收

这并不是循环引用问题，而是“长生命周期容器”强持有对象。

二、WeakMap 的核心机制

WeakMap 的 key 是“弱引用”。

弱引用的含义是：

• 如果对象除了 WeakMap 之外没有其他强引用
• 垃圾回收器会直接回收该对象
• 并自动移除 WeakMap 中对应的键值对

const weakMap = new WeakMap();

function register(node) {
  weakMap.set(node, { some: "data" });
}

当 node 从 DOM 中移除且没有其他引用时：

• node 变为不可达
• GC 会回收 node
• weakMap 中对应条目自动消失

开发者不需要手动 delete。

三、它如何“解决循环引用”

从严格意义上讲，WeakMap 并不是用来解决对象之间的相互引用，而是解决“缓存结构导致对象无法被回收”的问题。

举一个更典型的场景：深拷贝时处理循环引用。

function clone(obj, cache = new WeakMap()) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }

  const copy = {};
  cache.set(obj, copy);

  for (let key in obj) {
    copy[key] = clone(obj[key], cache);
  }

  return copy;
}

这里 WeakMap 的作用是：

• 记录已访问对象
• 防止无限递归
• 同时避免缓存结构本身阻止对象释放

如果这里使用普通 Map，那么 cache 会强持有所有遍历过的对象，即使 clone 结束之后，这些对象仍然可能因为 cache 未释放而存活。

WeakMap 则不会影响原对象的回收。

四、为什么 WeakMap 不能被枚举

WeakMap 不提供 size、keys、forEach 等方法。

原因在于：

• 垃圾回收发生时间不可预测
• 条目可能随时消失
• 枚举会导致语义不稳定

这是一种刻意的设计选择，用来保证弱引用语义的正确性。

五、本质总结

WeakMap 解决的不是“循环引用导致的内存泄漏”，因为现代 JS 并不会因循环引用泄漏。

它解决的是：强引用缓存结构，导致对象即使逻辑上已无用，仍然在 GC 可达路径中。

WeakMap 通过弱引用 key，使得缓存不影响对象生命周期，从而避免隐藏的内存滞留问题。

从工程和运行时的角度看，“模块只初始化一次”并不是依赖某个语法技巧，而是通过模块加载模型、缓存机制以及初始化边界的设计共同保证的结果。无论是在 JavaScript 层还是在更底层的运行时实现中，核心思想都是：同一个模块标识在同一个运行时上下文中只会对应一个实例。

在 JavaScript 层，ES Module 天然具备这一特性。模块在首次被解析和实例化时会执行一次顶层代码，之后无论被多少地方 import，拿到的都是同一份模块实例和同一组导出绑定。这要求模块在设计时将“初始化逻辑”放在顶层作用域，并避免把初始化动作隐藏在可被多次调用的函数中。如果初始化依赖外部输入，应当通过显式的初始化 API 或参数化工厂来控制，而不是在模块加载阶段隐式执行，从而保证模块加载本身是幂等的。

在 CommonJS 或类似动态模块系统中，只初始化一次更多依赖运行时缓存。require 在第一次加载模块时会执行模块函数并将 exports 缓存起来，后续调用直接返回缓存结果。因此，模块需要避免在导出对象之外维护“隐式全局状态”，并确保副作用发生在模块首次执行阶段。对于可能被多次 require 的路径差异问题，还需要保证模块标识的唯一性，例如避免同一文件被不同相对路径或软链接重复加载，否则缓存将失效，初始化会被执行多次。

在运行时或 C++ 层，模块只初始化一次通常由模块记录和状态机来保证。模块在内部会有明确的生命周期状态，例如未加载、已链接、已执行。初始化逻辑只允许在“执行”阶段触发一次，后续访问只读取已有的实例或导出表。这种设计在面对循环依赖时尤为重要，运行时需要在模块尚未完全执行完成时就暴露部分导出绑定，以避免死循环或重复初始化。

从模块设计角度，还需要刻意区分“模块初始化”和“业务初始化”。模块初始化负责创建单例资源、注册全局能力或建立底层连接，而业务初始化应通过显式调用触发。这样可以避免因热更新、测试环境或多入口场景导致的重复副作用。同时，初始化过程应具备幂等性，即使被意外触发，也不会破坏系统状态。

在更复杂的场景下，例如微前端或多运行时并存，单次初始化的边界需要被重新定义。模块是否只初始化一次，取决于运行时上下文而非代码本身。此时往往需要在更高层引入全局注册表或宿主级别的单例管理，而不是仅依赖模块系统本身。

总体而言，模块只初始化一次并不是“写法问题”，而是对模块系统工作方式的理解和对副作用边界的约束。

使用 WeakMap 封装私有属性是一种经典的“闭包 + 弱引用”技巧。它的核心目的是为每个对象实例存储一份外部不可访问的私有数据，同时不引发内存泄漏。这种方式比传统的前缀 _、或者 Symbol 命名更安全，并且不需要使用 ES2022 的 #私有字段 语法，在旧环境中依然适用。

一、基本原理

• 创建一个 WeakMap 实例 privateData；
• 每个类实例作为 WeakMap 的键，对应一个私有数据对象；
• 外部无法直接访问 privateData，因为它在模块作用域内，无法被引用；
• 当对象实例被销毁时，对应的私有数据也会被自动释放。

二、示例代码：封装私有属性

const privateData = new WeakMap();

class Person {
  constructor(name, age) {
    // 初始化私有数据
    privateData.set(this, { name, age });
  }

  getName() {
    return privateData.get(this).name;
  }

  setName(newName) {
    privateData.get(this).name = newName;
  }

  getAge() {
    return privateData.get(this).age;
  }
}

使用：

const p = new Person('Alice', 30);
console.log(p.getName()); // Alice
p.setName('Bob');
console.log(p.getName()); // Bob

console.log(p.name); // undefined，外部无法访问

三、优势

1. 私有性强 外部无法通过任何方式访问 privateData，除非获得对它本身的引用。

2. 不污染实例属性 this 上没有暴露任何私有字段。

3. 内存安全 使用 WeakMap 的弱引用特性，当类实例没有外部引用时，相关私有数据会自动被 GC 回收。

四、应用场景

• 实现类中的私有状态或缓存；
• 在框架或 SDK 中构建对外不可暴露的状态；
• 实现封装性更强的库组件（如 DOM 组件内部状态管理）；
• 给第三方对象动态挂载私有数据，不影响其原型结构。

五、局限与注意事项

• 不能在类的静态方法中直接访问 privateData，因为没有 this 实例；
• 访问和修改私有属性需要显式使用 get() / set()，不如 #私有字段 语法直观；
• 仅适合类级别的封装，不适合导出后希望每个模块共享的私有数据（这反而可以用 Map）。

WeakMap 的键只能是对象，不能是基本类型（如字符串、数字、布尔值、null、undefined、Symbol）。这个设计并不是随意设定的，而是与它的核心设计目的：弱引用与垃圾回收行为密切相关。

一、WeakMap 的核心目标是弱引用

在 WeakMap 中：

• 对象作为键时，WeakMap 对该对象是弱引用（weak reference）；
• 也就是说，它不会阻止该对象被垃圾回收；
• 当对象没有任何强引用时，GC 可以随时清理它，同时 WeakMap 也会自动移除该条目。

这正是用来避免内存泄漏的核心能力。

二、为什么不能是基本类型？

原因 1：基本类型不是对象，没有内存标识可被“追踪”

基本类型是按值存储的，没有独立的“引用”或“地址”：

const str = 'hello';
const num = 123;

这些值在内存中是立即分配、不可变的，不具有“生命周期”概念，不能被垃圾回收追踪。

弱引用机制必须依赖“对象的生命周期”，否则无法判断是否该释放引用。

原因 2：弱引用语义在基本类型上没有意义

弱引用的本质是“在不打扰 GC 的前提下引用某个对象”。但基本类型的值不会参与 GC，不存在被释放的可能，也就无法“弱引用”。

例如：

const wm = new WeakMap();
wm.set('key', 123); // 报错

在这里，'key' 是字符串，不可能被 GC，“弱引用”对它没有任何效果，因此在语义上是错误的。

原因 3：安全性与一致性考虑

如果允许基本类型作为键，就必须像 Map 那样使用强引用保存它们，但这将打破 WeakMap 的设计目标：不可枚举 + 不阻止回收 + 无法观测行为。

一旦加入强引用的键，整个 WeakMap 的行为就变得不确定了，既不能观察其变化，又无法保证是否释放，设计上不再自洽。

三、类比 Map 与 WeakMap 的行为

当 Map 的键是引用类型（如对象、数组、函数）时，如果不小心管理，会导致内存泄漏，因为：

• Map 对键是强引用，只要该键存在于 Map 中，它就不会被垃圾回收；
• 即使代码中不再显式使用这个对象，只要它还在 Map 里，它的内存就无法释放。

一、问题举例

const map = new Map();

function cacheUser(user) {
  map.set(user, computeHeavyStuff(user));
}

// 某个 user 对象，即使业务中已经不再用它，但 map 中还持有它
// → user 永远不会被 GC 回收，内存常驻

这在需要缓存大量对象时尤为危险，比如响应缓存、页面数据缓存等场景中，可能在用户无感知的情况下持续增加内存占用。

二、解决方案：使用 WeakMap

1. 什么是 WeakMap

WeakMap 是专为解决上述问题设计的数据结构：

• 它的键只能是对象（引用类型）；
• 对键是弱引用，不阻止垃圾回收；
• 如果没有其他强引用指向某个键对象，它会被 GC 回收，WeakMap 也会自动清理对应的键值对。

2. 示例替换

const cache = new WeakMap();

function cacheUser(user) {
  if (!cache.has(user)) {
    cache.set(user, computeHeavyStuff(user));
  }
  return cache.get(user);
}

当外部不再引用 user，这个对象就会被回收，WeakMap 不会阻止 GC。

三、WeakMap 的使用限制

• 无法遍历（没有 .keys()、.values()、.entries()）；
• 不能清空（没有 .clear() 方法）；
• 无法观察删除（不会触发事件）；
• 键必须是对象，不能是原始值。

这些限制是设计上的权衡，为的是让它成为GC 友好的结构，不干扰垃圾回收算法。

四、何时用 WeakMap 替代 Map

适用场景：

• 键为对象；
• 不需要枚举所有键；
• 缓存、映射、私有字段存储等用途；
• 期望自动释放内存的临时结构。

不适用：

• 需要遍历所有键值；
• 键为原始值；
• 需要清空缓存的场景（可考虑封装手动过期逻辑的 Map 替代方案）。

在 ESM（ES Modules）中，export * from "a.js" 的作用是：将 a.js 中的所有命名导出（named exports）重新导出（re-export），供当前模块的使用者使用。

等价理解：

// 假设 a.js 中有：
export const foo = 'foo';
export const bar = 'bar';

// 那么在 b.js 中写：
export * from './a.js';
// 相当于重新导出了 foo 和 bar

// 使用时
import { foo, bar } from './b.js'; // 可以正常使用

注意事项：

1. 不会导出 a.js 中的默认导出（export default）。
2. 如果当前模块中已经存在相同名称的导出，会发生冲突，抛出错误。
3. 它是 重新导出，并不会在当前模块声明变量或函数。

应用场景：

• 统一出口模块（barrel 文件）：

// utils/index.js
export * from './math.js';
export * from './string.js';
export * from './date.js';

// 在其他地方可以统一引入
import { formatDate, sum } from './utils';

ES6 引入了模块化方案，即通过 import 和 export 语法来实现模块的导入和导出。与之前的 CommonJS 和 AMD 模块化方案不同，ES6 模块化具有一个 缓存机制，它会在模块第一次被加载时缓存该模块，并且在后续的导入中返回该缓存结果，而不是重新执行模块代码。这个特性对于性能优化、避免重复执行和确保模块的一致性具有重要意义。

1. ES6 模块的加载机制

当一个 ES6 模块首次被导入时，浏览器或运行环境会加载该模块并执行其代码。模块的加载和执行遵循以下步骤：

• 第一次加载：当模块第一次被导入时，模块的代码会被执行一次，导出的内容会被返回。
• 缓存模块：一旦模块执行完毕，模块的结果（即导出的内容）会被缓存。这个缓存是以模块的文件路径为键存储的，因此每个模块文件只会被执行一次。
• 后续导入：之后再次导入相同的模块时，模块不会被重新执行，而是直接返回缓存的结果。

2. 缓存机制的实现方式

ES6 模块的缓存是基于模块的 标识符（文件路径） 进行管理的。具体来说：

• 模块对象：每个模块的导出内容都会被保存在一个 模块对象 中。这个对象包含了所有导出的成员，并且会在模块第一次加载时进行计算。
• 缓存存储：当模块第一次加载时，它的导出结果会被存储在一个全局的缓存对象中（通常由 JavaScript 引擎负责管理）。在后续的导入中，模块的执行会被跳过，直接从缓存中获取结果。

3. 缓存的优势和特性

• 性能优化：由于 ES6 模块的缓存机制，模块的代码只会执行一次，这大大减少了模块重复加载和执行的性能开销。尤其是在大型应用中，多个模块间可能相互依赖，如果每次都重新执行模块的代码，效率会极低。缓存机制保证了模块的加载是高效的。

• 一致性：缓存机制确保了在整个应用中导入相同模块的多次引用是相同的，模块内部的状态也会保持一致。例如，模块内部的变量会在整个生命周期中保持不变。

4. 模块缓存的影响

• 共享状态：由于缓存是基于模块的路径和标识符的，模块的导出值会在整个应用的生命周期中保持一致。这意味着模块中的状态（例如导出的对象或函数）会被共享，其他导入该模块的地方将能够访问到同一份状态。

  例如，假设一个模块导出了一个对象，并且该对象的属性在模块中被修改：

  // counter.js
  export const counter = { value: 0 };
  export function increment() {
    counter.value += 1;
  }
  

  当模块被导入并修改 counter.value 时，其他地方导入 counter.js 时，都会看到同样修改后的值：

  import { counter, increment } from './counter.js';
  
  increment(); // counter.value === 1
  
  import { counter as counter2 } from './counter.js';
  console.log(counter2.value); // 输出 1
  

• 模块的静态性：模块一旦被导入并缓存，它的导出内容不会再变化。因此，任何导入该模块的地方都会看到相同的导出结果。如果想要动态更新模块的导出内容，就需要依赖其他方式（如重新加载模块或使用不同的状态管理策略）。

5. 与 CommonJS 和 AMD 的对比

• CommonJS：CommonJS 的模块是同步加载的，模块是按需执行的，每次 require 都会重新执行模块代码，并返回模块的导出内容。CommonJS 模块的缓存机制也有，但它与 ES6 的静态分析和执行机制不同，CommonJS 更依赖于运行时的加载和执行。

• AMD：AMD 的模块系统通常用于浏览器端，它支持异步加载，适用于动态加载模块。AMD 也会进行缓存，但其工作原理和 ES6 的静态模块导入有所不同，特别是在模块的依赖和异步加载方面。

6. 如何避免缓存的问题？

在某些情况下，可能需要避免 ES6 模块缓存机制带来的问题，尤其是当你需要模块具有不同状态时。可以通过以下几种方式来处理：

• 重新加载模块：如果需要重新加载一个模块，可以通过一些手段来强制浏览器或环境重新加载模块（如在 Webpack 中使用 HMR，或者在 Node.js 中使用 delete require.cache）。
• 动态模块加载：对于需要动态加载且不希望缓存的场景，可以使用 import() 动态导入模块，这样每次导入都会重新执行模块的代码。

迭代器分类

在 JavaScript 中，有三种类型的迭代器：

• Array Iterator（数组迭代器）：通过对数组进行迭代以访问其元素。

• String Iterator（字符串迭代器）：通过对字符串进行迭代以访问其字符。

• Map Iterator（映射迭代器）和 Set Iterator（集合迭代器）：通过对 Map 和 Set 数据结构进行迭代以访问其键和值。

此外，在 ES6 中，我们还可以使用自定义迭代器来迭代对象中的元素。我们可以使用 Symbol.iterator 方法来创建自定义迭代器，该方法返回一个具有 next 方法的迭代器对象。

另外，Generator 函数可以看作是一种特殊的迭代器，它能够暂停执行和恢复执行，使得我们可以通过控制迭代器的执行来生成序列。

Array Iterator（数组迭代器）有哪些迭代方法？

Array Iterator（数组迭代器）是针对 JavaScript 数组的迭代器，它可以通过 Array.prototype[Symbol.iterator]() 方法来获取。

获取到数组迭代器后，我们可以使用以下迭代方法：

next(): 返回一个包含 value 和 done 属性的对象，value 表示下一个元素的值，done 表示是否迭代结束。

return(): 用于提前终止迭代，并返回给定的值。

throw(): 用于向迭代器抛出一个异常。

下面是一个使用迭代器的示例代码：

const arr = ['a', 'b', 'c'];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

除了以上的迭代方法，还可以通过 for…of 语句来使用迭代器，如下所示：

const arr = ['a', 'b', 'c'];
for (const item of arr) {
  console.log(item);
}
// output:
// a
// b
// c

另外，数组迭代器除了上述的迭代方法，还可以使用 forEach()、map()、filter()、reduce() 等常见数组方法进行迭代操作；

String Iterator（字符串迭代器） 有哪些迭代方法？

String Iterator 是 ES6 引入的一种迭代器，可以用于遍历字符串。String Iterator 没有自己的迭代方法，但可以使用通用的迭代方法。以下是 String Iterator 可以使用的迭代方法：

next()：返回迭代器的下一个值，格式为 {value: string, done: boolean}。 Symbol.iterator：返回一个迭代器对象，可以使用 for…of 循环来遍历字符串。

示例代码如下：

const str = "hello";
const strIterator = str[Symbol.iterator]();

console.log(strIterator.next()); // { value: 'h', done: false }
console.log(strIterator.next()); // { value: 'e', done: false }
console.log(strIterator.next()); // { value: 'l', done: false }
console.log(strIterator.next()); // { value: 'l', done: false }
console.log(strIterator.next()); // { value: 'o', done: false }
console.log(strIterator.next()); // { value: undefined, done: true }

for (let char of str) {
  console.log(char);
}
// Output:
// h
// e
// l
// l
// o

Map Iterator（映射迭代器）和 Set Iterator（集合迭代器）有哪些迭代方法？

Map Iterator 和 Set Iterator 都有以下迭代方法： next(): 返回迭代器中下一个元素的对象，对象包含 value 和 done 两个属性。value 属性是当前元素的值，done 属性表示迭代器是否已经迭代完成。 Symbol.iterator: 返回迭代器本身，使其可被 for…of 循环使用。

Map Iterator 还有以下方法： entries(): 返回一个新的迭代器对象，该迭代器对象的元素是 [key, value] 数组。 keys(): 返回一个新的迭代器对象，该迭代器对象的元素是 Map 中的键名。 values(): 返回一个新的迭代器对象，该迭代器对象的元素是 Map 中的键值。

Set Iterator 还有以下方法： entries(): 返回一个新的迭代器对象，该迭代器对象的元素是 [value, value] 数组。 keys(): 返回一个新的迭代器对象，该迭代器对象的元素是 Set 中的值。 values(): 返回一个新的迭代器对象，该迭代器对象的元素是 Set 中的值。

Map Iterator 使用举例

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

const mapIterator = myMap.entries();

console.log(mapIterator.next().value); // ["key1", "value1"]
console.log(mapIterator.next().value); // ["key2", "value2"]
console.log(mapIterator.next().value); // ["key3", "value3"]
console.log(mapIterator.next().value); // undefined

Set Iterator 使用举例

const mySet = new Set(['apple', 'banana', 'orange']);

// 使用 for...of 循环遍历 Set
for (const item of mySet) {
  console.log(item);
}

// 使用 Set 迭代器手动遍历 Set
const setIterator = mySet.values();
let next = setIterator.next();
while (!next.done) {
  console.log(next.value);
  next = setIterator.next();
}

要使对象支持 for...of 迭代，你需要使该对象具有符合迭代协议的迭代器。实现这一点的方法是为对象定义一个名为 Symbol.iterator 的方法。这个方法应该返回一个迭代器对象，迭代器对象必须有一个 next 方法，该方法返回一个对象，其中包含 value 和 done 属性。

以下是实现过程的步骤和示例代码：

1. 实现 Symbol.iterator 方法

1.1 定义迭代器对象

迭代器对象需要实现 next 方法，next 方法返回一个对象，包含两个属性：

• value：当前的值。
• done：一个布尔值，指示迭代是否完成。

1.2 在对象中实现 Symbol.iterator

将 Symbol.iterator 方法定义在对象上，这样对象就变成了可迭代的。

示例代码

示例 1: 基本对象

const myObject = {
  items: ['a', 'b', 'c'],
  [Symbol.iterator]() {
    let index = 0;
    const items = this.items;
    return {
      next() {
        if (index < items.length) {
          return { value: items[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// 使用 for...of 进行迭代
for (const item of myObject) {
  console.log(item); // 'a', 'b', 'c'
}

示例 2: 自定义对象

function createIterableObject() {
  return {
    start: 1,
    end: 5,
    [Symbol.iterator]() {
      let current = this.start;
      const end = this.end;
      return {
        next() {
          if (current <= end) {
            return { value: current++, done: false };
          } else {
            return { done: true };
          }
        }
      };
    }
  };
}

const iterableObject = createIterableObject();

// 使用 for...of 进行迭代
for (const num of iterableObject) {
  console.log(num); // 1, 2, 3, 4, 5
}

3. 注意事项

• 生成器：生成器函数（function*）可以更方便地创建可迭代对象，它自动实现了 Symbol.iterator 方法，并简化了迭代器的代码。

示例 3: 使用生成器

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const iterableObject = range(1, 5);

// 使用 for...of 进行迭代
for (const num of iterableObject) {
  console.log(num); // 1, 2, 3, 4, 5
}

Symbol 是 ES6 引入的一种基本数据类型，它用于创建唯一且不可变的值。它主要用于解决对象属性的命名冲突问题。以下是 Symbol 的主要特征和实际使用案例：

1. 特征

1.1 唯一性

每个 Symbol 值都是唯一的，即使它们具有相同的描述。两个不同的 Symbol 对象即使描述相同，也不会相等。

const sym1 = Symbol('description');
const sym2 = Symbol('description');

console.log(sym1 === sym2); // false

1.2 不可变性

Symbol 的值是不可变的，一旦创建，就不能改变。

1.3 隐私性

Symbol 属性不容易与其他属性冲突，因为每个 Symbol 都是唯一的。它们不会被 for...in 循环、Object.keys() 或 JSON.stringify() 处理，但可以通过 Object.getOwnPropertySymbols() 获取。

2. 创建 Symbol

使用 Symbol() 函数创建 Symbol：

const sym = Symbol('description');
console.log(sym); // Symbol(description)

3. 实际使用案例

3.1 用作对象属性的唯一标识符

Symbol 可以用作对象的属性键，避免属性名冲突。

const mySymbol = Symbol('uniqueProperty');

const obj = {
  [mySymbol]: 'value'
};

console.log(obj[mySymbol]); // 'value'

3.2 定义私有对象属性

使用 Symbol 可以定义对象的“私有”属性，这些属性不会被意外覆盖或枚举到。

const privateProp = Symbol('private');

class MyClass {
  constructor(value) {
    this[privateProp] = value;
  }

  getPrivate() {
    return this[privateProp];
  }
}

const instance = new MyClass('secret');
console.log(instance.getPrivate()); // 'secret'
console.log(instance[privateProp]); // 'secret' (if you have the Symbol reference)

3.3 定义和使用内置对象的符号属性

JavaScript 内置对象（如 Object, Array, String 等）有一些 Symbol 属性，用于定义特定行为或协议。

• Symbol.iterator：定义对象的默认迭代器，用于 for...of 循环。

const iterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

• Symbol.toStringTag：定义对象的默认字符串表示（Object.prototype.toString）。

const obj = {
  [Symbol.toStringTag]: 'MyObject'
};

console.log(Object.prototype.toString.call(obj)); // [object MyObject]

• Symbol.hasInstance：自定义 instanceof 行为。

class MyClass {
  static [Symbol.hasInstance](instance) {
    return instance instanceof Array;
  }
}

console.log([] instanceof MyClass); // true
console.log({} instanceof MyClass); // false

• Symbol.toPrimitive：自定义对象的原始值转换行为。

const obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'string') return 'string representation';
    if (hint === 'number') return 42;
    return 'default representation';
  }
};

console.log(String(obj)); // 'string representation'
console.log(Number(obj)); // 42
console.log(+obj + 1); // 43

4. 组合使用

4.1 扩展对象的行为

Symbol 还可以与其他 ES6 特性组合使用，例如 Proxy 和 Reflect API 来扩展对象行为。

示例代码：

const handler = {
  get(target, prop, receiver) {
    if (prop === Symbol.toStringTag) {
      return 'CustomObject';
    }
    return Reflect.get(target, prop, receiver);
  }
};

const proxy = new Proxy({}, handler);
console.log(Object.prototype.toString.call(proxy)); // [object CustomObject]

ECMAScript Modules（ESM）和 CommonJS（CJS）是 JavaScript 中两种主要的模块系统，它们各有特点和差异。

1. 语法

• ESM（ECMAScript Modules）：

  • 导入：使用 import 语法

    import { foo } from './module.js';
    import * as bar from './module.js';
    import defaultExport from './module.js';
    

  • 导出：使用 export 语法

    export const foo = 42;
    export function bar() { ... }
    export default function() { ... }
    

• CJS（CommonJS）：

  • 导入：使用 require 语法

    const foo = require('./module.js').foo;
    const bar = require('./module.js');
    

  • 导出：使用 module.exports 和 exports

    module.exports = {
      foo: 42,
      bar: function() { ... }
    };
    // 或者
    exports.foo = 42;
    exports.bar = function() { ... };
    

2. 模块加载方式

• ESM：

  • 静态：模块加载在编译时确定，可以进行静态分析，支持树摇优化（tree-shaking）。
  • 异步：支持异步加载（动态导入），可以使用 import() 来按需加载模块。

• CJS：

  • 动态：模块加载在运行时进行，require 可以在任何地方调用，包括条件语句中。
  • 同步：require 是同步的，所有模块在程序开始时加载。

3. 文件扩展名

• ESM：

  • 通常使用 .js 文件扩展名，默认情况下会使用 ESM 语法，但也可以使用 .mjs 扩展名明确标识为 ESM 模块。

• CJS：

  • 通常使用 .js 文件扩展名，模块系统默认为 CJS。使用 .cjs 扩展名可以明确标识为 CJS 模块。

4. 模块解析

• ESM：

  • 相对路径：需要提供完整的路径（包括文件扩展名），例如 import { foo } from './module.js';
  • 绝对路径：支持 URL 作为模块标识符。

• CJS：

  • 相对路径：可以省略文件扩展名，例如 const foo = require('./module');，Node.js 会尝试自动解析 .js、.json、.node 等扩展名。

5. 模块缓存

• ESM：

  • 模块加载结果会被缓存，后续的导入会从缓存中读取。

• CJS：

  • 模块首次 require 时加载，后续的 require 会使用缓存的结果。

6. 默认导出

• ESM：

  • 支持默认导出，可以导出一个默认值和多个命名值。

• CJS：

  • module.exports 可以导出一个对象或函数，不能直接导出多个命名值。

7. this 绑定

• ESM：

  • 在模块代码中，this 是 undefined。模块代码不在函数上下文中运行，而是在模块上下文中运行。

• CJS：

  • 在模块代码中，this 指向 module.exports，即模块的导出对象。

示例对比

ESM 示例：

// module.js
export const foo = 42;
export default function() { ... }

// main.js
import { foo } from './module.js';
import defaultExport from './module.js';

CJS 示例：

// module.js
const foo = 42;
module.exports = function() { ... };
module.exports.foo = foo;

// main.js
const module = require('./module.js');
const foo = module.foo;
const defaultExport = module;

Promise.race、Promise.all 和 Promise.allSettled 都是处理多个 Promise 对象的静态方法，它们的主要区别在于处理 Promise 的方式和返回结果。下面是这三者的详细比较：

1. Promise.all

• 功能：接受一个 Promise 对象的可迭代对象（通常是数组），并返回一个新的 Promise 对象。这个新的 Promise 对象在所有输入的 Promise 对象都成功时成功，并返回一个包含所有成功 Promise 结果的数组。如果其中任何一个 Promise 失败，则立即失败，并返回第一个失败的 Promise 的拒绝理由。

• 返回值：一个 Promise 对象。成功时，返回一个数组，其中包含每个输入 Promise 对象的结果；失败时，返回第一个失败的 Promise 的拒绝原因。

• 使用示例：

  Promise.all([
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3)
  ]).then(results => {
    console.log(results); // [1, 2, 3]
  }).catch(error => {
    console.error(error);
  });
  

2. Promise.race

• 功能：接受一个 Promise 对象的可迭代对象（通常是数组），并返回一个新的 Promise 对象。这个新的 Promise 对象将会在第一个输入的 Promise 对象解决或拒绝时解决或拒绝，而不管其他 Promise 对象的状态。

• 返回值：一个 Promise 对象。它的状态由第一个解决或拒绝的 Promise 决定。

• 使用示例：

  Promise.race([
    new Promise((resolve) => setTimeout(resolve, 500, 'first')),
    new Promise((resolve) => setTimeout(resolve, 100, 'second'))
  ]).then(result => {
    console.log(result); // 'second' (因为它首先解决)
  });
  

3. Promise.allSettled

• 功能：接受一个 Promise 对象的可迭代对象（通常是数组），并返回一个新的 Promise 对象。这个新的 Promise 对象在所有输入的 Promise 对象都完成时解决（无论成功还是失败），并返回一个数组，其中每个元素是一个对象，描述了对应 Promise 对象的结果或拒绝原因。

• 返回值：一个 Promise 对象。成功时，返回一个包含每个输入 Promise 对象的结果的数组，每个结果对象有两个属性：status（“fulfilled” 或 “rejected”）和 value（如果成功）或 reason（如果失败）。

• 使用示例：

  Promise.allSettled([
    Promise.resolve(1),
    Promise.reject(new Error('Failed')),
    Promise.resolve(3)
  ]).then(results => {
    console.log(results);
    /*
    [
      { status: 'fulfilled', value: 1 },
      { status: 'rejected', reason: Error('Failed') },
      { status: 'fulfilled', value: 3 }
    ]
    */
  });
  

ES5 和 ES6 在使用 new 关键字实例化对象时，整体流程类似，但在细节上有一些关键区别。下面是详细的对比：

1. ES5 的 new 实例化流程

1. 创建新对象：new 关键字会创建一个新对象。
2. 设置原型：新对象的 [[Prototype]] 被设置为构造函数的 prototype 属性。
3. 绑定 this：构造函数内部的 this 被绑定到新创建的对象上。
4. 执行构造函数：构造函数会被执行，其内部代码会初始化新对象的属性。
5. 返回对象：如果构造函数返回一个对象，则返回这个对象；如果返回的是基本类型（如 string、number、boolean），则返回新创建的对象。

示例

function Person(name) {
  this.name = name;
}

var person = new Person('Alice');
console.log(person.name); // Alice

2. ES6 的 new 实例化流程

ES6 中的 class 语法是基于 ES5 的构造函数语法封装的，new 的基本流程与 ES5 类似，但有一些新特性和要求：

1. 创建新对象：new 关键字会创建一个新对象。
2. 设置原型：新对象的 [[Prototype]] 被设置为类的 prototype 属性。
3. 绑定 this：类的构造函数中的 this 被绑定到新创建的对象上。
4. 执行构造函数：构造函数会被执行，用于初始化新对象的属性。
5. 返回对象：如果构造函数返回一个对象，则返回这个对象；如果构造函数返回的是基本类型，返回新创建的对象。

示例

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person('Alice');
console.log(person.name); // Alice

主要区别

1. 语法：

   • ES5 使用函数和 prototype 来定义构造函数。
   • ES6 引入了 class 语法，使得构造函数的定义更简洁和直观。

2. 继承：

   • ES5 使用原型链和构造函数实现继承。
   • ES6 使用 extends 关键字实现继承，语法更清晰。

3. 静态方法：

   • ES5 中静态方法是直接定义在构造函数上。
   • ES6 class 语法支持使用 static 关键字定义静态方法。

4. 类和构造函数：

   • ES6 中的类构造函数必须使用 new 调用，否则会抛出错误。而 ES5 中的构造函数如果没有使用 new 调用，也不会抛出错误（this 可能会不正确）。

Promise.then 的第二个参数和 Promise.catch 都用于处理 Promise 的拒绝（rejected）情况，但它们的使用方式和作用有所不同。以下是它们的区别：

1. Promise.then 的第二个参数

• 作用：用于处理 Promise 被拒绝（rejected）时的情况。

• 用法：

  promise.then(onFulfilled, onRejected);
  

  • onFulfilled：可选的回调函数，Promise 被解决（fulfilled）时调用。
  • onRejected：可选的回调函数，Promise 被拒绝（rejected）时调用。

• 示例：

  new Promise((resolve, reject) => reject('Error'))
    .then(
      value => console.log('Fulfilled:', value),
      error => console.log('Rejected:', error) // 处理拒绝的情况
    );
  

• 特点：then 方法接收两个参数，第一个是成功回调，第二个是失败回调。只有当 then 的第一个参数不为 undefined 时，第二个参数才会被触发。

2. Promise.catch

• 作用：专门用于处理 Promise 被拒绝（rejected）时的情况。

• 用法：

  promise.catch(onRejected);
  

  • onRejected：回调函数，当 Promise 被拒绝时调用。

• 示例：

  new Promise((resolve, reject) => reject('Error'))
    .catch(error => console.log('Caught Error:', error)); // 处理拒绝的情况
  

• 特点：catch 方法是 then 方法的语法糖，专门用于处理拒绝的情况。它可以与 then 链式调用配合使用，使得代码更加清晰和符合逻辑。

Promise 构造函数的执行

同步执行：

• Promise 的构造函数（即 new Promise(executor)）是同步执行的。
• 当你创建一个新的 Promise 实例时，传递给构造函数的 executor 函数会立即同步执行。
• 在 executor 函数中调用 resolve 或 reject 也是同步的，直到 executor 函数执行完毕，Promise 的状态才会改变。

示例：

console.log('Start');

const promise = new Promise((resolve, reject) => {
  console.log('Inside promise executor');
  resolve('Resolved value');
});

console.log('After promise creation');

promise.then(value => {
  console.log('Inside then');
  console.log(value);
});

console.log('End');

输出：

Start
Inside promise executor
After promise creation
End
Inside then
Resolved value

then 方法的执行

异步执行：

• then 方法的回调函数（onFulfilled 和 onRejected）是异步执行的。它们会在当前执行栈清空后被执行，即微任务队列（Microtask Queue）中。
• 当 Promise 的状态变为 fulfilled 或 rejected 时，then 方法中注册的回调函数会被加入微任务队列，在当前脚本执行完后，事件循环会处理这些微任务。

示例：

console.log('Start');

const promise = new Promise((resolve, reject) => {
  console.log('Inside promise executor');
  resolve('Resolved value');
});

console.log('After promise creation');

promise.then(value => {
  console.log('Inside then');
  console.log(value);
});

console.log('End');

输出：

Start
Inside promise executor
After promise creation
End
Inside then
Resolved value

JavaScript 中的原生 Promise 不直接支持取消操作。Promise 的设计理念是一次性且不可变的，创建后就不可取消。

实现 Promise 取消的常见方法有：

1. 使用标志位

可以在 Promise 内部设置一个取消标志，手动检查这个标志来决定是否继续执行操作。

function cancellablePromise(executor) {
  let cancelled = false;

  const promise = new Promise((resolve, reject) => {
    executor(
      (value) => {
        if (!cancelled) resolve(value);
      },
      (error) => {
        if (!cancelled) reject(error);
      }
    );
  });

  return {
    promise,
    cancel() {
      cancelled = true;
    }
  };
}

2. 使用 AbortController

对于 Fetch API 或类似支持 AbortController 的操作，可以利用 AbortController 取消网络请求。

const controller = new AbortController();
const signal = controller.signal;

fetch('url', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

// 取消请求
controller.abort();

3. 自定义取消的 Promise 机制

通过自定义机制来处理 Promise 的取消逻辑，可以封装 Promise 和取消逻辑。

class CancelablePromise {
  constructor(executor) {
    this._isCanceled = false;
    this._promise = new Promise((resolve, reject) => {
      executor(
        value => !this._isCanceled && resolve(value),
        error => !this._isCanceled && reject(error)
      );
    });
  }

  cancel() {
    this._isCanceled = true;
  }

  then(onFulfilled, onRejected) {
    return this._promise.then(onFulfilled, onRejected);
  }

  catch(onRejected) {
    return this._promise.catch(onRejected);
  }
}

4. 使用第三方库

有些第三方库（如 Bluebird 和 rxjs）提供了对 Promise 取消的支持或替代方案。

这个说法是正确的。

在 JavaScript 中，class 语法实际上是构造函数的语法糖，提供了一个更清晰和直观的方式来定义和创建对象和继承。下面是详细解释：

构造函数与类的关系

构造函数

构造函数是一种传统的创建对象的方式，通过 function 关键字定义，并且使用 new 关键字来实例化对象。

• 示例：

  function Person(name, age) {
      this.name = name;
      this.age = age;
  }
  
  Person.prototype.greet = function() {
      console.log('Hello!');
  };
  
  const john = new Person('John', 30);
  

• 特点：

  • 使用 function 定义，this 关键字用于设置实例属性。
  • 方法需要在构造函数的原型上定义。
  • 需要手动设置原型链上的方法。

类（Class）

ES6 引入的 class 语法提供了一种更清晰、更现代的方式来定义构造函数和对象的方法。类的语法是构造函数的语法糖，但它简化了代码并提供了更直观的面向对象编程方式。

• 示例：

  class Person {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
  
      greet() {
          console.log('Hello!');
      }
  }
  
  const john = new Person('John', 30);
  

• 特点：

  • class 语法提供了更简洁的构造函数和方法定义方式。
  • 方法定义在类的主体中，而不是在原型上。
  • 默认使用 strict mode。
  • 允许使用 static 关键字定义静态方法，这些方法不依赖于实例。

语法糖的具体实现

• 构造函数：

  function Person(name, age) {
      this.name = name;
      this.age = age;
  }
  
  Person.prototype.greet = function() {
      console.log('Hello!');
  };
  

• 类：

  class Person {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
  
      greet() {
          console.log('Hello!');
      }
  }
  

实际上，类的语法在内部会被转换成类似于构造函数和原型链的方法：

• 类的构造函数：

  Person.prototype.constructor = Person;
  

• 类的方法：

  Person.prototype.greet = function() {
      console.log('Hello!');
  };
  

在使用 async/await 时，是否需要添加 try...catch 语句取决于你如何处理错误以及你的应用程序的需求。总体而言，添加 try...catch 是一个好的实践，因为它可以帮助你捕获并处理异步操作中的错误，从而提高代码的健壮性和可靠性。

为什么需要 try...catch

1. 捕获异步操作中的错误：

   • async/await 本质上是基于 Promise 的语法糖。当 await 关键字后面的 Promise 被拒绝（rejected）时，它会抛出一个错误。使用 try...catch 可以捕获这个错误并进行处理，避免未捕获的异常导致程序崩溃。

   async function fetchData() {
       try {
           const response = await fetch('https://api.example.com/data');
           const data = await response.json();
           return data;
       } catch (error) {
           console.error('Error fetching data:', error);
           // Handle the error or throw it again
       }
   }
   

2. 确保代码的健壮性：

   • 即使错误发生，也可以通过 catch 块进行适当的处理（如记录错误、显示用户友好的错误信息、执行清理操作等），从而确保应用程序能够继续运行或安全地终止。

   async function performTask() {
       try {
           await task1();
           await task2();
           await task3();
       } catch (error) {
           console.error('Error performing tasks:', error);
           // Clean up or notify the user
       }
   }
   

3. 特定情况下的错误处理：

   • 有时，你可能希望在每个 await 操作后处理错误，而不是在函数级别进行统一处理。在这种情况下，可以为每个异步操作添加 try...catch 块。

   async function processMultipleTasks() {
       try {
           await task1();
       } catch (error) {
           console.error('Error in task1:', error);
           return; // Exit or handle accordingly
       }
   
       try {
           await task2();
       } catch (error) {
           console.error('Error in task2:', error);
       }
   
       // Continue with other tasks
   }
   

什么时候可以不使用 try...catch

1. 上层调用处理：

   • 如果你确定上层调用者会处理错误，或者你希望错误冒泡到更高的层级，可以选择不在当前 async 函数中捕获错误，而是让调用者处理。

   async function fetchData() {
       const response = await fetch('https://api.example.com/data');
       return await response.json();
   }
   
   async function main() {
       try {
           const data = await fetchData();
           console.log(data);
       } catch (error) {
           console.error('Error in main:', error);
       }
   }
   

2. 简化代码：

   • 在一些简单的或不太关键的异步操作中，你可能选择不处理错误，尤其是在开发阶段。但在生产代码中，还是建议处理错误。

Set 是一个集合类型，它类似于数组，但具有以下特点：

• 每个元素都是唯一的。
• 元素的顺序是根据插入的顺序来保持的。

要遍历 Set 对象，可以使用以下几种方法：

1. 使用 forEach() 方法

Set 具有 forEach() 方法，它接受一个回调函数，在每次迭代时会传入当前的值、值本身和 Set 本身。

const mySet = new Set([1, 2, 3, 4]);

mySet.forEach(value => {
  console.log(value);  // 输出：1, 2, 3, 4
});

2. 使用 for...of 循环

Set 是可迭代的，因此可以直接使用 for...of 循环遍历其元素。

const mySet = new Set([1, 2, 3, 4]);

for (let value of mySet) {
  console.log(value);  // 输出：1, 2, 3, 4
}

3. 使用 Set 的 values() 方法

Set 对象有一个 values() 方法，它返回一个新的 Set 对象的迭代器。实际上，values() 和 keys() 返回的迭代器是相同的，因为 Set 中的元素没有键（键和值都是元素本身）。

const mySet = new Set([1, 2, 3, 4]);

for (let value of mySet.values()) {
  console.log(value);  // 输出：1, 2, 3, 4
}

4. 使用 Set 的 keys() 方法

Set 的 keys() 方法与 values() 方法相同，它返回一个包含 Set 元素的迭代器。

const mySet = new Set([1, 2, 3, 4]);

for (let value of mySet.keys()) {
  console.log(value);  // 输出：1, 2, 3, 4
}

5. 使用 Set 的 entries() 方法

entries() 方法返回一个包含 Set 元素的 [value, value] 键值对的迭代器，尽管在 Set 中没有键，但返回的数组形式仍然是 [value, value]。

const mySet = new Set([1, 2, 3, 4]);

for (let [key, value] of mySet.entries()) {
  console.log(value);  // 输出：1, 2, 3, 4
}

在 ES6 中，Map 是一种新的集合类型，它存储键值对（key-value pairs），与对象不同的是，Map 的键可以是任何类型（不仅仅是字符串），并且键值对的顺序是有序的。

要遍历 Map 对象，可以使用以下几种方法：

1. 使用 forEach() 方法

Map 具有 forEach() 方法，它接受一个回调函数，回调函数会接收三个参数：value（值），key（键），以及 Map 本身。

const myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

myMap.forEach((value, key) => {
  console.log(key, value);  // 输出：a 1, b 2, c 3
});

2. 使用 for...of 循环

Map 是可迭代的，可以直接使用 for...of 循环进行遍历。默认情况下，Map 会按 [key, value] 的形式返回每个元素。

const myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

for (let [key, value] of myMap) {
  console.log(key, value);  // 输出：a 1, b 2, c 3
}

3. 使用 Map 的 keys() 方法

keys() 方法返回一个包含所有键的迭代器，可以用 for...of 循环遍历这些键。

const myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

for (let key of myMap.keys()) {
  console.log(key);  // 输出：a, b, c
}

4. 使用 Map 的 values() 方法

values() 方法返回一个包含所有值的迭代器，可以用 for...of 循环遍历这些值。

const myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

for (let value of myMap.values()) {
  console.log(value);  // 输出：1, 2, 3
}

5. 使用 Map 的 entries() 方法

entries() 方法返回一个包含 [key, value] 键值对的迭代器，可以用 for...of 循环遍历这些键值对。

const myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

for (let [key, value] of myMap.entries()) {
  console.log(key, value);  // 输出：a 1, b 2, c 3
}

Proxy 和 Reflect 都是 JavaScript 中用于操作对象的一对新特性，主要用于拦截和操作对象的行为。它们通常一起使用，但各自有不同的作用和用途。

1. Proxy：拦截器（Handler）

Proxy 是一个用于创建代理对象的机制，它可以让你定义自定义的行为来拦截和修改对目标对象的操作（例如属性访问、赋值、方法调用等）。通过代理，你可以在对象操作之前或之后执行一些自定义逻辑，比如验证、日志、计数等。

基本语法：

const proxy = new Proxy(target, handler);

• target 是目标对象，表示你要代理的实际对象。
• handler 是一个对象，它定义了代理对象的行为（拦截器），如 get、set、apply 等。

示例：

const target = {
  message: "Hello, World!"
};

const handler = {
  get: function(target, prop, receiver) {
    if (prop === "message") {
      return target[prop].toUpperCase();  // 返回大写的 message
    }
    return prop in target ? target[prop] : `Property "${prop}" not found`;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // 输出：HELLO, WORLD!
console.log(proxy.nonExistent); // 输出：Property "nonExistent" not found

2. Reflect：反射 API

Reflect 是一个新的内置对象，它提供了与对象操作相关的静态方法。这些方法是 Proxy 操作的低层次 API，用于执行默认的操作，或在 Proxy 的拦截器中调用它们来执行实际的行为。Reflect 方法基本上是 Object 方法的扩展，目的是简化对象操作。

Reflect 的常用方法：

• Reflect.get(target, prop)：获取目标对象的属性值。
• Reflect.set(target, prop, value)：设置目标对象的属性值。
• Reflect.deleteProperty(target, prop)：删除目标对象的属性。
• Reflect.has(target, prop)：检查目标对象是否具有某个属性。
• Reflect.apply(target, thisArg, argumentsList)：调用目标函数。
• Reflect.construct(target, argumentsList)：创建目标函数的实例。

示例：

const obj = { name: 'Alice' };

console.log(Reflect.get(obj, 'name')); // 输出：Alice
Reflect.set(obj, 'name', 'Bob');
console.log(obj.name); // 输出：Bob

Proxy 和 Reflect 之间的关系

Proxy 和 Reflect 经常一起使用，原因如下：

1. Proxy 拦截器的操作通常会调用 Reflect：Proxy 的处理程序（handler）定义了如何拦截目标对象的操作。在这些处理程序中，通常会调用 Reflect 方法来执行对象的默认操作，这样可以确保操作符合预期。

2. Reflect 是 Proxy 的默认行为：当你定义了 Proxy 拦截器时，如果你没有提供某个操作的具体实现，通常可以通过调用 Reflect 的方法来执行默认的行为。

示例：使用 Reflect 在 Proxy 中实现默认行为

const target = {
  message: "Hello"
};

const handler = {
  get(target, prop, receiver) {
    if (prop === "message") {
      return `Hello, ${target[prop]}`;  // 自定义行为
    }
    // 对于其他属性，使用 Reflect 执行默认行为
    return Reflect.get(...arguments);
  },
  set(target, prop, value, receiver) {
    if (prop === "message") {
      value = value.toUpperCase();  // 自定义行为：把 message 转成大写
    }
    return Reflect.set(...arguments);  // 使用 Reflect 来执行默认的 set 操作
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message);  // 输出：Hello, Hello
proxy.message = "world";
console.log(proxy.message);  // 输出：Hello, WORLD

可迭代对象（Iterable object）是数组的泛化，这个概念是在说任何对象都可以被定制为可在 for..of 循环中使用的对象。

也就是说，可以应用 for..of 的对象被称为 可迭代对象。

迭代器

在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。

更具体地说，迭代器是通过使用 next() 方法实现 Iterator protocol 的任何一个对象，该方法返回具有两个属性的对象：

• value，这是序列中的 next 值
• done，如果已经迭代到序列中的最后一个值，则它为 true

如果 value 和 done 一起存在，则它是迭代器的返回值。

一旦创建，迭代器对象可以通过重复调用 next() 显式地迭代。

迭代一个迭代器被称为消耗了这个迭代器，因为它通常只能执行一次。

在产生终止值之后，对 next() 的额外调用应该继续返回 {done: true}。

Javascript 中最常见的迭代器是 Array 迭代器，它只是按顺序返回关联数组中的每个值。

虽然很容易想象所有迭代器都可以表示为数组，但事实并非如此。数组必须完整分配，但迭代器仅在必要时使用，因此可以表示无限大小的序列，例如 0 和无穷大之间的整数范围。

这是一个可以做到这一点的例子。它允许创建一个简单的范围迭代器，它定义了从开始（包括）到结束（独占）间隔步长的整数序列。它的最终返回值是它创建的序列的大小，由变量 iterationCount 跟踪。

let index = 0
const bears = ['ice', 'panda', 'grizzly']

let iterator = {
  next() {
    if (index < bears.length) {
      return { done: false, value: bears[index++] }
    }

    return { done: true, value: undefined }
  }
}

console.log(iterator.next()) //{ done: false, value: 'ice' }
console.log(iterator.next()) //{ done: false, value: 'panda' }
console.log(iterator.next()) //{ done: false, value: 'grizzly' }
console.log(iterator.next()) //{ done: true, value: undefined }

实现可迭代对象

如果一个对象拥有 [Symbol.iterator] 方法，并且该方法返回一个迭代器对象，这样的对象即可称为可迭代对象。

let info = {
  bears: ['ice', 'panda', 'grizzly'],
  [Symbol.iterator]: function() {
    let index = 0
    let _iterator = {
       //这里一定要箭头函数，或者手动保存上层作用域的this
       next: () => {
        if (index < this.bears.length) {
          return { done: false, value: this.bears[index++] }
        }

        return { done: true, value: undefined }
      }
    }

    return _iterator
  }
}

let iter = info[Symbol.iterator]()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

//符合可迭代对象协议 就可以利用 for of 遍历
for (let bear of info) {
  console.log(bear)
}
//ice panda grizzly

这里重点理解他们三者分别是什么，有什么区别，以及分别适用什么场景

Iterator

Iterator是最简单最好理解的。

简单的说，我们常用的 for of 循环，都是通过调用被循环对象的一个特殊函数 Iterator 来实现的，但是以前这个函数是隐藏的我们无法访问， 从 Symbol 引入之后，我们就可以通过 Symbol.iterator 来直接读写这个特殊函数。

对于循环语句来说，他并不关心被循环的对象到底是什么，他只负责调用 data[Symbol.iterator] 函数，然后根据返回值来进行循环。所以任何对象只要提供了标准的 Iterator 接口即可被循环，比如我们现在来创造一个自定义的数据：

var students = {}
students[Symbol.iterator] = function() {
  let index = 1;
  return { next() {
    return {done: index>100, value: index++} }
  }
}

for(var i of students) { console.log(i); }

除了这种方式外，我们也可以通过 Generator 来实现一个 Iterator 接口。

Generator 基本语法

Generator 是ES6引入的新语法，Generator是一个可以暂停和继续执行的函数。简单的用法，可以当做一个Iterator来用，进行一些遍历操作。复杂一些的用法，他可以在内部保存一些状态，成为一个状态机。

Generator 基本语法包含两部分：

• 函数名前要加一个星号
• 函数内部用 yield 关键字返回值

下面是一个简单的示例：

function * count() {
  yield 1
  yield 2
  return 3
}
var c = count()
console.log(c.next()) // { value: 1, done: false }
console.log(c.next()) // { value: 2, done: false }
console.log(c.next()) // { value: 3, done: true }
console.log(c.next()) // { value: undefined, done: true }

由于Generator也存在 Symbol.iterator 接口，所以他也可以被 for 循环调用：

function * count() {
  yield 1
  yield 2
  return 3
}
var c = count()
for (i of c) console.log(i) // 1, 2

不过这里要注意一个不同点，调用 next 的时候能得到 3 ，但是用 for 则会忽略最后的 return 语句。 也就是 for 循环会忽略 generator 中的 return 语句.

另外 yeild* 语法可以用来在 Generator 中调用另一个 Generator，参见 yield* MDN

Generator VS Iterator

Generator 可以看做是一个更加灵活的 Iterator ，他们之间是可以互相替代的，但是， Generator 由于可以通过 yield 随时暂停，因此可以很方便进行流程控制和状态管理，而 Iterator 就可能需要你写更多的代码进行相同的操作：

比如 Stack Overflow 上的这个中序遍历代码：

function* traverseTree(node) {
    if (node == null) return;
    yield* traverseTree(node.left);
    yield node.value;
    yield* traverseTree(node.right);
}

同样的功能用 iterator 实现就会变得麻烦很多。

Generator 也是实现简单的状态机的最佳选择，因为他是在函数内部进行 yield 操作，因此不会丢失当前状态：

function * clock () {
  yield 'tick'
  yield 'tock'
}

同样的功能如果普通的函数，因为每次都是调用这个函数，所以函数内部并不能保存状态，因此就需要在函数外面用一个变量来保存当前状态：

let tick = false
function clock() {
  tick = !tick
  return tick ? 'tick' : 'tock'
}

其实Babel编译 Generator 的时候，也是用了一个 Context 来保存当前状态的，可以看看Babel编译后的代码，其中的 _context 就是当前状态，这里通过 _context.next 的值来控制调用 next 的时候应该进入到哪一个流程：

var _marked = /*#__PURE__*/regeneratorRuntime.mark(clock);

function clock() {
  return regeneratorRuntime.wrap(function clock$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return 'tick';

        case 2:
          _context.next = 4;
          return 'tock';

        case 4:
        case 'end':
          return _context.stop();
      }
    }
  }, _marked, this);
}

当然，如果是很复杂的，非线性状态变化的状态机，我还是会倾向于用一个类来实现。

Generator 异步操作

Generator 的设计，可以很方便执行异步操作，现在我们需要写一个小函数，可以取到用户信息然后打印出来，我们用generator来写就是这样的：

function * fetchUser () {
  const user = yield ajax()
  console.log(user)
}

但是，generator本身并不会自动进行 next 操作，也就是，我们如果此时这样调用并不能打印出用户信息:

const f = fetchUser()

因为Generator 本身只是一个状态机，他需要由调用者来改变他的状态，所以我们需要额外加一段控制代码来控制 fetchUser 进行状态转换:

function * fetchUser () {
  const user = yield ajax()
  console.log(user)
}

const f = fetchUser()

// 加入的控制代码
const result = f.next()
result.value.then((d) => {
  f.next(d)
})

但是写了这些代码之后， Generator 的实现就变得非常不优雅了，如果我们内部有多个异步操作，控制代码就会变得很长。我们可以选择 co 库来帮我们做这个操作。

Async/Await

我最开始接触到 Async/Await 的时候把它当成了一个 promise 的语法糖，但是经过我们对 Generator 的理解后，明白了其实他就是 Generator 的一个语法糖：

• async 对应的是 *
• await 对应的是 yield

他只是自动帮我们进行了 Generator 的流程控制而已。

和上面的获取用户信息实现一样的功能的话，基本语法如下：

async function fetchUser() {
  const user = await ajax()
  console.log(user)
}

因为有自动的流程控制，所以我们不用手动在ajax成功的时候手动调用 next。相比于 Promise 或者 Generator 的实现，代码要明显更加优雅。

如果有兴趣的话，可以参考一下 Babel 是如何编译 Async/Await 的，简单的说，代码分成了两部分，一部分是编译了一个 Generator，另一部分是通过 promise 实现了generator的流程控制。

对于如下代码：

async function count () {
  let a = await 1;
  let b = await 2;
  return a+b
}

编译后的代码：

var count = function () {
  // 下面这部分是 generator 的一个实现
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var a, b;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return 1;

            // 省略...
        }
      }
    }, _callee, this);
  }));

  return function count() {
    return _ref.apply(this, arguments);
  };
}();

// 下面这部分是用 promise 实现了流程控制。
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

所以我们可以大约这么认为： async/await == generator + promise

async/await 并发

我们的代码在执行到await的时候会等待结果返回才执行下一行，这样如果我们有很多需要异步执行的操作就会变成一个串行的流程，可能会导致非常慢。

比如如下代码，我们需要遍历获取redis中存储的100个用户的信息：

const users=[]
for (var i=0;i<ids.length;i++) {
  users.push(await db.get(ids))
}

由于每次数据库读取操作都要消耗时间，这个接口将会变得非常慢。如果我们把它变成一个并行的操作，将会极大提升效率：

const users = await Promise.all(ids.map(async (id) => await db.get(id)))

总结

• Iterator 是一个循环接口，任何实现了此接口的数据都可以被 for of 循环遍历
• Generator 是一个可以暂停和继续执行的函数，他可以完全实现 Iterator 的功能，并且由于可以保存上下文，他非常适合实现简单的状态机。另外通过一些流程控制代码的配合，可以比较容易进行异步操作。
• Async/Await 就是generator进行异步操作的语法糖。而这个语法糖反而是被使用最广泛的，比如著名的 Koa

Map

1.传统对象结构

Map本质上是一个键值对的集合。和传统对象结构相比，传统对象只能用字符串作为键名，这在使用上造成了很大的限制。

const data = {}
//element为节点对象
const element = document.querySelector('.node')
console.log(element)  //输出div.node对象
console.log(element.toString())
//用点操作符不能有空格，所以采用中括号的形式给对象赋值
data[element] = 'objectData'
//输出objectData，说明在对象中存在[object HTMLDivElement]键名
console.log(data['[object HTMLDivElement]'])

上面带代码中，我们创建了一个对象并将一个节点对象作为它的键名，并进行了代码测试，首先验证了获取到的element节点为一个对象，再确定了经过toString方法转化后的结果，以这个值为键名成功的输出了value值objectData。

上面的代码证明了传统对象的键名会通过toString方法转化为字符串类型

注意：在我们访问对象成员的时，键名有空格时不能采用点访问，例如data.ab c 这是错误的。我们可以用data[‘ab c’]的形式访问

2.Map结构

Map类似于对象，但是键名不限于字符串，可以说Object结构提供键值对应，Map提供值值对应，因此采用Map结构会优于传统对象。

const dataMap = new Map()
const element = document.querySelector('.node')
dataMap.set(element,'objectData')
console.log(dataMap.get(element))
console.log(dataMap)

上面的代码中我们获取值时直接传入了element对象，成功将对象作为键名，弥补了传统对象的不足。

3.Map的特点

1. Map默认情况下不包含任何键，所有键都是自己添加进去的。不同于Object原型链上有一写默认的键。
2. Map的键可以时任何类型数据，就连函数都可以。
3. Map的键值对个数可以轻易通过size属性获取，Object需要手动计算。
4. Map在频繁增删键值对的场景下性能比Object更好。

4.什么时候用Map

1. 想要添加的键值名和Object上的默认键值名冲突，又不想改名，用Map。
2. 需要String和Symbol以外的数据类型做键值时，用Map。
3. 键值对很多，有时需要计算数量，用Map。
4. 需要频繁地增删键值对时，用Map。

WeakMap

什么是WeakMap

WeakMap是ES6中新增的一种集合类型，叫做’弱映射’。它和Map是兄弟关系，与Map的区别在于这个弱字，API还是Map那套API

WeakMap的特性

1. WeakMap只能将对象作为键名

只接受对象作为键名(null除外)，不接受其它类型的值作为键名。

2.WeakMap的键名引用的对象是弱引用

首先我们需要知道什么是强引用什么是弱引用

强引用

const e1 = document.getElementById('foo')
const e2 = document.getElementById('bar')
const arr = [
    [e1,'foo'],
    [e2,'bar'],
];

上面的代码中e1和e2是两个对象，通过arr数组对这两个对象添加一些文字说明。但是这样就形成了arr对e1和e2的引用，而这种引用又是强引用。它的区别就体现在这。当我们不再需要这两个对象时，我们必须手动删除这个引用，接触arr对两个对象的引用关系，否则垃圾回收机制不会释放e1和e2占用的内存。因为arr仍然存在着对对象的引用。

arr[0] = null;
arr[1] = null;

弱引用

是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问的，并因此可能在任何时刻被回收。

也就是说当我们创建一个弱引用的对象时，我们就可以静静地等待其被垃圾回收器回收。

总的来说，局势WeakMap保持了对键名所引用对象的弱引用，即垃圾回收机制不将该引用考虑在内。只要所引用的对象的其它引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap里面的键名对象和所对应的键值对会自动消失，不需要手动删除引用。

3.不可遍历

正因为WeakMap对键名引用的对象是弱引用关系 ，因此WeakMap内部成员是会取决于垃圾回收机制有没有执行，运行前后成员个数很可能是不一样的，而垃圾回收机制的执行又是不可预测的，因此不可遍历。

Map和WeakMap区别

• Map的键可以是任意类型，WeakMap只接受对象作为键，不接受其它类型的值作为键
• Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键；WeakMap的键是弱引用，键所指向的对象是可以被垃圾回收，此时键是无效的。
• Map可以被遍历，WeakMap不能被遍历

new.target 属性是 JavaScript 中一个特殊的属性，它用于检测函数或构造函数是否是通过 new 运算符被调用的。这个属性在通过 new 运算符初始化的函数或构造方法中，会返回一个指向构造方法或函数的引用。如果函数不是通过 new 运算符被调用的，new.target 的值将是 undefined。 利用 new.target，我们可以编写代码来检查一个函数是否作为构造函数被 new 调用，从而确保函数的调用方式符合预期。例如，如果我们有一个函数，它应该总是作为构造函数被调用，那么我们可以在函数体内部使用 new.target 来抛出一个错误，如果它没有被以正确的方式调用。

function Foo() {
  if (!new.target) {
    throw new Error("Foo() must be called with new");
  }
  console.log("Foo instantiated with new");
}
// 如果直接调用函数，会抛出错误
try {
  Foo();
} catch (error) {
  console.log(error.message); // 输出: Foo() must be called with new
}
// 如果使用 new 运算符调用函数，则不会抛出错误
try {
  new Foo();
} catch (error) {
  console.log(error.message); // 不会抛出错误
}

在上述代码中，当 Foo() 函数被直接调用时，由于 new.target 是 undefined，因此会抛出一个错误，提示必须使用 new 运算符来调用 Foo()。而当使用 new 运算符调用时，new.target 指向 Foo 函数本身，因此不会抛出错误，而是执行了 console.log 语句。

一般情况下 async/await 在错误处理方面，主要使用 try/catch，像这样

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('fetch data is me')
        }, 1000)
    })
}

(async () => {
    try {
        const data = await fetchData()
        console.log('data is ->', data)
    } catch(err) {
        console.log('err is ->', err)
    }
})()

这么看，感觉倒是没什么问题，如果是这样呢？有多个异步操作，需要对每个异步返回的 error 错误状态进行不同的处理，以下是示例代码

const fetchDataA = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('fetch data is A')
        }, 1000)
    })
}

const fetchDataB = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('fetch data is B')
        }, 1000)
    })
}

const fetchDataC = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('fetch data is C')
        }, 1000)
    })
}

(async () => {
    try {
        const dataA = await fetchDataA()
        console.log('dataA is ->', dataA)
    } catch(err) {
        console.log('err is ->', err)
    }

    try {
        const dataB = await fetchDataB()
        console.log('dataB is ->', dataB)
    } catch(err) {
        console.log('err is ->', err)
    }

    try {
        const dataC = await fetchDataC()
        console.log('dataC is ->', dataC)
    } catch(err) {
        console.log('err is ->', err)
    }
})()

这样写代码里充斥着 try/catch，有代码洁癖的你能忍受的了吗？这时可能会想到只用一个 try/catch。

// ... 这里 fetch 函数省略

(async () => {
    try {
        const dataA = await fetchDataA()
        console.log('dataA is ->', dataA)
        const dataB = await fetchDataB()
        console.log('dataB is ->', dataB)
        const dataC = await fetchDataC()
        console.log('dataC is ->', dataC)
    } catch(err) {
        console.log('err is ->', err)
        // 难道要定义 err 类型，然后判断吗？？
        /**
         * if (err.type === 'dataA') {
         *  console.log('dataA err is', err)
         * }
         * ......
         * */
    }
})()

如果是这样写只会增加编码的复杂度，而且要多写代码，这个时候就应该想想怎么优雅的解决，async/await 本质就是 promise 的语法糖，既然是 promise 那么就可以使用 then 函数了

(async () => {
    const fetchData = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('fetch data is me')
            }, 1000)
        })
    }

    const data = await fetchData().then(data => data ).catch(err => err)
    console.log(data)
})()

在上面写法中，如果 fetchData 返回 resolve 正确结果时，data 是我们要的结果，如果是 reject 了，发生错误了，那么 data 是错误结果，这显然是行不通的，再对其完善。

(async () => {
    const fetchData = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('fetch data is me')
            }, 1000)
        })
    }

    const [err, data] = await fetchData().then(data => [null, data] ).catch(err => [err, null])
    console.log('err', err)
    console.log('data', data)
    // err null
    // data fetch data is me
})()

这样是不是好很多了呢，但是问题又来了，不能每个 await 都写这么长，写着也不方便也不优雅，再优化一下

(async () => {
    const fetchData = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('fetch data is me')
            }, 1000)
        })
    }

    // 抽离成公共方法
    const awaitWrap = (promise) => {
        return promise
            .then(data => [null, data])
            .catch(err => [err, null])
    }

    const [err, data] = await awaitWrap(fetchData())
    console.log('err', err)
    console.log('data', data)
    // err null
    // data fetch data is me
})()

将对 await 处理的方法抽离成公共的方法，在使用 await 调用 awaitWrap 这样的方法是不是更优雅了呢。如果使用 typescript 实现大概是这个样子

function awaitWrap<T, U = any>(promise: Promise<T>): Promise<[U | null, T | null]> {
    return promise
        .then<[null, T]>((data: T) => [null, data])
        .catch<[U, null]>(err => [err, null])
}

首先了解一下 Map

Map 是一组键值对的结构，和 JSON 对象类似。

(1) Map数据结构如下

这里我们可以看到的是Map的数据结构是一个键值对的结构

(2) key 不仅可以是字符串还可以是对象

var obj ={name:"小如",age:9}
let map = new Map()
map.set(obj,"111")

打印结果如下

(3) Map常用语法如下

//初始化`Map`需要一个二维数组(请看 Map 数据结构)，或者直接初始化一个空`Map`
let map = new Map();

//添加key和value值
map.set('Amy','女')
map.set('liuQi','男')

//是否存在key，存在返回true,反之为false
map.has('Amy') //true
map.has('amy') //false

//根据key获取value
map.get('Amy') //女

//删除 key为Amy的value
map.delete('Amy')
map.get('Amy') //undefined  删除成功

(4) 一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值覆盖掉

var map =new Map
map.set('Amy',"女")
map.set('Amy',"男")
console.log(map)

打印结果如下

再来了解一下 Set

Set 对象类似于数组，且成员的值都是唯一的

(1) 打印出的数据结构如下

这里打印出来是一个对象

(2) 最常用来去重使用，去重方法有很多但是都没有它运行的快。

var arr=[1,3,4,2,5,1,4]
// 这里原本是一个对象用了es6的语法 转化成了数组，就是转化数组之前已经过滤掉了重复的元素了
var arr2=[...new Set(arr)] //[1,3,4,2,5]

(3) Set常用语法如下

//初始化一个Set ，需要一个Array数组，要么空Set
var set = new Set([1,2,3,5,6])
console.log(set)  // {1, 2, 3, 5, 6}

//添加元素到Set中
set.add(7) //{1, 2, 3, 5, 6, 7}

//删除Set中的元素
set.delete(3) // {1, 2, 5, 6, 7}

//检测是否含有此元素，有为true，没有则为false
set.has(2) //true

总结Map和Set的区别

(1) 这两种方法具有极快的查找速度;那么下面我们来对比一下Map，Set，Array 的执行时间

//首先初始化数据
var lng=100
var arr =new Array(lng).fill(2)
var set =new Set(arr)
let map =new Map()
for(var i=0;i<lng;i++){
arr[i]=i
map.set(i,arr[i])
}

// Array
console.time()
for(var j=0;j<lng;j++){
arr.includes(j)
}
console.timeEnd()  //default: 0.01220703125 ms


// Set
console.time()
for(var j=0;j<lng;j++){
set.has(j)
}
console.timeEnd()  // default: 0.005859375 ms

// Map
console.time()
for(var j=0;j<lng;j++){
map.has(j)
}
console.timeEnd()
// default: 0.007080078125 ms

通过以上几种方法我们可以看到，Set执行时间最短，那么查找速度最快，当然了Set 和 Map的查找速度都很快想差不大，所以说这两种方法具有极快的查找速度。

(2) 初始化需要的值不一样，Map需要的是一个二维数组，而Set 需要的是一维 Array 数组

(3) Map 和 Set 都不允许键重复

(4) Map的键是不能修改，但是键对应的值是可以修改的；Set不能通过迭代器来改变Set的值，因为Set的值就是键。

(5) Map 是键值对的存在，值也不作为健；而 Set 没有 value 只有 key，value 就是 key；

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

下面是一个 rest 参数代替arguments变量的例子。

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

上面代码的两种写法，比较后可以发现，rest 参数的写法更自然也更简洁。

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

函数的length属性，不包括 rest 参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

在es5中主要是通过构造函数方式和原型方式来定义一个类，在es6中我们可以通过class来定义类。

一、class类必须new调用，不能直接执行。

class类执行的话会报错，而es5中的类和普通函数并没有本质区别，执行肯定是ok的。

二、class类不存在变量提升