以下几个超酷的Javascript技巧一睹为快

百度已收录   阅读次数: 275
2021-12-2321:10:00 发表评论
摘要

今日伯衡君看到medium上面有一篇文章,介绍了几个Javascript这门编程语言超酷的使用方法,不仅能节省代码使用量,还能让人一看就惊呼大神,此前,伯衡君也分享过类似文章,具体可以参看下方的前情提要,不过,这篇和以前的依旧不一样,而是全新的……

以下几个超酷的Javascript技巧一睹为快

开篇寄语

今日伯衡君看到medium上面有一篇文章,介绍了几个Javascript这门编程语言超酷的使用方法,不仅能节省代码使用量,还能让人一看就惊呼大神,此前,伯衡君也分享过类似文章,具体可以参看下方的前情提要,不过,这篇和以前的依旧不一样,而是全新的。

前情提要

内容详情

以下一些很酷的 Javascript 技巧,我相信当在您的代码中广泛使用时,它们将有助于减小文件大小,并且更容易让您的同事阅读,希望你觉得它们很有用。

  • 简洁验证

如果说你遇到了以下的集合:

var parent = {
  children1:{
    children2:{
      children3:{
        children4: "hello world"
      }
    }
  }
}

如果想验证这个Objects,大部分人基本上是用的是如下方法,请看下图:

以下几个超酷的Javascript技巧一睹为快

其实,有一种更简洁的方法,就是使用?.来验证,解释如下:

注释

可选的链接运算符 (?.) 使您能够读取位于连接对象链深处的属性值,而无需检查链中的每个引用是否有效。 [来源:MDN]

那么这个可以这样改写:

console.log(parent?.children1?.children2?.children3?.children4)

起到的效果是一样的,不过,是不是比上面的要优美的多?

  • 像这样涉及数字时,避免使用“OR (||)”运算符验证 null 和 undefined
以下几个超酷的Javascript技巧一睹为快

如果你有一个函数并且你想避免编写代码来验证 null、undefined 和 0 之间的区别。因为 javascript 认为 0 为 false。你需要做这样的事情,

以下几个超酷的Javascript技巧一睹为快

这??运算符称为 Nullish 合并运算符。它只会检查运算符左侧的 null 或 undefined 。

在MDN又如下解释:

注释

空合并运算符 (??) 是一个逻辑运算符,当其左侧操作数为空或未定义时返回其右侧操作数,否则返回其左侧操作数。
  • 避免在 body 标签下写 script 标签
以下几个超酷的Javascript技巧一睹为快

而是将 defer 关键字与 script 标签一起使用,并将其添加到 head 标签中,如下所示:

以下几个超酷的Javascript技巧一睹为快

这样写有什么好处呢?请看MDN解释如下:

注释

此布尔属性设置为向浏览器指示脚本将在解析文档之后执行,但在触发 DOMContentLoaded 之前执行。具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发,直到脚本加载并完成评估。 [来源:MDN]

感恩鸣谢

以上来源于作者Clive Mac灵感,其中的编程效果图片由以下网站生成:

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: