JavaScript?管道運算符及工作原理

更新時間：2023年05月20日 09:30:37 作者：火焰兔

這篇文章主要介紹了JavaScript?管道運算符,管道運算符為我們的代碼添加了大量上下文，并簡化了操作，以便以后可以擴展它們，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

JavaScript 管道運算符

管道運算符是 Javascript 即將推出的功能，它為我們提供了另一種通過一系列轉換傳遞值的方法。它為開發(fā)人員在編寫代碼時試圖實現(xiàn)的目標提供了更多上下文，并允許我們做一些很酷的事情。在這里，我們將快速了解管道運算符工作方式以及我們現(xiàn)在如何使用它們。

Javascript 管道運算符的支持

目前，沒有瀏覽器或服務器端 ECMAScript 實現(xiàn)（如 Node.JS）支持管道運算符。但是，我們可以使用 Babel 7.15 讓它們工作。可以說這將允許我們將管道運算符添加到我們的代碼中。

Javascript 管道運算符的工作原理

管道運算符只是在 Javascript 中操作值的另一種方式。管道運算符是 |>。假設我們有 3 個將數(shù)字添加到輸入值的數(shù)學函數(shù)：

// 加 1
let addOne = function(x) {
    return x + 1;
}
// 乘 2
let multiplyByTwo = function(x) {
    return x * 2;
}
// 除 6
let divideBySix = function(x) {
    return x / 6;
}

如果我們想將所有這些函數(shù)應用于我們擁有的數(shù)字，我們現(xiàn)在可能會這樣做：

let number = 6;
let calculate = addOne(multiplyByTwo(divideBySix(number)));
console.log(calculate); // 返回 3.

雖然這可行，但當使用多個函數(shù)時，這可能會變得非?；靵y – 并且通常會占用很多行。因此，我們可以使用這樣的管道運算符簡化上述操作：

let number = 6;
let calculate = number |> divideBySix(%) |> multiplyByTwo(%) |> addOne(%);
console.log(calculate); // 返回 3.

如我們所見，這簡化了數(shù)字和值的處理，以便我們可以清楚地看到正在發(fā)生的事情。讓我們分解一下我們所做的：

首先，我們使用數(shù)字，并使用管道運算符將其傳遞給 divideBySix() 。我們使用 % 來表示管道運算符之前的值，在這種情況下，6 在我們的數(shù)字變量中。
然后我們將數(shù)字從 divideBySix() 傳遞給 multiplyByTwo() 。同樣，我們使用 % 來表示前一個操作的結果，即 divideBySix() 函數(shù)的值。
最后，我們再次執(zhí)行此操作并將 addOne() 添加到我們的值中。結果是一樣的，所以最后還是得到了3。

使用管道運算符簡化對象映射

顯然上面的例子是一個非常簡單的應用程序，但是我們也可以使用管道操作符來做一些更酷的事情，比如以更連貫的方式映射數(shù)組。例如，下面是一個 URL 查詢對象，并將它們合并為一個文本字符串，該字符串可以添加到 URL 的末尾：

let URLParams = {
    'x' : '10245',
    'linkId': 'eojff-efekv-ef0kw',
    'author' : 'john-smith',
    'featured' : false
}
let getURLQuery = Object.keys(URLParams).map((key) => `${key}=${URLParams[key]}`) |> %.join('&') |> `?${%}`;
// 返回 ?x=10245&linkId=eojff-efekv-ef0kw&author=john-smith&featured=false
console.log(getURLQuery);