迹忆客 专注技术分享

管道运算符是 Javascript 即将推出的功能，它为我们提供了另一种通过一系列转换传递值的方法。 它为开发人员在编写代码时试图实现的目标提供了更多上下文，并允许我们做一些很酷的事情。 在这里，我们将快速了解管道运算符工作方式以及我们现在如何使用它们。

Javascript 管道运算符的支持

目前，没有浏览器或服务器端 ECMAScript 实现（如 Node.JS）支持管道运算符。 但是，我们可以使用 Babel 7.15 让它们工作。 可以说这将允许我们将管道运算符添加到我们的代码中。

Javascript 管道运算符的工作原理

管道运算符只是在 Javascript 中操作值的另一种方式。 管道运算符是 |>。 假设我们有 3 个将数字添加到输入值的数学函数：

// 加 1
let addOne = function(x) {
    return x + 1;
}

// 乘 2
let multiplyByTwo = function(x) {
    return x * 2;
}

// 除 6
let divideBySix = function(x) {
    return x / 6;
}

如果我们想将所有这些函数应用于我们拥有的数字，我们现在可能会这样做：

let number = 6;
let calculate = addOne(multiplyByTwo(divideBySix(number)));

console.log(calculate); // 返回 3.

虽然这可行，但当使用多个函数时，这可能会变得非常混乱 - 并且通常会占用很多行。 因此，我们可以使用这样的管道运算符简化上述操作：

let number = 6;
let calculate = number |> divideBySix(%) |> multiplyByTwo(%) |> addOne(%);

console.log(calculate); // 返回 3.

如我们所见，这简化了数字和值的处理，以便我们可以清楚地看到正在发生的事情。 让我们分解一下我们所做的：

• 首先，我们使用数字，并使用管道运算符将其传递给 divideBySix() 。 我们使用 % 来表示管道运算符之前的值，在这种情况下，6 在我们的数字变量中。
• 然后我们将数字从 divideBySix() 传递给 multiplyByTwo() 。 同样，我们使用 % 来表示前一个操作的结果，即 divideBySix() 函数的值。
• 最后，我们再次执行此操作并将 addOne() 添加到我们的值中。 结果是一样的，所以最后还是得到了3。

使用管道运算符简化对象映射

显然上面的例子是一个非常简单的应用程序，但是我们也可以使用管道操作符来做一些更酷的事情，比如以更连贯的方式映射数组。 例如，下面是一个 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);

关于 Javascript 管道运算符的结论

由于管道操作符没有得到广泛的支持，我们只能在安装了 Babel 的情况下使用这个特性。 话虽如此，管道运算符为我们的代码添加了大量上下文，并简化了操作，以便以后可以扩展它们。 因此，可能值得尝试将 Babel 放入我们的代码库中。