每个开发人员都应该了解的高级 JavaScript 概念

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签开发人员

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: aliceconsole.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]); // 123console.log(object.keys(user)); // ['name'] - symbol key is hidden from iteration

优点：

缺点：

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); // 0console.log(fib.next().value); // 1console.log(fib.next().value); // 1console.log(fib.next().value); // 2

优点：

缺点：

4. 标记模板文字

什么是标记模板文字？

标记模板允许您使用函数处理模板文字，这使得它们对于构建 dsl（特定于领域的语言）（如 css-in-js 库）非常强大。

问题：您需要构建一个模板系统来处理用户输入并对其进行清理以避免 xss 攻击。

示例：

function safehtml(strings, ...values) {  return strings.reduce((acc, str, i) =&gt; acc + str + (values[i] ? escapehtml(values[i]) : ''), '');}function escapehtml(str) {  return str.replace(/&amp;/g, "&amp;").replace(/, "/g, "&gt;");}const userinput = "<script>alert('xss')</script>";const output = safehtml`user said: ${userinput}`;console.log(output); // user said: <script>alert('xss')</script>

优点：

缺点：

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 datauser = null; // the entry in weakcache will be garbage collected

优点：

缺点：

6. 柯里化

什么是柯里化？

柯里化将采用多个参数的函数转换为每个采用单个参数的函数序列。这是一种可以提高代码灵活性的函数式编程技术。

问题： 假设您有一个基于百分比应用折扣的函数。您希望在整个应用程序中以不同的百分比重用此函数。

示例：

const applyDiscount = (discount) =&gt; (price) =&gt; price - price * (discount / 100);const tenPercentOff = applyDiscount(10);const twentyPercentOff = applyDiscount(20);console.log(tenPercentOff(100)); // 90console.log(twentyPercentOff(100)); // 80

优点：

缺点：

结论

这些高级 javascript 概念中的每一个 - 代理、符号、生成器、标记模板文字、weakmap 和柯里化 - 都提供了独特的功能，可以以更高效、可扩展或更优雅的方式解决特定问题。然而，它们也需要权衡，例如复杂性增加或潜在的性能问题。

关键要点是了解何时何地使用这些概念。仅仅因为它们存在并不意味着您应该在每个项目中使用它们。相反，当它们提供明显的好处时，例如提高代码可读性、性能或灵活性，请合并它们。

通过探索这些先进技术，您将能够解决更复杂的问题并编写更强大的 javascript。

文章推荐

每个开发人员都应该了解的高级 JavaScript 概念

1. 代理

2. 符号

3. 生成器函数

4. 标记模板文字

5. weakmap 和 weakset

6. 柯里化

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？