在 ECMAScript 2020（简称 ES2020）中，新增了一个名为管道操作符的特性。这个特性主要目的是为了解决在函数调用链中需要对一个中间变量不停的进行传递的问题，进而提高代码的可读性和可维护性。
管道操作符的基本语法
管道操作符是一个垂直的竖线符号 |，它可以用在函数调用链中，将前一个函数的返回值作为后一个函数的参数进行调用。下面是一个使用管道操作符的例子：
const fruits = ["apple", "banana", "orange"];
const result = fruits
|> array => array.map(item => item.toUpperCase())
|> array => array.filter(item => item.startsWith("A"));
console.log(result);
// ["APPLE"]在上面的例子中，首先我们定义了一个 fruits 数组，然后使用管道操作符 |> 将 fruits 数组传入第一个函数 map 的参数中进行转换成大写字母，然后再将转换后的数组传入第二个函数 filter 的参数中，最终返回符合条件的结果，即 ["APPLE"]。
管道操作符的优点
使用管道操作符可以避免出现中间变量，从而提高代码的可读性和可维护性。使用管道操作符可以使代码更加优雅和函数式，让调用链更加清晰和直观。
下面是一个使用管道操作符和不使用管道操作符的对比：
// 使用管道操作符
const result = fruits
|> array => array.map(item => item.toUpperCase())
|> array => array.filter(item => item.startsWith("A"));
// 不使用管道操作符
let result = fruits.map(item => item.toUpperCase());
result = result.filter(item => item.startsWith("A"));通过对比可以发现，使用管道操作符的代码更加简洁明了，而且将多个函数调用链串起来更加直观。
如何使用管道操作符
在使用管道操作符之前，需要确保你的运行环境版本支持这个特性。目前大多数现代浏览器都已经支持了管道操作符，但是在部分老版本的浏览器中会出现问题，需要使用 Babel 等工具进行转译。
如果你使用的是支持管道操作符的环境，那么使用管道操作符也非常简单，只需要在函数调用链中使用竖线符号 |> 就可以了。下面是一个更加实际的例子：
-- -------------------- ---- ------- ----- ---- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- -- -- ----- ------ - ---- -- ----- -- ----------------- -- -------- - --- -- ----- -- -------------- -- ----------- -------------------- -- --------- ------
在上面的例子中，我们定义了一个 data 数组，然后使用管道操作符 |> 将 data 数组传入第一个函数 filter 的参数中进行过滤，然后再将过滤后的数组传入第二个函数 map 的参数中进行转换，最终返回转换后的结果 ["Alice", "Bob"]。
管道操作符的局限性
管道操作符虽然非常实用，但是它也有一些局限性。首先，管道操作符只能用在函数调用链中，不能用在其他地方，例如循环中和条件语句中。
其次，管道操作符和一些语言特性的结合使用也会比较麻烦。例如，如果需要使用下标访问数组中的元素，就需要额外使用 [] 来进行操作，这样可能会破坏管道操作符的链式结构，从而影响代码的可读性。
最后，管道操作符在使用时需要注意函数的执行顺序，因为管道操作符是由左往右运算的。如果需要改变函数的执行顺序，就需要使用括号来进行分组，例如：
const result = group |> array => array.map(item => item.items) |> array => array.flat() |> array => array.filter(item => item.type === "A" || item.type === "B" || item.type === "C") |> array => array.sort((itemA, itemB) => itemA.timestamp - itemB.timestamp) |> array => array.map(item => item.value) |> array => array.slice(0, 10);
在上面的例子中，使用了多个函数调用和管道操作符来对一个数据进行多轮处理和转换。为了保证函数的执行顺序和优先级，需要使用括号来进行分组，从而实现期望的转换结果。
总结
管道操作符是 ECMAScript 2020 中新增的一个非常实用的特性，它可以提高代码的可读性和可维护性，使得代码更加优雅和函数式。使用管道操作符可以避免出现中间变量，从而让调用链更加清晰和直观。然而，管道操作符也有一些局限性，在使用时需要特别注意函数的执行顺序和语法的正确性，以免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a111ba48841e9894d56b8f