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

墨蓝 2022-12-10 11:24 129阅读 0赞

![在这里插入图片描述][20200925213755218.png_pic_center]

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

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

#### 可选链操作符( `?.` ) ####

`?.` 操作符的功能类似于 `.` 链式操作符，不同之处在于，单引用属性为 (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
    
    // 这种情况他的优势就出来了，使用`~~`即使是数据错误，但是他返回的数据类型不会影响后续数据格式的处理

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

最后微信搜一搜【前端人】关注鬼哥，关注后回复【资料】有我准备的一线大厂面试资料和简历模板，希望大家都能找到心仪的工作，关注后回复【加群】，和前端大军一起前端进阶

[20200925213755218.png_pic_center]: /images/20221123/9241d64e21ee4c55b9169e8b63d86f66.png