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

This article mainly introduces "how to use js operator to optimize code". In daily operation, I believe many people have doubts about how to use js operator to optimize code. Xiaobian consulted all kinds of information and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use js operator to optimize code". Next, please follow the editor to study!

Optional chain operator (?. ) const UserObj = {getAge: () = > {}}; / / * * / / 1. Use the common judgment syntax var name = UserObj.info?UserObj.info.name: "; console.log (name); / / 2. Use the optional chain syntax var name = UserObj.info?.name;console.log (name); / / output undefined without reporting an error / / * * / / 1. Use the normal judgment syntax (not to do function type judgment for the time being) var name;if (UserObj.getName) {name=UserObj.getName ();} console.log (name); / / output undefined//2. Use the optional chain syntax var name = UserObj.getName?. (); console.log (name); / / does not exist, default output undefined without error / / * / / if the hierarchy is deep, the advantage is obvious: const UserObj = {logList: []}; / / 1. Use the normal judgment syntax var name;if (UserObj.logList&&UserObj.logList [0] & & UserObj.logList [0] .user & & UserObj.logList [0] .user.name) {name=UserObj.logList&&UserObj.logList [0] & & UserObj.logList [0] .user & & UserObj.logList [0] .user.name;} console.log (name); / / output user. The advantage of using the optional chain syntax var name = UserObj.logList?. [0]? .user? .name; / / outputting undefined / / is obvious, so that's why other people's code is well written.

?. The function of the operator is similar to. Chain operator, the difference is that a single reference property (null or undefined) does not cause an error. When used with a function call, returns undefined if the given function does not exist

Optional chain operator (?. Allows you to get the value of the property of the current object without having to know whether the property of the current object is valid (exists)

Pipe operator (function in the lab)

The pipe operator | > allows chain calls to functions in an easy-to-read way. In essence, the pipe operator is the syntax sugar for a single-argument function call, which allows you to make a call like this:

Let url = "% 21" | > decodeURI

Written in traditional syntax, the equivalent code looks like this:

Let url = decodeURI ("% 21")

I really don't see any advantage from this small example, but what about this one?

Const getWeChat = (name) = > `${name}, please follow the official account [frontend]`; const getInfo = (name) = > `${name}, I am 18 years old; const getName = (title) = > title+ "Ghost Brother"; / / ordinary js syntax getWeChat (getInfo ("my name is:") / pipe operator syntax "my name is:" | > getName | > getInfo | > getWeChat; / / output my name is: ghost Brother, I am 18 years old.

At this point, I've been thinking about it for a long time, but I still agree to say that the syntax of the pipeline operator is really more intuitive in meaning.

~ operator

The [~] operator, a simpler use, can convert some variables to Number (numeric) types.

/ / converts a numeric type string to a pure number. / / ordinary js code var numStr = '123 accounting console.log (parseInt ("123")); / / output the 123 numStr of numeric type / ``~ `operator var numStr =' 123 * * console.log (~ ~ *); / / output numeric type 123 var numStr / * / / but what if the data itself is wrong? Console.log (parseInt ("123")); / / output NaNvar numStr ='I am not the number 123 console.log (~ ~ numStr) / / output 0 js of numeric type / in this case, his advantage comes out. Even if it is a data error, the data type returned by him will not affect the processing of the subsequent data format. This is the end of the study on "how to optimize the code with the js operator". I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.