javascript 是许多开发人员日常使用的语言，但其生态系统中存在许多隐藏的瑰宝，即使是经验丰富的开发人员也可能不熟悉。本文探讨了一些鲜为人知的 javascript 概念，它们可以显着提高您的编程技能。我们将介绍诸如 代理、符号、生成器 等概念，并通过示例演示每个概念并解决问题以说明其强大功能。
最后，您将对 javascript 有更深入的了解，并知道何时（何时不）使用这些高级功能。
1. 代理
什么是代理？
javascript 中的代理允许您拦截和自定义基本操作，例如属性查找、赋值和函数调用。
立即学习“Java免费学习笔记（深入）”；
问题：想象一下，您正在构建一个系统，其中用户拥有跟踪其操作的对象。您可以使用代理来拦截并记录这些操作，而不是修改应用程序的每个部分来跟踪属性访问。
示例：
const user = {
name: "alice",
age: 25
};
const handler = {
get(target, prop) {
console.log(`property '${prop}' was accessed`);
return prop in target ? target[prop] : `property ${prop} doesn't exist`;
},
};
const userproxy = new proxy(user, handler);
console.log(userproxy.name); // logs: property 'name' was accessed, returns: alice
console.log(userproxy.address); // logs: property 'address' was accessed, returns: property address doesn't exist
优点：
- 允许您处理和拦截几乎所有与对象的交互。
- 非常适合日志记录、验证和动态行为。
缺点：
- 如果过度使用，可能会带来性能开销。
- 由于逻辑和对象行为之间存在抽象层，调试起来更加困难。
2. 符号
什么是符号？
符号是 es6 中引入的一种新的原始类型。它们为对象属性提供唯一的键，当您需要避免属性名称冲突时，它们非常有用。
问题： 假设您正在开发一个与第三方代码集成的对象，并且您想要添加自定义属性而不覆盖其键。
示例：
const uniqueid = symbol('id');
const user = {
[uniqueid]: 123,
name: "alice"
};
console.log(user[uniqueid]); // 123
console.log(object.keys(user)); // ['name'] - symbol key is hidden from iteration
优点：
- 符号是唯一的，即使它们具有相同的描述。
- 防止意外的属性覆盖，使其非常适合在库或 api 设计中使用。
缺点：
- 符号是不可枚举的，这可能会使调试或迭代稍微复杂一些。
- 如果过度使用会降低代码可读性。
3. 生成器函数
什么是生成器？
生成器是可以暂停和恢复的函数，这使得它们对于管理异步流或按需生成数据非常有用。
问题：假设你想生成一个斐波那契数列。您可以创建一个生成器来逐一生成值，从而允许延迟计算，而不是预先生成整个序列。
示例：
function* fibonacci() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
优点：
- 可以有效地生成序列，一次只需要几个值。
- 与yield一起使用时允许更清晰的异步流程。
缺点：
- 不像 promise 或 async/await 那样常用，因此它们的学习曲线更陡峭。
- 如果过度使用可能会导致复杂的代码。
4. 标记模板文字
什么是标记模板文字？
系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统，并可集合系统强大的新闻、产品、下载、人才、留言、搜索引擎优化、等功能模块，为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统，自动阻止恶意访问和攻击；安全检查应用于每一处代码中，每个提交到系统查询语句中的变量都经过过滤，可自动屏蔽恶意攻击代码，从而全面防止SQL注入攻击
标记模板允许您使用函数处理模板文字，这使得它们对于构建 dsl（特定于领域的语言）（如 css-in-js 库）非常强大。
问题：您需要构建一个模板系统来处理用户输入并对其进行清理以避免 xss 攻击。
示例：
function safehtml(strings, ...values) {
return strings.reduce((acc, str, i) => acc + str + (values[i] ? escapehtml(values[i]) : ''), '');
}
function escapehtml(str) {
return str.replace(/&/g, "&").replace(//g, "youjiankuohaophpcn");
}
const userinput = "";
const output = safehtml`user said: ${userinput}`;
console.log(output); // user said: zuojiankuohaophpcnscriptyoujiankuohaophpcnalert('xss')zuojiankuohaophpcn/scriptyoujiankuohaophpcn
优点：
- 允许对字符串插值进行精细控制。
- 非常适合构建需要字符串解析或转换（例如 css、sql 查询）的库。
缺点：
- 通常不需要，除非使用特定的库或创建自己的库。
- 对于初学者来说可能难以理解和调试。
5. weakmap 和 weakset
什么是 weakmap 和 weakset？
weakmap 是键值对的集合，其中键是弱引用的。这意味着如果不存在对该键的其他引用，则该条目将被垃圾收集。
问题：您正在构建一个缓存系统，并且希望确保一旦不再需要对象，它们就会被自动垃圾收集以释放内存。
示例：
let user = { name: "alice" };
const weakcache = new weakmap();
weakcache.set(user, "cached data");
console.log(weakcache.get(user)); // cached data
user = null; // the entry in weakcache will be garbage collected
优点：
- 条目自动垃圾回收，防止内存泄漏。
- 非常适合在对象生命周期不确定的情况下进行缓存。
缺点：
- weakmap 不可枚举，这使得它们难以迭代。
- 仅限于作为键的对象。
6. 柯里化
什么是柯里化？
柯里化将采用多个参数的函数转换为每个采用单个参数的函数序列。这是一种可以提高代码灵活性的函数式编程技术。
问题： 假设您有一个基于百分比应用折扣的函数。您希望在整个应用程序中以不同的百分比重用此函数。
示例：
const applyDiscount = (discount) => (price) => price - price * (discount / 100); const tenPercentOff = applyDiscount(10); const twentyPercentOff = applyDiscount(20); console.log(tenPercentOff(100)); // 90 console.log(twentyPercentOff(100)); // 80
优点：
- 可以通过预应用参数使函数更具可重用性。
- 让您轻松创建部分应用程序。
缺点：
- 对于不熟悉函数式编程的开发人员来说不直观。
- 如果过度使用，可能会导致代码过于复杂。
结论
这些高级 javascript 概念中的每一个 - 代理、符号、生成器、标记模板文字、weakmap 和柯里化 - 都提供了独特的功能，可以以更高效、可扩展或更优雅的方式解决特定问题。然而，它们也需要权衡，例如复杂性增加或潜在的性能问题。
关键要点是了解何时何地使用这些概念。仅仅因为它们存在并不意味着您应该在每个项目中使用它们。相反，当它们提供明显的好处时，例如提高代码可读性、性能或灵活性，请合并它们。
通过探索这些先进技术，您将能够解决更复杂的问题并编写更强大的 javascript。
