JavaScript内核与高级编程之：`JavaScript`的`Pipe Operator`：其在函数组合中的新语法。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位编程界的弄潮儿们，大家好！ 今天咱们不聊别的，就来扒一扒JavaScript里那个犹抱琵琶半遮面的`Pipe Operator`（管道操作符）。这玩意儿，说白了，就是想让你的函数组合代码看起来更性感、更流畅，也更易于理解。 别害怕，虽然名字听起来高大上，但其实核心思想简单得像你家楼下老王卖的茶叶蛋，保证你听完就想立马上手试试。

**开场白：函数组合的那些事儿**

在深入`Pipe Operator`之前，咱们先来回顾一下函数组合。 函数组合，简单来说，就是把多个函数像流水线一样串联起来，前一个函数的输出作为后一个函数的输入。 这在处理数据转换时简直不要太好用。

举个栗子：假设我们要把一个字符串先转换成小写，然后去掉空格，最后再取前5个字符。 如果不用函数组合，你可能得这么写：

```javascript
const str = "  Hello World!  ";

const step1 = str.toLowerCase(); // "  hello world!  "
const step2 = step1.trim();       // "hello world!"
const step3 = step2.substring(0, 5); // "hello"

console.log(step3);

这代码，一步一步拆解，逻辑是清晰，但总感觉有点笨重，变量满天飞，可读性也打了折扣。

如果用函数组合，我们可以这样写：

const toLowerCase = (str) => str.toLowerCase();
const trim = (str) => str.trim();
const substring = (str, length) => str.substring(0, length);

const compose = (f, g) => (x) => f(g(x));

const processString = compose(substring.bind(null, 5), compose(trim, toLowerCase));

const str = "  Hello World!  ";
const result = processString(str);
console.log(result); // "hello"

这里，我们定义了toLowerCase、trim和substring三个函数，然后用compose函数把它们组合起来。 compose函数接收两个函数作为参数，返回一个新的函数，这个新函数会先执行第二个函数，然后把结果传给第一个函数。

虽然看起来更简洁了，但这种嵌套式的compose，当函数数量多了之后，代码就会变得难以阅读，从里到外，大脑需要反向思考，就像剥洋葱一样，一层一层地扒，扒到最后可能把自己都搞懵了。

Pipe Operator：闪亮登场

这时候，Pipe Operator就该闪亮登场了！它就像一条管道，让数据像水一样，顺着管道流动，依次经过各个函数的处理。

Pipe Operator有两种提案，一种是F#风格的|>，另一种是Hack风格的@@。咱们先来说说F#风格的|>。

F#风格的|>

这种风格的Pipe Operator允许你这样写代码：

const toLowerCase = (str) => str.toLowerCase();
const trim = (str) => str.trim();
const substring = (str, length) => str.substring(0, length);

const str = "  Hello World!  ";

const result = str
  |> toLowerCase
  |> trim
  |> (x => substring(x, 5));

console.log(result); // "hello"

怎么样？是不是感觉代码瞬间变得流畅起来了？像一条小溪，缓缓流淌，数据从上到下，依次经过toLowerCase、trim和substring的处理，最终得到结果。

这种风格的Pipe Operator，把数据放在最前面，然后用|>连接各个函数，让代码的阅读顺序和执行顺序保持一致，大大提高了代码的可读性。

Hack风格的@@

另一种是Hack风格的@@，它的写法略有不同：

const toLowerCase = (str) => str.toLowerCase();
const trim = (str) => str.trim();
const substring = (str, length) => str.substring(0, length);

const str = "  Hello World!  ";

const result = toLowerCase @@ trim @@ (x => substring(x, 5)) @@ str;

console.log(result); // "hello"

Hack风格的@@，把数据放在最后面，函数从左到右依次执行。这种风格的代码，虽然也比嵌套式的compose更易读，但个人感觉还是F#风格的|>更符合直觉。

Pipe Operator的优势

说了这么多，Pipe Operator到底有哪些优势呢？咱们来总结一下：

优势	描述
提高可读性	让代码的阅读顺序和执行顺序保持一致，避免了嵌套式的`compose`带来的阅读障碍。
简化代码	减少了中间变量的使用，让代码更简洁。
易于维护	函数之间的依赖关系更加清晰，方便修改和维护。
函数复用	可以轻松地复用已有的函数，只需把它们串联起来即可。
更符合人类思维	更符合人类从左到右、从上到下的阅读习惯。

Pipe Operator的应用场景

Pipe Operator在各种场景下都能大显身手，尤其是在处理数据转换、异步操作和函数式编程时。

数据转换

就像我们前面举的例子一样，Pipe Operator非常适合用来处理数据转换。比如，从服务器获取数据后，需要对数据进行清洗、转换和格式化，就可以用Pipe Operator把这些操作串联起来。

const fetchData = async () => {
  // 模拟从服务器获取数据
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: "  John Doe  ", age: " 30 " });
    }, 100);
  });
};

const trim = (str) => str.trim();
const toUpperCase = (str) => str.toUpperCase();
const parseAge = (age) => parseInt(age, 10);

const processData = async () => {
  const data = await fetchData();

  const processedData = data
    |> (data => ({
      name: data.name |> trim |> toUpperCase,
      age: data.age |> trim |> parseAge
    }));

  console.log(processedData); // { name: "JOHN DOE", age: 30 }
};

processData();

异步操作

在处理异步操作时，Pipe Operator也能让你的代码更清晰。比如，你需要依次执行多个异步操作，就可以用Pipe Operator把它们串联起来。

const asyncFunc1 = async (x) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return x + 1;
};

const asyncFunc2 = async (x) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return x * 2;
};

const asyncFunc3 = async (x) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return x - 3;
};

const processAsync = async (input) => {
  const result = input
    |> asyncFunc1
    |> asyncFunc2
    |> asyncFunc3;

  console.log(await result); // (input + 1) * 2 - 3
};

processAsync(5); // 输出 9

函数式编程

Pipe Operator是函数式编程的得力助手。它可以让你更容易地组合和复用函数，写出更简洁、更易于测试的代码。

Pipe Operator的兼容性

需要注意的是，目前Pipe Operator还不是JavaScript的标准语法，所以你需要使用Babel等工具进行转译。

Babel 配置:
首先，确保你的项目中已经安装了 Babel。如果没有，可以通过以下命令安装：
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env
```
安装 Pipe Operator 插件:
安装 Babel 插件以支持 Pipe Operator。对于 F# 风格的 |>，可以使用 @babel/plugin-proposal-pipeline-operator 插件，并选择 fsharp 提案：
```
npm install --save-dev @babel/plugin-proposal-pipeline-operator
```

