文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用js操作符优化代码

2023-06-27 10:59

关注

这篇文章主要介绍“如何使用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("123")); // 输出数字类型的123// `~~`运算符var numStr = '123';console.log(~~numStr); // 输出数字类型的123// ***********************// 但是如果数据本身错误呢?var numStr = '我不是数字123';console.log(parseInt("123"));// 输出NaNvar numStr = '我不是数字123';console.log(~~numStr); // 输出数字类型的0// 这种情况他的优势就出来了,使用`~~`即使是数据错误,但是他返回的数据类型不会影响后续数据格式的处理

到此,关于“如何使用js操作符优化代码”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