How do I optimize my code with the js operator New Syntax?

The article comes from the public number: Frontman Author: Ghost Brother

Recently, while I was chatting in the technology group, I saw a little partner asking 可选链 about optional chain syntax. Let's talk about a few js tumultuous js in this article `我认为是代码优化技巧 )

In many scenarios, coding with 可选链 syntax can be very advantageous, especially when the data level is deep, or when the data hierarchy properties are ambiguous, using 可选链 syntax greatly simplifies the code and improves the efficiency of the code!

Optional chain operator ( ?. )

const UserObj = {
  getAge:()=>{}
};
// ***********************
//1.使用普通的判断语法
var name = UserObj.info?UserObj.info.name:"";
console.log(name);


//2.使用可选链 语法
var name = UserObj.info?.name;
console.log(name);
// 输出undefined   而不会报错






// ***********************
//1.使用普通的判断语法（暂不做函数类型判断）
var name;
if(UserObj.getName){
 name=UserObj.getName();
}
console.log(name);
// 输出undefined


//2.使用可选链 语法
var name =UserObj.getName?.();
console.log(name);
// 不存在，默认输出undefined   而不会报错






// ***********************
// 如果层级较深的话，优势就很明显了
const UserObj = {
  logList:[]
};
//1.使用普通的判断语法
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);
// 输出undefined


//2.使用可选链 语法
var name =UserObj.logList?.[0]?.user?.name;
// 输出undefined 


//这个优势就很明显了，所以为什么人家的代码写的好，这就是原因

?. Operators function like . operators, except that a single reference property (null or undefined) does not cause an error. When used with function calls, a given function is returned if it does not exist

Optional chain operator ?. ) that allows you to get the value of the property of the current object without having to be sure whether the property of the current object is valid (exists)

Pipeline operators (features in experiments)

Pipeline operator |> allows chain calls to functions in an easy-to-read manner. Essentially, a pipeline operator is a syntax sugar called by a single-argument function that allows you to make a call like this:

let url = "%21" |> decodeURI;

If you write 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},请关注公众号【前端人】`;
const getInfo = (name) => `${name},我今年18岁`;
const getName = (title) => title+"鬼哥";


// 普通js语法
getWeChat(getInfo(getName("我的名字叫:")))




// 管道操作符语法
"我的名字叫:" |> getName |> getInfo|> getWeChat; 


// 输出 我的名字叫:鬼哥,我今年18岁

Writing about it, I thought for a long time, or agreed to say that using the pipeline operator syntax, the meaning is indeed more intuitive

The operator

A ~~ simpler use of the operator is to convert some variables into Number (number) types.

// 将数字类型的字符串转化为纯数字。


// 普通js代码
var numStr = '123';
console.log(parseInt("123")); 
// 输出数字类型的123


// `~~`运算符
var numStr = '123';
console.log(~~numStr); 
// 输出数字类型的123


// ***********************
// 但是如果数据本身错误呢?
var numStr = '我不是数字123';
console.log(parseInt("123"));
// 输出NaN


var numStr = '我不是数字123';
console.log(~~numStr); 
// 输出数字类型的0


// 这种情况他的优势就出来了，使用`~~`即使是数据错误，但是他返回的数据类型不会影响后续数据格式的处理

Well, a few code optimizations today, the front-end advanced tips are here, next time continue!

Above is W3Cschool编程狮 about how to use the js operator "New Syntax" optimization code? Related to the introduction, I hope to help you.