JavaScript · 随笔 Null vs. Undefined - HelloWorld开发者社区

刚学了一些 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

常见应用场景：

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

我们都知道在做逻辑判断时，== 会强制转换用于比较的两个值的类型；而在实际开发中，以下情况用 == ，其他时候都用 === 即可
```
if (obj.a == null) {
  // 这里相当于 obj.a === null || obj.a === undefined;
  // 这也是jquery源码中推荐的写法
}
```

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"