脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ES6管道运算符

JS ES6中的管道运算符详解

 更新时间：2023年05月20日 10:03:34   作者：“落幕”  
JavaScript 的管道是一个运算符，写作|>，它的左边是一个表达式，右边是一个函数，这篇文章主要介绍了ES6中的管道运算符，需要的朋友可以参考下

ES6中的管道运算符

JS中的管道运算符。

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!"

管道运算符只能传递一个值，这意味着它右边的函数必须是一个单参数函数。如果是多参数函数，就必须进行柯里化，改成单参数的版本。
首先说一下柯里化是什么

// 普通的函数
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中，三个点(…) 有2个含义。分别表示 扩展运算符 和 剩余运算符。

首先这个三点运算符号必须放在末尾

1.基础

let [a,b,c,....d]=[1,2,3,4,5,6]===》 结果： d=[4,5,6] 仍然是数组

let {x,y,...y1}={x:10,y:11, p:10,d:20}结果： y1={p1:10,d:20} 仍然是对象

扩展运算符号...：

例一：

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计算SHA-256 hash值详解

    如何使用JavaScript计算SHA-256 hash值详解

    SHA-256是一种常用的散列函数,广泛应用于多种安全程序和协议中,如TLS、SSL、SSH、PGP和比特币等,在JavaScript中,可以通过原生API轻松计算SHA-256的hash值,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • JavaScript实现简单拖拽效果

    JavaScript实现简单拖拽效果

    这篇文章主要为大家详细介绍了JavaScript实现简单拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Javascript 页面模板化很多人没有使用过的方法

    Javascript 页面模板化很多人没有使用过的方法

    今天遇到一个问题，这个问题也是我以前遇到的问题，以前的方式，也是大多数人使用的方式。大家可以看看我的文章
    2012-06-06
  • Nestjs限制请求次数方式

    Nestjs限制请求次数方式

    在NestJS中限制请求次数,可以通过创建中间件并使用第三方库（如express-rate-limit、fastify-rate-limit）来实现,在根模块中全局应用该中间件,并根据需求调整窗口时间和最大请求次数
    2025-10-10
  • 非常全面的12种js数组去重的方法

    非常全面的12种js数组去重的方法

    数组的去重方法,其实无论实在实际项目还是在面试中都会有用到的,下面这篇文章主要给大家介绍了非常全面的12种js数组去重的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • js实现一键换肤效果

    js实现一键换肤效果

    这篇文章主要为大家详细介绍了js实现一键换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js实现常用排序算法

    js实现常用排序算法

    这篇文章主要为大家详细介绍了js实现常用排序算法的代码，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信小程序实现轮播图(适配机型)

    微信小程序实现轮播图(适配机型)

    这篇文章主要为大家详细介绍了微信小程序实现轮播图，适配机型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • UniApp开发H5接入微信登录的全过程

    UniApp开发H5接入微信登录的全过程

    uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于UniApp开发H5接入微信登录的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JS自定义函数实现时间戳转换成date的方法示例

    JS自定义函数实现时间戳转换成date的方法示例

    这篇文章主要介绍了JS自定义函数实现时间戳转换成date的方法,结合具体实例形式分析了javascript时间戳与日期格式的计算与转换相关操作技巧,需要的朋友可以参考下
    2017-08-08

最新评论