JS `Pipe Operator` (`|>`) (Stage 2) `Hack Pipe` 与 `Smart Pipe` 的语义差异

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊JavaScript里那俩“管道工”——Hack Pipe 和 Smart Pipe。这俩哥们儿都是为了让咱们的代码更流畅、更易读，但干活的方式却大相径庭。别看名字挺唬人，其实理解起来并不难，咱们慢慢来，保证让各位听得明白，记得住，还能用得上。

开场白：为什么要用管道？

在开始之前，咱们先想想，为什么要用管道？想象一下，你要做一杯果汁，得先洗水果，然后切水果，最后榨汁。如果不用管道，你可能得这样写：

const fruits = ['apple', 'banana', 'orange'];

const washedFruits = washFruits(fruits);
const slicedFruits = sliceFruits(washedFruits);
const juice = juiceFruits(slicedFruits);

console.log(juice);

看起来没啥大问题，但如果步骤更多呢？代码就会变得嵌套很深，难以阅读和维护。这时候，管道就派上用场了！它可以把一个函数的输出直接作为下一个函数的输入，让代码像水管一样，流畅地流动。

正文：Hack Pipe 和 Smart Pipe 的正面交锋

OK，铺垫完毕，现在咱们进入正题，看看 Hack Pipe 和 Smart Pipe 这俩“管道工”到底有啥区别。

1. Hack Pipe ( |> )

Hack Pipe，也就是“黑客管道”，它的语法很简单，直接把左边的表达式的值作为右边函数的第一个参数传入。就像这样：

const result = 'hello'
  |> string => string.toUpperCase()
  |> string => string + ' world';

console.log(result); // 输出: HELLO world

在这个例子中，'hello' 先被传入 string => string.toUpperCase()，得到 'HELLO'，然后再被传入 string => string + ' world'，最终得到 'HELLO world'。

Hack Pipe 的特点：

简单粗暴： 就是把左边的值扔给右边的函数，当第一个参数。
语义明确： 代码阅读起来很顺畅，从左到右，一步一步地执行。
局限性： 只能作为第一个参数，如果函数需要多个参数，或者第一个参数不是管道传递的值，那就没辙了。

Hack Pipe 的典型应用场景：

数据转换： 比如把字符串转换成数字，把数字转换成日期等等。
函数组合： 把多个小函数组合成一个大函数。
链式调用： 虽然不如 Smart Pipe 灵活，但也能实现简单的链式调用。

Hack Pipe 的代码示例：

// 字符串转数字，再加 10
const num = '5'
  |> Number
  |> n => n + 10;

console.log(num); // 输出: 15

// 获取用户数据，格式化时间戳
const user = {
  name: 'Alice',
  createdAt: 1678886400000
};

const formattedUser = user
  |> u => ({ ...u, createdAt: new Date(u.createdAt) })
  |> u => ({ ...u, formattedCreatedAt: u.createdAt.toLocaleDateString() });

console.log(formattedUser);
// 输出:
// {
//   name: 'Alice',
//   createdAt: 2023-03-15T00:00:00.000Z,
//   formattedCreatedAt: '2023/3/15'
// }

2. Smart Pipe (提案已撤回)

Smart Pipe，也就是“智能管道”，它比 Hack Pipe 更聪明，更灵活。它允许你指定管道传递的值在右边函数中的位置，而不仅仅是第一个参数。但是，因为种种原因，Smart Pipe 的提案已经被撤回了，所以咱们只能简单了解一下。

Smart Pipe 的语法使用 % 符号来表示管道传递的值的位置。比如：

// 假设 Smart Pipe 仍然有效
const result = 'world'
  |> string => `hello ${string}`;

console.log(result); // 输出: hello world

const result2 = 10
  |> (x, y) => x * y(%, 5); // % 代表管道传递的值

console.log(result2); // 输出: 50

Smart Pipe 的特点：

更灵活： 可以指定管道传递的值在函数中的位置。
更强大： 可以处理更复杂的函数调用。
已撤回： 很遗憾，这个特性目前无法使用。

Smart Pipe 的典型应用场景：

