新手必看：JavaScript高级特性详解 | 6分钟学会

▌ 技术引导
JavaScript 有你想不到的高级特性，像 Proxy、Symbol、Reflect、WeakMap、WeakSet 这些，原生支持且性能足够，不依赖第三方库。Proxy 是最值钱的，它能拦截对象操作，比如 get、set、deleteProperty、apply 这些，让你对数据访问有完全控制权。我见过有人用 Proxy 做数据校验、权限控制、日志记录，直接在业务逻辑里嵌入，省去了大量中间层代码。Symbol 是 ES6 引入的，它能解决命名冲突，比如在对象里定义私有属性，用 Symbol 作为 key，外面根本取不到。Reflect 是 Proxy 的配套工具，它能像 Proxy 一样做操作，但更干净，没有返回值。WeakMap 和 WeakSet 专门用来处理弱引用，避免内存泄漏，适合做缓存或者关联数据。这些功能不是炫技，而是真正的工具，能让你代码更简洁、运行更高效。

▌ 技术参考

一
Proxy 的核心是拦截操作，比如 get、set、has、deleteProperty、apply、construct，这些方法都能自定义。比如，你想拦截访问某个特定字段，用 get 陷阱就能实现。一个常见的做法是用 Proxy 包裹数据对象，然后在 get 里加校验逻辑。比如：
```javascript
const handler = {
get: (obj, prop) => {
if (prop === 'secret') return 'nope';
return obj[prop];
}
};
const data = { secret: 'top-secret' };
const proxy = new Proxy(data, handler);
console.log(proxy.secret); // 输出 nope
```
这种写法能避免暴露敏感字段，比用对象属性访问更灵活。要注意，如果对象是 null 或 undefined，Proxy 会报错，所以得做判断。另外，Proxy 的性能比直接访问对象略差，但差别不大，适合在可控场景里用。

二
Symbol 本质上是唯一的，用来创建对象的不可枚举属性，防止 key 冲突。比如，你写一个类，用 Symbol 作为私有属性 key，这样其他代码无法通过 for...in 或 Object.keys 访问到。
```javascript
const privateKey = Symbol('private');
const obj = {
[privateKey]: 'hidden'
};
console.log(obj[privateKey]); // 输出 hidden
console.log(Object.keys(obj)); // 输出 []
```
Symbol 通常和 Object.defineProperty 一起用，比如定义只读属性。
```javascript
const key = Symbol('key');
Object.defineProperty(obj, key, {
value: 'read-only',
writable: false
});
```
这种写法在 Node.js 和现代浏览器里都是支持的，不会导致兼容问题。但得记住，Symbol 值不能直接作为字符串使用，除非用 toString 方法。

三
Reflect 是 Proxy 的辅助工具，它提供了与 Proxy 相同的 API 方法，但返回值更统一。比如，Reflect.get(obj, prop) 会直接返回属性值，而 Proxy.get 可能会返回 undefined。一个典型场景是用 Reflect 与 Proxy 一起做数据验证，比如在 get 陷阱里调用 Reflect.get 检查属性是否存在。
```javascript
const handler = {
get: (obj, prop) => {
if (Reflect.has(obj, prop)) return Reflect.get(obj, prop);
return 'default';
}
};
const obj = new Proxy({ name: 'Alice' }, handler);
console.log(obj.age); // 输出 default
```
这种写法更安全，不会导致程序崩溃。但 Reflect 本身不提供修改对象的功能，比如设置属性得用 Proxy 的 set 陷阱，不能直接调用 Reflect.set，它只是封装了原生的 Object 方法。

四
WeakMap 和 WeakSet 是用来存储弱引用的，适合做缓存或者关联数据。比如，用 WeakMap 存储对象与 ID 的映射，这样在对象被销毁后，WeakMap 会自动清理。
```javascript
const weakMap = new WeakMap();
const obj = { id: 1 };
weakMap.set(obj, 'user123');
console.log(weakMap.get(obj)); // 输出 user123
```
注意，WeakMap 要求 key 是对象，不能是原始值。WeakSet 同样如此，但只能存储值，不能获取。这两种结构的好处是不占用内存，坏处是无法直接访问存储的数据，只能通过特定方法。如果你在做状态管理或者缓存，WeakMap 是个不错的选择。

五
模块化开发中，ES6 的 import 和 export 有你不知道的细节。比如，使用 import() 动态加载模块，可以配合 async/await 写更优雅的代码。
```javascript
async function loadModule() {
const module = await import('./module.js');
module.default();
}
```
这种写法在 Node.js 中支持，但浏览器端可能需要打包工具。另外，你可能遇到模块加载顺序的问题，比如 import 会阻塞后续代码执行，所以要合理安排。如果模块很大，用动态导入会更高效，因为它不会立即加载整个模块，而是按需加载。但动态导入不能在循环里直接使用，得用 Promise 链处理。

