未来的 Javascript：Javascript 管道运算符

Posted on by

管道运算符(Pipeline operators)是 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 将其添加到您的代码库中。如果您想阅读完整的管道运算符规范，请单击此处。

推荐阅读：