配置 Babel:
在你的项目根目录下创建一个 .babelrc 或 babel.config.js 文件，并添加以下配置：

// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }]
  ]
}

或者，如果你使用 babel.config.js：

// babel.config.js
module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }]
  ]
};

Hack 风格 (@@) (不推荐):
虽然 Hack 风格的 @@ 也有相应的提案，但通常更推荐使用 F# 风格，因为它更易读。如果仍然想使用 Hack 风格，可以将 Babel 插件配置中的 "proposal" 设置为 "hack"：
```
// .babelrc (Hack 风格)
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "hack" }]
  ]
}
```

在代码中使用:
现在，你就可以在你的 JavaScript 代码中使用 Pipe Operator 了。例如：

// 确保你的代码经过 Babel 转译
const result = " hello world "
  |> (x => x.trim())
  |> (x => x.toUpperCase());

console.log(result); // "HELLO WORLD"

运行 Babel:
最后，使用 Babel 转译你的代码。在 package.json 文件中添加一个 script：
```
// package.json
{
  "scripts": {
    "build": "babel src -d dist"
  }
}
```
然后运行：
```
npm run build
```
这会将 src 目录下的代码转译到 dist 目录下。确保你的项目引用的是 dist 目录下的转译后的代码。

注意事项:

提案状态: Pipe Operator 仍然是一个提案，这意味着它的语法和行为可能会在未来发生变化。
可读性: 尽管 Pipe Operator 可以提高代码的可读性，但过度使用可能会导致代码难以理解。请适度使用。
性能: 在某些情况下，Pipe Operator 可能会带来轻微的性能损耗。但通常可以忽略不计。

总结：拥抱Pipe Operator，让你的代码飞起来

总而言之，Pipe Operator是一个非常有用的语法糖，它可以让你的函数组合代码更简洁、更易读、更易于维护。虽然它目前还不是JavaScript的标准语法，但相信在不久的将来，它一定会成为JavaScript开发者的标配。

所以，各位编程界的弄潮儿们，赶快拥抱Pipe Operator吧！让你的代码飞起来，让你的开发效率飞起来，让你的头发… 嗯，这个就另说了。

今天的讲座就到这里，谢谢大家！希望大家有所收获，下次再见！

发表回复 取消回复

发表回复取消回复