快捷導(dǎo)航

JavaScript?管道運(yùn)算符及工作原理

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

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

JavaScript 管道運(yùn)算符

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

Javascript 管道運(yùn)算符的支持

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

Javascript 管道運(yùn)算符的工作原理

管道運(yùn)算符只是在 Javascript 中操作值的另一種方式。管道運(yùn)算符是 |>。假設(shè)我們有 3 個(gè)將數(shù)字添加到輸入值的數(shù)學(xué)函數(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ù)應(yīng)用于我們擁有的數(shù)字，我們現(xiàn)在可能會(huì)這樣做：

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

雖然這可行，但當(dāng)使用多個(gè)函數(shù)時(shí)，這可能會(huì)變得非常混亂 – 并且通常會(huì)占用很多行。因此，我們可以使用這樣的管道運(yùn)算符簡(jiǎn)化上述操作：

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

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

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

使用管道運(yùn)算符簡(jiǎn)化對(duì)象映射

顯然上面的例子是一個(gè)非常簡(jiǎn)單的應(yīng)用程序，但是我們也可以使用管道操作符來(lái)做一些更酷的事情，比如以更連貫的方式映射數(shù)組。例如，下面是一個(gè) URL 查詢對(duì)象，并將它們合并為一個(gè)文本字符串，該字符串可以添加到 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);