在傳統(tǒng)寫法中，代碼常常是這樣的：

圖片

使用管道操作符后，可以寫成：

圖片

這種寫法干凈利落，徹底告別臨時(shí)變量，也不用再為命名傷腦筋。

現(xiàn)有解決方案的問題

1. 重用變量

應(yīng)盡量避免使用冗長的變量，這比重復(fù)使用短名變量更有利于壓縮代碼：

圖片

這種寫法存在幾個(gè)問題：

• 變量值不可預(yù)測
• 需要追溯賦值歷史
• 代碼可讀性差
• 難以維護(hù)

與管道運(yùn)算符不同的是，我們無法確定變量是否總是包含我們?cè)谌魏谓o定點(diǎn)上設(shè)置的值；我們需要爬升作用域來查找重新賦值。我們本可以在代碼的較早處使用_，但它在代碼各處的值是無法保證的。

圖片

現(xiàn)在我們使用的只是下劃線，所以如果不查看這些重賦值的右側(cè)，你就無法快速知道變量的類型，除非你有一個(gè)像 VS Code 這樣的智能編輯器（不過我想你可以說這并不重要，因?yàn)樗鼈儜?yīng)該是 "臨時(shí) "的--至少在它們不是之前是這樣?。?/p>

那我們?yōu)槭裁床槐荛_這些臨時(shí)下劃線呢？

2. 嵌套調(diào)用

圖片

這種寫法：

• 閱讀順序不直觀
• 難以修改和調(diào)試
• 容易出錯(cuò)

管道運(yùn)算符大大優(yōu)于其他所有方法，它既能讓我們擺脫臨時(shí)變量的困擾，又具有可讀性。它就是為此而設(shè)計(jì)的。

圖片

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

3. 鏈?zhǔn)秸{(diào)用的局限

圖片

鏈?zhǔn)秸{(diào)用雖好，但有局限：

• 必須對(duì)象支持鏈?zhǔn)皆O(shè)計(jì)
• 不支持生成器和異步操作
• 不能混用普通函數(shù)

對(duì)于對(duì)象外的生成器方法、異步/等待和函數(shù)/方法調(diào)用，它的效果并不好:

圖片

但所有這些和更多的功能都需要管道操作符，甚至對(duì)象字面和asyncimport函數(shù)。

圖片

立即使用管道操作符

通過 Babel 插件可以現(xiàn)在就使用這個(gè)特性：

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

配置文件：

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

圖片

管道操作符讓代碼更加清晰直觀，是 JavaScript 代碼優(yōu)化的一大利器。雖然目前還在提案階段，但通過 Babel 已經(jīng)可以嘗鮮，值得在項(xiàng)目中嘗試使用！