JavaScript ES6 管道运算符详解与剩余/扩展运算符应用

作者：异步漫步时间：2026-10-30 19:11:18浏览：230

本文深入解析 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 管道运算符相关内容，请搜索本站历史文章或继续阅读后续文章，感谢大家的支持！

作者最新文章

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19

JS对象数组转字符串为什么推荐用JSON.stringify()

2026-11-05 09:40:31