如何同時判斷 undefined 與 null ?

栏目: JavaScript · 发布时间: 5年前

内容简介:ECMAScript 5最中規中矩的寫法就是配合

undefinednull 是 ECMAScript 很特殊的存在,實務上我們常會同時判斷 undefinednull ,其實有更優雅的寫法。

Version

ECMAScript 5

||

const func = x => {
  if (x === undefined || x === null) return ('undefined or null');
};

console.log(func());
console.log(func(undefined));
console.log(func(null));

最中規中矩的寫法就是配合 || ,同時判斷 undefinednull

如何同時判斷 undefined 與 null ?

Falsy Value

const func = x => {
  if (!x) return ('undefined or null');
};

console.log(func());
console.log(func(undefined));
console.log(func(null));

由於 undefinednull 都是 Falsy Value,因此這種寫法也很常見。

不過這種寫法有個淺在的 bug,因為 false 0 與 empty string '' 也是 Falsy Value,所以可能誤判。

如何同時判斷 undefined 與 null ?

== null

const func = x => {
  if (x == null) return ('undefined or null');
};

console.log(func());
console.log(func(undefined));
console.log(func(null));

只要使用 == null 就可以同時判斷 undefinednull

注意是使用 == 的 lenient equality,並不是使用 === 的 strict equality。

這是為什麼呢 ?

因為在 ECMAScript 的 Spec 有這兩條規則:

如何同時判斷 undefined 與 null ?

如何同時判斷 undefined 與 null ?

既然如此,原本的 x === undefined || x === null 可以簡寫為 x == null

如何同時判斷 undefined 與 null ?

Q : 這種寫法會被 Lint 擋下來吧 ?

經過測試,ESLint / WebStorm / Airbnb 三大 Linter 都不會對 == null 寫法加以警告,很顯然這是一種默認的 patten,已被各大 Linter 接受。

Conclusion

  • 實務上不建議使用 == ,都會被各大 Linter 擋下來,但 == null 是個例外,藉由 ECMAScript Spec 強迫定義,我們可以更簡單的同時檢查 undefinednull

Reference

ECMAScript Language Specification , The Abstract Equality Comparison Algorithm


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精彩绝伦的jQuery

精彩绝伦的jQuery

[美] Jake Rutter / 魏 忠 / 人民邮电出版社 / 2012-6 / 59.00元

内容简介: 通过创建更具交互性的富Web界面增强用户体验 本书阐述如何利用少量的JavaScript基础知识将jQuery框架整合进网站,以创建富Web界面,并建立兼容所有主流浏览器的交互性网站。作者是一位具有丰富经验的Web设计师和开发者,通过一系列指导性步骤清晰讲述了添加交互性以创建卓越Web应用的方法和技巧。 使用jQuery可以节省大量的开发时间,开发者在没有丰富编程经验......一起来看看 《精彩绝伦的jQuery》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具