阅读 2385
如何运用js操作符【新语法】优化代码?

如何运用js操作符【新语法】优化代码?

昨天在我们的技术群里讨论的时候,有个小伙伴,发出了一个关于可选链语法的提问,今天就来聊聊几个js骚操作(我认为是代码优化技巧)

在很多场景下,使用可选链语法来编码,是非常有优势的,尤其是数据层级较深,或者数据层级属性不明确的时候,使用可选链语法大大简化了代码,和提升代码效率!

可选链操作符( ?. )

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 

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

?. 操作符的功能类似于 . 链式操作符,不同之处在于,单引用属性为 (null 或者 undefined) 的情况下不会引起错误,。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

可选链操作符( ?. ),允许获取当前对象的属性的值,而不必明确当前对象的属性是否有效(存在)

管道运算符(实验中的功能)

管道操作符 |>允许以一种易读的方式去对函数链式调用。本质上来说,管道操作符是单参数函数调用的语法糖,它允许你像这样执行一个调用:

let url = "%21" |> decodeURI;
复制代码

使用传统语法写的话,等效的代码是这样的:

let url = decodeURI("%21");
复制代码

从这个小例子确实看不出啥优势,但是你看下这个呢?

const getWeChat = (name) => `${name},请关注公众号【前端人】`;
const getInfo = (name) => `${name},我今年18岁`;
const getName = (title) => title+"虎克";

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

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

// 输出 我的名字叫:虎克,我今年18岁
复制代码

写到这,我思考了很久,还是同意说出,使用管道操作符语法,语意上确实更加直观

~~运算符

~~】运算符,简单一点的用法就是可以将一些变量转化为Number(数字)类型的。

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

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

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

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

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

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

好了,今天的几个代码优化,前端进阶小技巧就到这里了,下次继续!

文章分类
前端
文章标签