JavaScript管道语法提案

发表于 | 分类于

管道语法引入了一个 |> 类似于 F＃， OCaml， Elixir， Elm， Julia， Hack和LiveScript的新运算符，以及UNIX管道。它是一种向后兼容的方式，以可读，功能的方式简化链式函数调用，并提供了扩展内置原型的实用替代方法。

单个参数的函数调用

对于具有单个参数的函数调用，管道运算符本质上是一个有用的语法糖。换句话说，sqrt(64)相当于64 |> sqrt。

当将多个功能链接在一起时，这具有更好的可读性。例如，给定以下功能：

1
2
3
4
5
6
7
8
9
10
11
function doubleSay (str) {
  return str + ", " + str;
}

function capitalize (str) {
  return str[0].toUpperCase() + str.substring(1);
}

function exclaim (str) {
  return str + '!';
}

…以下调用是等效的：

1
2
3
4
5
6
7
8
let result = exclaim(capitalize(doubleSay('hello')));
// result => 'Hello, hello!'

let result = 'hello'
  |> doubleSay
  |> capitalize
  |> exclaim;
// result => 'Hello, hello!'

具有多个参数的函数

对于具有多个参数的函数，管道运算符不需要任何特殊规则; JavaScript已经有办法处理这种情况。

例如，给定以下功能：

1
2
3
4
5
6
7
8
9
10
11
function double (x) {
  return x + x;
}

function add (x, y) {
  return x + y;
}

function boundScore (min, max, score) {
  return Math.max(min, Math.min(max, score));
}

…您可以使用箭头函数来处理多参数函数（例如add）：

1
2
3
4
5
6
7
8
9
let person = {
  score: 25
}

let newScore = person.score
  |> double
  |> (_ => add(7, _))
  |> (_ => boundScore(0, 100, _));
// newScore => 57

相当于:

1
2
let newScore = boundScore( 0, 100, add(7, double(person.score)) );
// newScore => 57

注意：_不需要使用下划线; 它只是一个箭头功能，所以你可以使用你喜欢的任何参数名称。

正如您所看到的，因为管道运算符总是管道单个结果值，所以它与单参数箭头函数语法非常相似。此外，由于管道运算符的语义是纯粹而简单的，因此JavaScript引擎可以优化箭头函数。

构建工具

Babel管道支持插件：@babel/plugin-proposal-pipeline-operator

安装：

1
$ npm install @babel/plugin-proposal-pipeline-operator

配置.babelrc插件选项：

1
2
3
4
5
6
7
8
9
10
{
  "plugins": [
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ]
  ]
}

附录

管道语法提案