未来的 Javascript：Javascript 管道运算符

YantraJS

NuGet

文档

讨论

特别感谢

管道运算符是 JavaScript 即将推出的一项功能，它为我们提供了另一种通过一系列转换传递值的方式。它为开发人员在编写代码时想要实现的目标提供了更清晰的上下文，并允许我们实现一些更酷炫的功能。在这里，我们将快速了解管道运算符、它们的工作原理以及如何立即使用它们。

JavaScript 管道运算符：支持

目前，没有浏览器或服务器端 ECMAScript 实现（例如 Node.JS）支持管道操作符。不过，您可以使用 Babel 7.15 来使其工作。您可以在此处了解有关安装 Babel 的更多信息，但可以说，这将允许您在代码中添加管道操作符。

JavaScript 管道运算符：它们的工作原理

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

// Adds 1 to a number
let addOne = function(x) {
    return x + 1;
}

// Multiplies a number by 2
let multiplyByTwo = function(x) {
    return x * 2;
}

// Divides a number by 6
let divideBySix = function(x) {
    return x / 6;
}

如果我们想将所有这些函数应用到我们拥有的数字上，我们今天可能会做这样的事情：

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

console.log(calculate); // Returns 3.

虽然这样可行，但当使用多个函数时，可能会变得相当混乱，而且通常需要写很多行。因此，我们可以使用管道运算符来简化上述代码，如下所示：

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

console.log(calculate); // Returns 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('&') |> `?${%}`;

// Returns ?x=10245&linkId=eojff-efekv-ef0kw&author=john-smith&featured=false
console.log(getURLQuery);

关于 JavaScript 管道运算符的总结

由于管道操作符尚未得到广泛支持，因此您只能在安装了 Babel 的情况下使用此功能。话虽如此，管道操作符会为您的代码添加大量上下文，并简化操作，以便您以后进行扩展。因此，不妨尝试一下 Babel，将其融入您的代码库中。如果您想阅读完整的管道操作符规范，请点击此处。