脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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管道运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论