为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript — —Null vs. Undefined

标签:
JavaScript

JavaScript — Null vs. Undefined

初学者往往搞不清楚nullundefined的区别,本文深入剖析nullundefined的异同。

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的值,其中nullundefined是六个falsy值中的两个。

falsy 值:

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

其余所有的值则皆为truthy

另外, JS 语言中有六个原始数据类型,nullundefined是其中两个原始类型的值。原始数据类型:

  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

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

nullundefined存在差异的实际应用场景

废话那么多,真正能用的地方,译者就越到一个,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通常表示一个变量被声明了,但是没有被初始化
  • nullundefined都是falsy
  • nullundefined都是原始数据类型,但JS 语言的bug导致typeof null = object
  • null !== undefined null == undefined
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
120
获赞与收藏
651

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消