JavaScript — Null vs. Undefined

JavaScript — Null vs. Undefined

初学者往往搞不清楚null和undefined的区别，本文深入剖析null和undefined的异同。

null是啥？

关于null有两点需要掌握：

1. null是一个空值
2. null是被赋值来的

下面是个 Demo, 我们给 a 变量赋值为 null:

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

undefined是啥？

undefined通常表示一个变量单单被声明过，但是没有初始化。Demo:

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

你也可以特意的给一个变量赋值为undefined，不过正常场景下不会这么使用。

let c = undefined;
console.log(c);
// undefined

还有一点，当访问对象不存在的属性时，我们会得到undefined

var d = {};
console.log(d.fake);
// undefined

null & undefined的相同点

在 JS 语言中，有6个falsy的值，其中null和undefined是六个falsy值中的两个。

falsy 值：

1. false
2. 0 (zero)
3. “” (empty string)
4. null
5. undefined
6. NaN (Not A Number)

其余所有的值则皆为truthy。

另外， JS 语言中有六个原始数据类型，null和undefined是其中两个原始类型的值。原始数据类型：

1. Boolean
2. Null
3. Undefined
4. Number
5. String
6. Symbol

不在上述六种之内的就都是引用类型。但是有趣的是，当你使用typeof来校验 null时，返回的却是object，可以简单理解为这是js 在最初引入的一个 bug。

let a = null;
let b;
console.log(typeof a);
// object
console.log(typeof b);
// undefined

null !== undefined

通过上面的介绍，你可能已经隐隐约约的感觉到了null和undefined是不同的，但非常相似。所以，null !== undefined,null == undefined。

?null和undefined存在差异的实际应用场景?

废话那么多，真正能用的地方，译者就越到一个，es6的默认参数。

let logHi = (str = 'hi') => {
  console.log(str);
}
/*默认值生效*/
logHi();
// hi

/*正常调用*/
logHi('bye');
// bye

/*默认值生效*/
logHi(undefined);
// hi

/*null 被当成有效的值*/
logHi(null);
// null

就上述代码，大家在和我一同回忆下 es5的默认参数的写法

let logHi = (str) => {
  str = str || 'hi';
  console.log(str);
}

logHi('bye');
// bye

logHi()
// hi
logHi(undefined);
// hi
logHi(null);
// hi

Summary

• null是被赋值出来的，它用来表示空
• undefined通常表示一个变量被声明了，但是没有被初始化
• null和undefined都是falsy值
• null和undefined都是原始数据类型，但JS 语言的bug导致typeof null = object
• null !== undefined null == undefined