在傳統寫法中，代碼常常是這樣的：

圖片

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

圖片

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

現有解決方案的問題

1. 重用變量

應盡量避免使用冗長的變量，這比重復使用短名變量更有利于壓縮代碼：

圖片

這種寫法存在幾個問題：

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

與管道運算符不同的是，我們無法確定變量是否總是包含我們在任何給定點上設置的值；我們需要爬升作用域來查找重新賦值。我們本可以在代碼的較早處使用_，但它在代碼各處的值是無法保證的。

圖片

現在我們使用的只是下劃線，所以如果不查看這些重賦值的右側，你就無法快速知道變量的類型，除非你有一個像 VS Code 這樣的智能編輯器（不過我想你可以說這并不重要，因為它們應該是 "臨時 "的--至少在它們不是之前是這樣！）

那我們為什么不避開這些臨時下劃線呢？

2. 嵌套調用

圖片

這種寫法：

• 閱讀順序不直觀
• 難以修改和調試
• 容易出錯

管道運算符大大優于其他所有方法，它既能讓我們擺脫臨時變量的困擾，又具有可讀性。它就是為此而設計的。

圖片

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

3. 鏈式調用的局限

圖片

鏈式調用雖好，但有局限：

• 必須對象支持鏈式設計
• 不支持生成器和異步操作
• 不能混用普通函數

對于對象外的生成器方法、異步/等待和函數/方法調用，它的效果并不好:

圖片

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

圖片

立即使用管道操作符

通過 Babel 插件可以現在就使用這個特性：

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

配置文件：

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

圖片

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