使用js操作符优化代码( ?. )( ~~ )( |＞ )

1. 可选链操作符( ?. )

const Obj = {}
// 1.使用普通的判断语法
var name = Obj.info?Obj.info.name:""
console.log(name)
// 2.使用可选链 语法
var name = Obj.info?.name
console.log(name)
// 输出同样的undefined   而不报错

2. ~~运算符

// 普通js代码
var numStr = '123'
console.log(parseInt(numStr));
var numStr = '123'
console.log(~~numStr);
// 这两个输出的都是123

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

var numStr = '我不是数字123'
console.log(~~numStr)
// 输出数字类型的0
// 这种情况他的优势就出来了，使用`~~`即使是数据错误，但是他返回的数据类型不会影响后续数据格式的处理

3. 管道运算符( |> ) 这是一个实验中的功能

let url = "%21" |> decodeURI;
let url = decodeURI("%21");
// 上面两种是等效的
const getSchool = (name) => `${name}, 就读清华大学`
const getInfo = (name) => `${name}, 我今年18岁`
const getName = (title) => title + "张三"

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

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

// 输出 我的名字叫:张三, 我今年18岁, 就读清华大学

参考