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

摘要

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

开篇寄语

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

前情提要

• 《Web开发人员应该掌握的8个Javascript概念》
• 《10个日常生活中非常有用的Javascript代码片段》
• 《简单解决Js解析链接出现的各种乱码问题》

内容详情

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

• 简洁验证

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

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

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

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

注释

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

那么这个可以这样改写：

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

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

• 像这样涉及数字时，避免使用“OR (||)”运算符验证 null 和 undefined

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

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

在MDN又如下解释：

注释

空合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为空或未定义时返回其右侧操作数，否则返回其左侧操作数。

• 避免在 body 标签下写 script 标签

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

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

注释

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

感恩鸣谢

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

• ray.so