脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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的函数劫持浅析

    javascript的函数劫持浅析

    javascript函数劫持，也就是老外提到的javascript hijacking技术。虽然这个概念在前端领域使用较少，但是在安全领域、自定义业务等场景下还是有一定的使用价值的。所以，这一篇文章将会和大家一起去了解一下JS中的函数劫持是什么，有什么作用，下面来一起看看吧。
    2016-09-09
  • JS实现的贪吃蛇游戏完整实例

    JS实现的贪吃蛇游戏完整实例

    这篇文章主要介绍了JS实现的贪吃蛇游戏,结合完整实例形式分析了javascript实现贪吃蛇游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JS中注入eval, Function等系统函数截获动态代码

    JS中注入eval, Function等系统函数截获动态代码

    这篇文章主要介绍了JS中注入eval, Function等系统函数截获动态代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • Javascript中window.name属性详解

    Javascript中window.name属性详解

    这篇文章主要介绍了Javascript中window.name属性详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Js自动截取字符串长度,添加省略号(……)的实现方法

    Js自动截取字符串长度,添加省略号(……)的实现方法

    下面小编就为大家带来一篇Js自动截取字符串长度,添加省略号(……)的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 一文详细聊聊js新增基本类型BigInt

    一文详细聊聊js新增基本类型BigInt

    ES2020新增 一个基本类型BigInt,表示任意精度格式的整数,无符号整数类型,存储任意长度的整数,这篇文章主要给大家介绍了关于js新增基本类型BigInt的相关资料,需要的朋友可以参考下
    2024-06-06
  • JavaScript实现通讯录功能

    JavaScript实现通讯录功能

    这篇文章主要为大家详细介绍了JavaScript实现通讯录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js中setTimeout的妙用--防止循环超时

    js中setTimeout的妙用--防止循环超时

    本文主要介绍了使用setTimeout实现防止循环超时的方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS读写CSS样式的方法汇总

    JS读写CSS样式的方法汇总

    这篇文章主要为大家详细汇总了JS读写CSS样式的方法，内容详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 解析原来浏览器原生支持JS Base64编码解码

    解析原来浏览器原生支持JS Base64编码解码

    这篇文章主要介绍了解析原来浏览器原生支持JS Base64编码解码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论