JavaScript · 随笔 Null vs. Undefined

刚学了一些 Markdown 的基础语法，试着用一下。

相关文档：Markdown基本语法配合基本使用

---

相同点：

• null 和 undefined 都是js的基本数据类型
  扩展：JS的6种基本数据类型

  • Boolean
  • String
  • Number
  • Symbol
  • Null
  • undefined

• null 和 undefined 都是falsy值
  扩展：JS的6种falsy值

  • 0
  • false
  • "" (空字符串)
  • NaN (Not a Number)
  • undefined
  • null

---

不同点：

let i = null;
console.log(i);
// null

let j;
console.log(j);
// undefined

可见：
null 代表变量有值，值为 空 , 且该值是通过 变量赋值 获得的；
undefined 代表声明了变量，但没有为其赋值。

综上：

undefined == null;
// true
undefined !== null;
// true

使用 typeof 验证一下：

typeof undefined;
// "undefined"
typeof null;
// "object"
typeof NaN;
// "number"

Emm...，undefined和null的类型不一致，确实验证了undefined !== null，不过...
null的类型是object?! ( 你不是js的基本数据类型吗? )
NaN的类型是number?! ( 你全称不是叫 “Not a Number” 吗? )

事实上就是如此，而且你还会发现：

!!NaN === false;
// true
NaN == false;
// false
NaN == 0;
// false

甚至：

NaN == NaN;
// false

NaN的特性就是如此：

• NaN是number类型；
• NaN不等于任何值；
• 无效运算时会产生NaN，比如parseInt('abc')
• 可用isNaN()判断一个值是否是NaN

!!是个很好用的“运算符”，它的用途是判断任意值在做if条件判断时的逻辑值（而非参与逻辑运算时的逻辑值，下文会提到。实际上!!运算符的运算结果就是前面提到的那6个falsy值），比如：

!! ""
// false
"" == false
// true

!! 0
// false
0 == false
// true

但是，千万不要觉得!!运算结果为false，== false就成立，比如：

!! undefined;
// false
undefined == false;
// false
!! undefined === false;
// true

!! null;
// false
null == false;
// false
!! null === false;
// true

!! NaN;
// false
NaN == false;
// false
!! NaN === false;
// true

另一点需要注意的是，它不做为参与逻辑运算时的逻辑值（而是作为falsy或truly值参与条件运算），比如：

!! undefined;
// false

/* 结果是undefined，而不是false */
undefined && 'a';
// undefined

false && 'a';
// false

但愿你还没看蒙。。至于为什么typeof(null) === 'object'
Emm。。跑题了，我们接着说 Null vs. Undefined

---

常见应用场景：

1. ===（严格等于） 和 ==（等于） 分别在何时使用：

   我们都知道在做逻辑判断时，== 会强制转换用于比较的两个值的类型；而在实际开发中，以下情况用 == ，其他时候都用 === 即可

   if (obj.a == null) {
     // 这里相当于 obj.a === null || obj.a === undefined;
     // 这也是jquery源码中推荐的写法
   }

2. ES6函数默认参数的实现：
   结合上文，null 是有值的，且值为 空，可通过赋值赋给变量

   let logHi = (param = 'hello' ) => {
     console.log(param);
   };
   
   /* 默认值生效 */
   logHi();
   // "hello"
   
   /* 赋值调用 */
   logHi('world');
   // "world"
   
   /* undefined时,默认值生效 */
   logHi(undefined);
   // "hello"
   
   /* null作为值,赋值调用 */
   logHi(null);
   // null
   
   /* NaN作为值,赋值调用 */
   logHi(NaN);
   // NaN

   倘若函数这样写：

   let consoleHi = (param) => {
     param = param || 'hello';
     console.log(param);
   };
   
   /* 默认值生效 */
   consoleHi();
   // "hello"
   
   /* 赋值调用 */
   consoleHi('world');
   // "world"
   
   /* undefined时,默认值生效 */
   consoleHi(undefined);
   // "hello"
   
   /* null作为值为falsy */
   consoleHi(null);
   // "hello"
   
   /* NaN作为值为falsy */
   consoleHi(NaN);
   // "hello"

参考文献：JavaScript — Null vs. Undefined

题外话：不免想起一篇文章，虽然联系不大
趣文：编程其实是文科