JavaScript管道运算符提案，目前是第 1 阶段提案，将向 JavaScript 添加一个新运算符。这个新的运算符将作为语法糖来扩展并使链式函数更具可读性。

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

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

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

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

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

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

或者以更易读的方式格式化，如下所示：

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

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

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

多次递归函数调用，最里面的函数先被调用，也就是说调用的写法需要从最后一个函数调用到第一个函数调用，这样思考和写法可能有点倒退代码。使用管道运算符，将写入的顺序颠倒，首先添加第一个函数调用。

今天使用管道操作符

由于该提案仍处于早期阶段，您将无法在当前浏览器中找到任何支持。我们可以利用Babel使我们今天能够使用它，并且已经转译了适用于所有浏览器的代码。

要开始使用，请确保您在机器上安装了 Node.js。

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

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

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

初始化 Babel

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

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

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

$ touch .babelrc

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

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

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

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

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

$ yarn start

在您工作时不要停止此脚本，它处于监视模式，因此在您更改文件时它将继续执行其工作。只需打开另一个控制台选项卡即可运行输出的 JavaScript 文件 ( pipeline.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 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

代码看起来有点混乱，对吧？现在让我们看看管道操作符会是什么样子：

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

运行代码：

$ node pipeline.js

如您所见，使用函数参数同样容易。

参数

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

这只是一个箭头函数。它的第一个参数是我们要处理的内容，'WORLD'在我们的例子中是字符串。

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

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

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

结论

我希望这篇文章对你有用。请记住，这只是语法糖。使用与否取决于您。如果您喜欢这篇文章，请订阅以接收更多很酷的文章。