需要多个参数的函数： 可以把管道传递的值放在任意位置。
需要自定义参数顺序的函数： 可以灵活地控制参数的传递。
复杂的链式调用： 可以实现更复杂的逻辑。

Smart Pipe 的代码示例 (仅供参考，无法运行)：

// 假设 Smart Pipe 仍然有效
// 计算 (x + y) * z
const result = 5
  |> (x, y, z) => (x + y) * z(2, 3, %); // % 代表管道传递的值

console.log(result); // 输出: 40

// 格式化日期
const date = new Date();

const formattedDate = date
  |> (date, options) => date.toLocaleDateString(undefined, options)(%, { year: 'numeric', month: 'long', day: 'numeric' });

console.log(formattedDate); // 输出: March 15, 2023

3. Hack Pipe vs. Smart Pipe：对比表格

为了更清晰地了解 Hack Pipe 和 Smart Pipe 的区别，咱们用一个表格来总结一下：

特性	Hack Pipe (`	>`)
语法	`x \|> f`	`x \|> f(%, ...)`
参数位置	第一个参数	任意位置
灵活性	低	高
易用性	高	中
提案状态	Stage 2	提案已撤回
应用场景	简单的数据转换	复杂的函数调用
是否可用	是	否

4. Hack Pipe 的替代方案：函数组合和柯里化

虽然 Smart Pipe 已经凉凉了，但咱们仍然有很多方法来实现类似的功能。其中，函数组合和柯里化就是两个常用的技巧。

函数组合 (Compose/Pipe)： 把多个函数组合成一个函数，从右到左依次执行。

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const toUpperCase = str => str.toUpperCase();
const addWorld = str => str + ' world';

const composedFunction = compose(addWorld, toUpperCase);

const result = composedFunction('hello');

console.log(result); // 输出: HELLO world

柯里化 (Currying)： 把一个接受多个参数的函数转换成一系列接受单个参数的函数。

const curry = (fn) => {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  };
};

const multiply = (x, y, z) => x * y * z;

const curriedMultiply = curry(multiply);

const multiplyBy5 = curriedMultiply(5);
const multiplyBy5And10 = multiplyBy5(10);
const result = multiplyBy5And10(2);

console.log(result); // 输出: 100

总结：选择合适的“管道工”

总而言之，Hack Pipe 简单易用，适合处理简单的数据转换和函数组合。虽然 Smart Pipe 更强大，但已经无法使用。不过，咱们仍然可以使用函数组合和柯里化等技巧来实现类似的功能。

选择哪个“管道工”，取决于你的具体需求。如果只是简单的链式调用，Hack Pipe 已经足够了。如果需要处理更复杂的函数调用，可以考虑使用函数组合和柯里化。

彩蛋：一些使用 Hack Pipe 的小技巧

使用箭头函数： 箭头函数可以简化代码，让管道更流畅。

const result = 'hello'
  |> (string => string.toUpperCase()) // 传统写法
  |> string => string.toUpperCase();   // 箭头函数写法

结合 Lodash 或 Underscore： 这些库提供了很多实用的函数，可以和 Hack Pipe 完美结合。

const _ = require('lodash');

const numbers = [1, 2, 3, 4, 5];

const sumOfEvenNumbers = numbers
  |> _.filter(n => n % 2 === 0)
  |> _.sum;

console.log(sumOfEvenNumbers); // 输出: 6

自定义管道函数： 可以封装一些常用的操作，提高代码的可重用性。

const toUpperAndAddExclamation = str => str.toUpperCase() + '!';

const result = 'hello'
  |> toUpperAndAddExclamation;

console.log(result); // 输出: HELLO!

结束语：管道的未来

虽然 Smart Pipe 已经凉了，但 JavaScript 社区一直在探索更好的管道方案。未来，我们可能会看到更强大、更灵活的管道运算符出现。让我们拭目以待！

好了，今天的讲座就到这里。希望大家有所收获，能够在实际项目中灵活运用 Hack Pipe，让自己的代码更优雅、更易读。感谢各位的观看！

发表回复 取消回复

发表回复取消回复