资讯专栏INFORMATION COLUMN

JavaScript — Null vs. Undefined

tanglijun / 2317人阅读

JavaScript — Null vs. Undefined

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

null是啥?

关于null有两点需要掌握:

null是一个

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 值:

false

0 (zero)

“” (empty string)

null

undefined

NaN (Not A Number)

其余所有的值则皆为truthy

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

Boolean

Null

Undefined

Number

String

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92552.html

相关文章

  • JavaScript·随记 Null vs. Undefined

    摘要:刚学了一些的基础语法,试着用一下。相关文档基本语法配合基本使用相同点和都是的基本数据类型扩展的种基本数据类型和都是值扩展的种值空字符串不同点可见代表变量有值,值为空且该值是通过变量赋值获得的代表声明了变量,但没有为其赋值。 刚学了一些 Markdown 的基础语法,试着用一下。 相关文档:Markdown基本语法配合基本使用 相同点: null 和 undefined 都是js...

    Tychio 评论0 收藏0
  • javascript数据结构与算法 --- 栈 vs 队列 vs 链表 vs 二叉树 vs

    摘要:数据结构前言随着的兴起将推向的一个前所未有的高度作为为建立高性能的服务端而创建的运行平台随着时间的推移和生态链的完善已经不再局部于服务端包括前端后端桌面正如在年提出的任何可以使用来编写的应用,最终会由编写虽然人们大多或多或少对笔者的文章有点 数据结构 前言 随着node的兴起, 将javascript推向的一个前所未有的高度, node作为为建立高性能的服务端而创建的js运行平台随着时...

    why_rookie 评论0 收藏0
  • JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in

    摘要:对于,除非使用箭头函数,它的回调函数的将会变化。使用测试下面的代码,结果如下打印打印要点使用的规则要求所有回调函数必须使用箭头函数。 译者按: JS 骚操作。 原文:For vs forEach() vs for/in vs for/of in JavaScript 译者: Fundebug 本文采用意译,版权归原作者所有 我们有多种方法来遍历 JavaScript 的数组或者...

    joyqi 评论0 收藏0
  • javascript -- == vs ===

    摘要:判断一个值是否是,只能用来判断如果两个都是字符串,每个位置的字符都一样,那么相等否则不相等。如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。对象转换成基础类型,利用它的或者方法。核心内置类,会尝试先于例外的是,利用的是转换。 javascript-- == vs === 高级语言层出不穷, 各个语言虽说思想一致,但仍有各自独特的设计理念和语法, js有许多容易让人迷惑的地方...

    BothEyes1993 评论0 收藏0
  • 快速掌握JavaScript面试基础知识(一)

    摘要:根据调查,自年一来,是最流行的编程语言。在一个函数体中声明的变量和函数,周围的作用域内无法访问。也就是说被大括号包围起来的区域声明的变量外部将不可访问。一个常见的误解是使用声明的变量,其值不可更改。 译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer ...

    acrazing 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<