Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the ES6 pipeline operator". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to use the ES6 pipeline operator" can help you solve the problem.

Pipe operator in JS.

The Unix operating system has a pipeline mechanism that allows you to pass the value of the previous operation to the latter operation. This mechanism is very useful so that simple operations can be combined into complex operations. Many languages have pipeline implementations, and there is now a proposal for JavaScript to have a pipeline mechanism as well.

JavaScript's pipeline is an operator, written by | >. On the left is an expression and on the right is a function. The pipe operator passes the value of the expression on the left to the function on the right to evaluate.

X | > f

/ / equivalent to

F (x)

The biggest advantage of the pipeline operator is that you can write nested functions into chained expressions from left to right.

Function doubleSay (str) {

Return str + "," + str

}

Function capitalize (str) {

Return str [0] .toUpperCase () + str.substring (1)

}

Function exclaim (str) {

Return str +'!'

}

/ / the three chained expressions are written:

/ / the traditional way of writing

Exclaim (capitalize (doubleSay ('hello')

/ / "Hello, hello!"

/ / how to write the pipe

'hello'

| | > doubleSay |

| | > capitalize |

| | > exclaim |

/ / "Hello, hello!"

The pipe operator can pass only one value, which means that the function to its right must be a single-argument function. If it is a multi-parameter function, it must be Corialized and changed to a single-parameter version.

First of all, let's talk about what Collization is.

/ / ordinary function

Function fn (a _ r _ b) {

Return aquib

}

/ / after Corey

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

In the above code, the add function requires two parameters. However, the pipe operator can pass in only one value, so you need to supply another parameter in advance and change it to a single-parameter arrow function _ = > add (7, _). The underscore in this function has no special meaning, it can be replaced by other symbols, and the underscore is used only because it vividly indicates that it is a placeholder.

The specific execution is to pass the value of 25 to double to get 50, that is, the execution result of the first function, and then pass the value of 50 to the anonymous function to return the add (xmemy) function. The default value of x is less than 7, and "_" is a placeholder. He will equal that 50 of the previous result, so the final value is 57.

The pipe operator also applies to the await function.

X | > await f

/ / equivalent to

Await f (x)

Const userAge = userId | > await fetchUserById | > getAgeFromUser

/ / equivalent to

Const userAge = getAgeFromUser (await fetchUserById (userId))

That's all for "how to use the ES6 pipeline operator". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.