六
Symbol 作为 key 还能和 Map 一起用，比如实现一个对象的动态 key 管理。比如，Symbol 是唯一的，可以作为 key 被存储在 Map 里，这样对象的 key 就不会被意外覆盖。
```javascript
const key = Symbol('key');
const map = new Map();
map.set(key, 'value');
console.log(map.get(key)); // 输出 value
```
这种写法适合在需要大量 key 的场景，比如状态机或者数据结构优化。但 Symbol 不能直接作为 Map 的 key，得用 Symbol() 生成，或者用字符串代替。如果用字符串，可能会有冲突，但 Symbol 保证唯一性，所以更安全。

七
函数的 rest 参数和 spread 运算符是 ES6 的高级特性，能简化参数处理。比如，用 rest 参数接收不定数量的参数，然后用 spread 扩展它们。
```javascript
function sum(...args) {
return args.reduce((a, b) => a + b, 0);
}
const result = sum(1, 2, 3, 4); // 输出 10
```
这种写法在处理数组和对象时特别方便。比如，合并对象可以用 spread：
```javascript
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 }; // 输出 {a:1, b:2}
```
但要注意，如果对象有嵌套结构，spread 不会递归合并，得用 Object.assign 或者其他方法。另外，rest 参数只能出现在函数最后，不能和其他参数混用，否则会报错。

八
Generator 函数在异步编程中很有用，比如配合 async/await 实现更线性的代码。但如果你用的是新的 Promise API，Generator 已经不是必须的了。
```javascript
function fetchData() {
const data = yield fetch('url');
return data;
}
const generator = fetchData();
generator.next().value.then(res => console.log(res));
```
这种方式能避免回调地狱，但需要处理 yield 返回的 Promise。如果你在用 Node.js 或浏览器端，可以考虑使用 async/await 替代 Generator。另外，Generator 函数在处理大量数据时，能节省内存，因为它不会一次性加载所有数据，而是按需生成。

九
Proxy 的 apply 陷阱可以拦截函数调用，比如限制参数类型或者记录调用日志。
```javascript
const handler = {
apply: (target, thisArg, argumentsList) => {
console.log('函数被调用了', argumentsList);
return target.apply(thisArg, argumentsList);
}
};
const proxy = new Proxy(function(x) { return x 2; }, handler);
proxy(3); // 输出 函数被调用了 [3]，返回 6
```
这种写法适合做函数权限控制，比如只允许特定类型的参数调用。但要注意，apply 陷阱只能拦截函数调用，不能拦截 new 操作符，那要用 construct 陷阱。如果对象是 null 或 undefined，apply 陷阱会报错，所以得检查。

十
WeakMap 在 Node.js 中常用于缓存，比如缓存数据库连接或者组件实例。比如，你用 WeakMap 存储每个用户的 session 数据，当用户对象被销毁后，session 会自动释放。
```javascript
const sessionMap = new WeakMap();
const user = { id: 1 };
sessionMap.set(user, { token: 'abc123' });
console.log(sessionMap.get(user)); // 输出 {token: 'abc123'}
```
这种方式能避免内存泄漏，但要记住，WeakMap 不能用 for...in 遍历，也不能用 Object.keys，得用 get 和 has 方法。如果你在做数据驱动的 UI 或组件池，WeakMap 能帮你管理资源。

十一
Symbol 在 TypeScript 中表现不同，它会作为类型来使用，不能直接赋值给变量。比如，Symbol 作为 key，TypeScript 能识别它的唯一性，但如果你用 Symbol() 生成的 key，类型系统不会报错。
```javascript
const key = Symbol('key');
const obj: { [key: string]: any } = { [key]: 'value' };
console.log(obj[key]); // 输出 value
```
这种写法在 TypeScript 中比较少见，但如果你需要强类型和唯一性，可以试试。不过，Symbol 在 TypeScript 中不能被直接序列化，比如 JSON.stringify 会忽略掉 Symbol 类型，所以要小心。

十二
Reflect 的 set 方法和 Proxy 的 set 陷阱类似，但更简洁。比如，你可以在 set 陷阱里做属性验证，防止非法值被赋值。
```javascript
const handler = {
set: (obj, prop, value) => {
if (prop === 'age' && typeof value !== 'number') return false;
obj[prop] = value;
return true;
}
};
const obj = new Proxy({}, handler);
obj.age = '18'; // 返回 false，不会修改对象
```
这种方式比直接在 set 里判断更优雅，而且还能避免直接操作对象的属性，减少副作用。但 Reflect 本身不提供修改对象的 API，得通过 Proxy 的 set 陷阱来实现。

