本文深入解析 JavaScript 中的管道运算符（|>），阐述其将嵌套函数转换为链式调用的机制，并说明如何处理多参数函数的柯里化及与 await 的配合。同时介绍 ES6 中剩余运算符和扩展运算符的区别与用法，涵盖数组解构、对象展开及函数参数处理等实际场景。
ES6 中的管道运算符
JavaScript 语言引入了管道运算符这一概念。
Unix 操作系统具备管道机制（pipeline），能够将前一个操作的输出值传递给下一个操作。这种机制极具实用价值，使得简单的操作能够组合成复杂的逻辑。许多编程语言都已实现管道功能，目前也有相关提案建议让 JavaScript 支持管道机制。
JavaScript 的管道运算符写作 |>。其左侧为表达式，右侧为函数。该运算符的作用是将左侧表达式的计算结果作为参数，传入右侧的函数中进行求值。
x |> f
// 等同于
f(x)管道运算符的核心优势在于，它允许将嵌套的函数调用改写为从左至右阅读的链式表达式，从而提升代码的可读性。
function doubleSay (str) {
return str + ", " + str;
}
function capitalize (str) {
return str[0].toUpperCase() + str.substring(1);
}
function exclaim (str) {
return str + '!';
}
//这三个链式表达式写法：
// 传统的写法
exclaim(capitalize(doubleSay('hello')))
// "Hello, hello!"
// 管道的写法
'hello'
|> doubleSay
|> capitalize
|> exclaim
// "Hello, hello!"管道运算符仅能传递单个值，这意味着其右侧的函数必须接受单一参数。若需处理多参数函数，则必须通过柯里化（Currying）将其转换为单参数形式。以下简要介绍柯里化的概念。
// 普通的函数
function fn(a,b) {
return a+b
}
//柯里化后
function cfn(a) {
return function (b) {
return a + b
}
}
fn(5, 2)
cfn(5)(2) function double (x) { return x + x; }
function add (x, y) { return x + y; }
let person = { score: 25 };
person.score
|> double
|> (_ => add(7, _))
// 57在上述代码示例中，add 函数原本需要两个参数。由于管道运算符只能传入一个值，因此需要预先提供另一个参数，并将其转换为单参数的箭头函数 _ => add(7, _)。该函数内部的下划线并无特殊语法含义，可替换为其他符号，使用下划线仅是为了形象地表示此处为占位符。
具体执行流程如下：首先将 25 传入 double 函数，得到结果 50；随后将 50 传入匿名函数。该匿名函数返回 add(x, y)，其中 x 默认为 7，而占位符 _ 接收上一环节的结果 50，因此最终计算结果为 57。
管道运算符同样适用于 await 异步操作。
x |> await f
// 等同于
await f(x)
const userAge = userId |> await fetchUserById |> getAgeFromUser;
// 等同于
const userAge = getAgeFromUser(await fetchUserById(userId));ES6 中的剩余运算符与扩展运算符
在 ES6 标准中，三个点（...）具有两种含义：分别代表扩展运算符（Spread Operator）和剩余运算符（Rest Operator）。
需要注意的是，这三个点构成的运算符必须位于参数或解构列表的末尾。
1. 基础用法示例
例如：let [a,b,c,....d]=[1,2,3,4,5,6]，执行结果为 d=[4,5,6]，d 仍然是一个数组。
例如：let {x,y,...y1}={x:10,y:11, p:10,d:20}，执行结果为 y1={p:10,d:20}，y1 仍然是一个对象。
扩展运算符（...）示例：
例一：
test(x,y,z){
console.log(x,y,z);
}函数调用场景：
test(...[1,2,3]); //这里数组[1,2,3,] 直接被解析成数字1,2,3序列例二：
let a=[1,2,3]
let b =[5,6,...a,7] ====>结果 b=[5,6,1,2,3,7] // 仍然是将数组进行解析例三：
let b=[1,2,...[],5,6] ; ===> b=[1,2,5,6] 空数组没有任何影响例四：
let a='hello';
let b=[...a]; ===> b=['h','e','l','l'] 剩余运算符（Rest）
其作用与扩展运算符相反，用于将逗号分隔的值序列组合成一个数组。
例一：
foo(x,y,...z){
console.log(x,y,z);
}
foo(1,2,3); ===> z=[3]例二：
let [a,b,..c]=[1,2,3,4,5,6] ===> c= [3,4,5,6]例三：
let [a,...b]=[1] ===> b=[] 是个空数组
let {x,y...d}={x:1,y:2}; ===> d={}至此，关于 ES6 中管道运算符及相关运算符的介绍已完成。如需了解更多 ES6 管道运算符相关内容，请搜索本站历史文章或继续阅读后续文章，感谢大家的支持！