JavaScript pipeline operator proposal,目前是一个 Stage 1的建议,将为JavaScript添加一个新的操作员。
为了示范,让我们从一个简单的例子开始,而不使用管道运营商:
1// assume that `withHello`, `withWave` and `capitalize` are available
2let greeting = withHello(withWave(capitalize('alligator')))
3
4console.log(greeting) // Hello, Alligator 👋
现在,使用相同的例子,但使用拟议的管道运营商:
1let greeting = 'alligator' |> capitalize |> withWave |> withHello
2
3console.log(greeting) // Hello, Alligator 👋
或者以更易于阅读的方式格式化:
1let greeting = 'alligator'
2 |> capitalize
3 |> withWave
4 |> withHello
5
6console.log(greeting) // Hello, Alligator 👋
正如你所看到的,管道操作员可以真正帮助使代码更加清晰和可读,最终更易于维护。
在多个回归函数呼叫中,最内在的函数被称为第一个,这意味着呼叫的编写顺序需要从最后一个函数呼叫到第一个,这可能是一种反向的方式来思考和编写代码。
今天使用管道运营商
由于这个提议还处于很早的阶段,你不会在当前的浏览器中找到任何支持,我们可以使用 Babel来允许我们今天使用它,并且已经转载了在所有浏览器中工作的代码。
要开始,请确保您已在计算机上安装了 Node.js。
让我们创建一个新的文件夹并启动一个新的项目:
1$ mkdir pipeline-operator
2$ cd !$
3$ yarn init -y
4$ touch index.js
<$>[注] 在 bash !$ 中,是指最后一个命令的最后一个参数。
巴比伦的起点
现在让我们为我们的项目安装 Babel dev 依赖:
1$ yarn add -D @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator
在项目目录中创建一个名为 `.babelrc’的新文件:
1$ touch .babelrc
复制并粘贴以下设置到 .babelrc:
1{
2 "plugins":[
3 [
4 "@babel/plugin-proposal-pipeline-operator",
5 {
6 "proposal":"minimal"
7 }
8 ]
9 ]
10}
将一个开始脚本添加到项目的 package.json文件中,该文件将运行babel:
1"scripts": {
2 "start": "babel index.js --out-file pipeline.js --watch"
3}
开始使用 Babel 使用我们的新的开始脚本:
1$ yarn start
<$>[注意]在你工作时不要停止此脚本,它处于观看模式,所以当你更改文件时它会继续工作。
就这样,我们现在已经准备好在我们的代码中使用管道操作员了!
使用
首先,让我们创建一些帮助函数来工作:
1[label index.js]
2function withPrefix(string, prefix = "Hello, ") {
3 return prefix + string;
4};
5
6function withSuffix(string, suffix = "It's me!") {
7 return string + suffix;
8}
9
10function capitalize(string) {
11 return string[0].toUpperCase() + string.substr(1);
12}
13
14function lowerCase(string) {
15 return string.toLowerCase();
16}
让我们看看如果没有管道运营商,我们会如何使用它们:
1[label index.js]
2let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD'))))
3
4console.log(greeting) // Hello, world it's me!
5
6// With arguments
7
8let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')), '. We love you <3'), 'Hi there, ')
9
10console.log(greeting) // Hi there, world. we love you <3
代码看起来有点困惑,对吗?现在让我们看看管道运营商会是什么样子:
1[label index.js]
2let greeting = 'WORLD'
3 |> capitalize
4 |> lowerCase
5 |> withSuffix
6 |> withPrefix
7
8console.log(greeting) // Hello, world it's me!
9
10// With arguments
11
12let greeting = 'WORLD'
13 |> capitalize
14 |> lowerCase
15 |> (str => withSuffix(str, '. We love you <3'))
16 |> (str => withPrefix(str, 'Hi there, '))
17
18console.log(greeting) // Hi there, world. we love you <3
运行代码与:
1$ node pipeline.js
正如你所看到的,它与函数参数一样容易使用。
论点
1// ...
2|> (str => withPrefix(str, 'Hi there, '))
它的第一个论点是我们正在试图处理的,在我们的例子中是字符串WORLD。
您甚至可以使用嵌入式方法:
1[label index.js]
2let greetingArray = 'WORLD'
3 |> withPrefix
4 |> (str => str.toLowerCase())
5 |> capitalize
6 |> (str => str.split(''))
7
8console.log(greetingArray) // => ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d"]
结论
我希望这篇文章对你有用。记住,这只是语法糖,你可以使用它还是不使用它。