十三
async 函数在处理异步操作时，比 Promise 链更简洁。比如，用 await 代替 then，代码更易读。
```javascript
async function getData() {
const response = await fetch('url');
const data = await response.json();
return data;
}
```
这种写法在 Node.js 14+ 以及现代浏览器里都是支持的。但如果你在用旧版本，只能用 Promise 链。另外，async 函数返回的 Promise 会自动包装，比如你调用 async 函数，不管它是否抛出错误，都会返回一个 Promise，所以需要 try/catch 处理异常。这种写法能避免回调地狱，但不能替代 Promise，只是让代码更线性。

十四
Proxy 的 construct 陷阱能拦截 new 操作符，比如限制某些类的实例化。
```javascript
const handler = {
construct: (target, args) => {
if (args.length === 0) throw new Error('必须传参数');
return new target(...args);
}
};
const proxy = new Proxy(Function, handler);
const instance = new proxy('Hello'); // 正常执行
const invalid = new proxy(); // 报错：必须传参数
```
这种方式能控制对象的创建，适合做权限校验或者限制某些接口的调用。但要注意，construct 陷阱不能直接返回对象，必须用 new target 创建实例。如果你在做插件系统，这种写法能阻止非法的实例化行为。

十五
Symbol 的使用场景很多，比如在类中定义私有方法或属性，但不能用 Symbol 作为函数名。
```javascript
class MyClass {
[Symbol('privateMethod')]() {
console.log('私有方法');
}
}
const obj = new MyClass();
obj[Symbol('privateMethod')](); // 输出 私有方法
```
这种方式在现代 JS 引擎中支持，但如果你在用旧环境，可能需要 polyfill。Symbol 在类中作为私有方法时，只能通过 obj[Symbol('privateMethod')]() 调用，不能通过 obj.privateMethod()，所以能防止外部访问。但 Symbol 的 key 不能被枚举，所以要小心使用。

十六
Reflect 的 getPrototypeOf 方法能获取对象的原型，相比 Object.getPrototypeOf 更统一。
```javascript
const obj = { name: 'Alice' };
const proto = Reflect.getPrototypeOf(obj);
console.log(proto === Object.prototype); // 输出 true
```
这种方式能避免兼容性问题，比如在某些旧浏览器中，Object.getPrototypeOf 可能不被支持。Reflect 的 API 更统一，适合做工具函数。比如，你可以用 Reflect.getPrototypeOf 来判断对象是否是某个类的实例。

十七
WeakSet 适合存储对象的集合，比如跟踪用户登录状态。
```javascript
const weakSet = new WeakSet();
const user = { id: 1 };
weakSet.add(user);
console.log(weakSet.has(user)); // 输出 true
```
这种方式能避免内存泄漏，因为当对象被回收后，WeakSet 会自动清理。但 WeakSet 不能像 Set 一样遍历，只能用 has 和 delete 方法。如果你在做用户状态跟踪，WeakSet 是个好选择，但要记住它不支持迭代。

十八
函数的默认参数和解构赋值能简化代码，比如处理未传参数的情况。
```javascript
function sum(a = 0, b = 0) {
return a + b;
}
console.log(sum()); // 输出 0
```
这种写法在 ES6 中支持，能减少 null 检查。但如果参数是对象，要小心解构。比如：
```javascript
function getUser({ name, age } = {}) {
console.log(name, age);
}
getUser(); // 输出 undefined undefined
```
这种写法能避免 undefined 错误，但要注意对象解构时的默认值设置。

十九
Symbol 可以和 JSON.stringify 一起用，但会被忽略。如果想序列化 Symbol，得自己处理。
```javascript
const key = Symbol('key');
const obj = { [key]: 'value' };
console.log(JSON.stringify(obj)); // 输出 {}
```
这种写法在处理数据传输时要小心，因为 Symbol 无法被序列化，容易导致数据丢失。如果你需要序列化，可以换用字符串或者用 Map 来存储。

二十
使用 Proxy 时，要考虑到它的性能开销，比如在高频访问的场景下，Proxy 可能会比直接访问对象慢 10% 到 15%。但是在低频访问的场景，比如数据校验、权限控制，这种开销可以忽略。
```javascript
const handler = {
get: (obj, prop) => {
return obj[prop];
}
};
const proxy = new Proxy({ name: 'Alice' }, handler);
console.log(proxy.name); // 直接访问，性能接近原生
```
如果数据是静态的，不建议用 Proxy，因为每次访问都要经过拦截。但如果数据动态变化，Proxy 能更好地控制访问行为。总之，用 Proxy 要权衡性能和功能需求，不能一概而论。