新 JavaScript 管道操作符:将任何内容转化为单行代码

文化   2024-11-14 08:35   中国香港  

在传统写法中,代码常常是这样的:

使用管道操作符后,可以写成:

这种写法干净利落,彻底告别临时变量,也不用再为命名伤脑筋。

现有解决方案的问题

1. 重用变量

应尽量避免使用冗长的变量,这比重复使用短名变量更有利于压缩代码:

这种写法存在几个问题:

  • 变量值不可预测
  • 需要追溯赋值历史
  • 代码可读性差
  • 难以维护

与管道运算符不同的是,我们无法确定变量是否总是包含我们在任何给定点上设置的值;我们需要爬升作用域来查找重新赋值。我们本可以在代码的较早处使用_,但它在代码各处的值是无法保证的。

现在我们使用的只是下划线,所以如果不查看这些重赋值的右侧,你就无法快速知道变量的类型,除非你有一个像 VS Code 这样的智能编辑器(不过我想你可以说这并不重要,因为它们应该是 "临时 "的--至少在它们不是之前是这样!)

那我们为什么不避开这些临时下划线呢?

2. 嵌套调用

这种写法:

  • 阅读顺序不直观
  • 难以修改和调试
  • 容易出错

管道运算符大大优于其他所有方法,它既能让我们摆脱临时变量的困扰,又具有可读性。它就是为此而设计的。

这里的%只存在于这一特定管道中。

3. 链式调用的局限

链式调用虽好,但有局限:

  • 必须对象支持链式设计
  • 不支持生成器和异步操作
  • 不能混用普通函数

对于对象外的生成器方法、异步/等待和函数/方法调用,它的效果并不好:

但所有这些和更多的功能都需要管道操作符,甚至对象字面和asyncimport函数。

立即使用管道操作符

通过 Babel 插件可以现在就使用这个特性:

npm install @babel/plugin-proposal-pipeline-operator

配置文件:

{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { 
      "proposal""hack" 
    }]
  ]
}


管道操作符让代码更加清晰直观,是 JavaScript 代码优化的一大利器。虽然目前还在提案阶段,但通过 Babel 已经可以尝鲜,值得在项目中尝试使用!🎉


最后:
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读

大迁世界
掘金LV8,思否10万+的作者。一个热爱前端的创业者。
 最新文章