当前位置：首页 > 文章列表 > 文章 > 前端 > 每个开发人员都应该了解的高级 JavaScript 概念

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

来源：dev.to 2024-09-25 17:49:05 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

有志者，事竟成！如果你在学习文章，那么本文《每个开发人员都应该了解的高级 JavaScript 概念》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

javascript 是许多开发人员日常使用的语言，但其生态系统中存在许多隐藏的瑰宝，即使是经验丰富的开发人员也可能不熟悉。本文探讨了一些鲜为人知的 javascript 概念，它们可以显着提高您的编程技能。我们将介绍诸如代理、符号、生成器 等概念，并通过示例演示每个概念并解决问题以说明其强大功能。

最后，您将对 javascript 有更深入的了解，并知道何时（何时不）使用这些高级功能。

1. 代理

什么是代理？

javascript 中的代理允许您拦截和自定义基本操作，例如属性查找、赋值和函数调用。

问题：想象一下，您正在构建一个系统，其中用户拥有跟踪其操作的对象。您可以使用代理来拦截并记录这些操作，而不是修改应用程序的每个部分来跟踪属性访问。

示例：

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. 标记模板文字

什么是标记模板文字？

标记模板允许您使用函数处理模板文字，这使得它们对于构建 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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

const userinput = "<script>alert('xss')</script>";
const output = safehtml`user said: ${userinput}`;
console.log(output); // user said: &lt;script&gt;alert('xss')&lt;/script&gt;

优点：

允许对字符串插值进行精细控制。
非常适合构建需要字符串解析或转换（例如 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

优点：