浏览JavaScript管道运算符提案

The JavaScript pipeline operator proposal, which is currently a Stage 1 proposal, would add a new operator to JavaScript. This new operator would would act as syntax sugar to extend and make chained function more readable.

JavaScript 管道运算符提议 (当前是第1阶段提议)将向JavaScript添加新的运算符。 这个新的运算符将充当语法糖来扩展和使链接的函数更具可读性。

To demonstrate, let’s start with a simple example without the use of the pipeline operator:

为了演示，让我们从不使用管道运算符的简单示例开始：

// assume that `withHello`, `withWave` and `capitalize` are available
let greeting = withHello(withWave(capitalize('alligator')))

console.log(greeting) // Hello, Alligator 👋

Now the same example, but using the proposed pipeline operator:

现在是相同的示例，但是使用建议的管道运算符：

let greeting = 'alligator' |> capitalize |> withWave |> withHello

console.log(greeting) // Hello, Alligator 👋

Or formatted in a more readable way like so:

或以更具可读性的方式进行格式化，如下所示：

let greeting = 'alligator' 
  |> capitalize 
  |> withWave 
  |> withHello

console.log(greeting) // Hello, Alligator 👋

As you can see, the pipeline operator can really help make the code more clear and readable, and ultimately more maintainable.

如您所见，管道运算符可以真正帮助使代码更清晰易读，并最终更易于维护。

With multiple recursive function calls, the innermost function is called first, which means that the order in which the calls are written needs to be from the last function call to the first, which can be a bit of a backwards way to think about and write code. With the pipeline operator, the written order is reversed and the first function call is added first.

对于多个递归函数调用，最内部的函数首先被调用，这意味着调用的编写顺序必须是从最后一个函数调用到第一个函数调用，这可能是思考和编写的一种倒退方式码。 使用管道运算符，可以颠倒书面顺序，并首先添加第一个函数调用。

立即使用管道运算符 (Using the Pipeline Operator Today)

As this proposal is still very early stage, you won’t find any support in current browsers. We can make use of Babel to allow us to use it today, and have transpiled code that works in all browsers.

由于该建议还处于初期阶段，因此在当前的浏览器中找不到任何支持。 我们可以利用Babel允许我们今天使用它，并且可以编译适用于所有浏览器的代码。

To get started make sure that you installed Node.js on your machine.

首先，请确保已在计算机上安装了Node.js。

Let’s create a new folder and initialize a new project:

让我们创建一个新文件夹并初始化一个新项目：

$ mkdir pipeline-operator
$ cd !$ 
$ yarn init -y
$ touch index.js

In bash !$ means the last argument of the last command.

在bash中， !$表示最后一个命令的最后一个参数。

初始化Babel (Initialize Babel)

Now let’s install the Babel dev dependency for our project:

现在让我们为项目安装Babel dev依赖项：

$ yarn add -D @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator

Create a new file called .babelrc in the project directory:

在项目目录中创建一个名为.babelrc的新文件：

$ touch .babelrc

Copy and paste the following settings into .babelrc:

将以下设置复制并粘贴到.babelrc ：

{
  "plugins":[
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal":"minimal"
      }
    ]
  ]
}

Add a start script into the project’s package.json file, which will run babel:

将start脚本添加到项目的package.json文件中，该脚本将运行babel ：

"scripts": {
  "start": "babel index.js --out-file pipeline.js --watch"
}

Start using Babel with the use of our new start script:

使用我们的新start脚本开始使用Babel：

$ yarn start

Don’t stop this script while you’re working, it’s in watch mode so it’ll continue doing its job as you change the file. Instead just open another console tab to run the outputted JavaScript file (pipeline.js).

在工作时不要停止此脚本，因为它处于监视模式，因此它将在更改文件时继续执行其工作。 相反，只需打开另一个控制台选项卡以运行输出JavaScript文件( pipeline.js )。

And that’s it, we’re now ready to use the pipeline operator in our code! 🎉

就是这样，我们现在准备在代码中使用管道运算符！ 🎉

用法 (Usage)

Let’s first create some helper functions to work with:

让我们首先创建一些辅助函数来使用：

index.js

index.js

function withPrefix(string, prefix = "Hello, ") {
  return prefix + string;
};

function withSuffix(string, suffix = "It's me!") {
  return string + suffix;
}

function capitalize(string) {
  return string[0].toUpperCase() + string.substr(1);
}

function lowerCase(string) {
  return string.toLowerCase();
}

Let’s see how we would use them without the pipeline operator:

让我们看看在没有管道运算符的情况下如何使用它们：

index.js

index.js

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD'))))

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')), '. We love you <3'), 'Hi there, ')

console.log(greeting) // Hi there, world. we love you <3

The code looks a tad confusing, right? Let’s now look at what it would look like with the pipeline operator:

代码看起来有点混乱，对吧？ 现在让我们看一下管道运算符的外观：

index.js

index.js

let greeting = 'WORLD' 
  |> capitalize
  |> lowerCase 
  |> withSuffix 
  |> withPrefix 

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = 'WORLD'
  |> capitalize
  |> lowerCase
  |> (str => withSuffix(str, '. We love you <3'))
  |> (str => withPrefix(str, 'Hi there, '))

console.log(greeting) // Hi there, world. we love you <3

Run the code with:

使用以下代码运行代码：

$ node pipeline.js

As you can see, it’s just as easy to use with function arguments.

如您所见，函数参数也很容易使用。

争论 (Arguments)

// ...
|> (str => withPrefix(str, 'Hi there, '))

It’s just an arrow function. It’s first argument is what we are trying to process, the string 'WORLD' in our case.

这只是一个箭头功能。 第一个参数是我们要处理的内容，本例中为字符串'WORLD' 。

You can even use built-in methods:

您甚至可以使用内置方法：

index.js

index.js

let greetingArray = 'WORLD' 
  |> withPrefix
  |> (str => str.toLowerCase()) 
  |> capitalize
  |> (str => str.split(''))

console.log(greetingArray) // => ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d"]

结论 (Conclusion)

I hope that this article was useful for you. Remember that it’s just syntax sugar. It’s up to you to use it or not. If you enjoy this article, subscribe to receive more cool articles.

希望本文对您有所帮助。 请记住， 这只是语法糖。 是否使用它取决于您。 如果您喜欢本文，请订阅以接收更多精彩文章。

翻译自: https://www.digitalocean.com/community/tutorials/js-pipeline-operator