web前端学习分享-undefined和null以及与其他数据类型的转换

举报
发表于 2020/08/09 23:06:48 2020/08/09
【摘要】 在学习ECMAScript基本数据类型的过程中,经常会碰到undefined、null两个特殊的值,这两个值对初学者来说特别容易混淆,尤其是对有这两个值参与的表达式的计算结果的判断往往会不清晰,本文以初学者的角度,对这两个特殊的值及他们和其他数据类型之间的转换做一个学习分享。

在学习ECMAScript基本数据类型的过程中,经常会碰到undefined、null两个特殊的值,这两个值对初学者来说特别容易混淆,尤其是对有这两个值参与的表达式的计算结果的判断往往会不清晰,本文以初学者的角度,对这两个特殊的值及他们和其他数据类型之间的转换做一个学习分享。

ECMAScript中有5中基本数据类型:Number、String、Boolean、Undefined、Null,还有一种复杂数据类型Object。而undefined和null是最为特殊的两个值,Undefined类型只有一个值undefined,Null类型的也只有一个值null,这也侧面说明了这两个值和其他数据类型相比,是很特殊的两个值。

一、undefined

undefined这个特殊值的数据类型是Undefined,也是Undefined数据类型的唯一的一个值,那么undefined这个值代表的是什么?什么情况下会出现?

有以下几种情形:

第一种情况:变量声明后未初始化,会默认赋值undefined

image.png

JavaScript是一种弱类型的解释型语言,变量统一用var关键字声明,在程序的运行过程中,才会根据赋值运算符 = 右边的值来确定数据类型,所以一个变量如果用var关键字声明了之后但未初始化,会被统一赋值为特殊值undefined,表示未定义的,不知道是什么数据类型的。

问:如果一个变量没有声明直接就使用呢?

image.png

但是,对未声明的变量用typeof检测时,也是返回"undefined"

image.png

所以,在定义变量的时候,在声明的时候,尽量做到初始化,以免产生误解。

第二种情况函数如果没有返回值,默认返回undefined

先看一段js代码

image.png

这道题比较具有迷惑性,我们可能还会计算一番,得出结果是 2,其实大错特错!结果是undefined,因为函数func()中并没有return语句,此时无论函数体内进行了多复杂的运算,其结果都是undefined,这道题考察的也正是这一点。

第三种情况:当函数的实参个数小于形参的时候,多出来的形参也会被赋值undefined

image.png

上面代码中形参有3个,调用函数时,只有两个实参,则调用时,会依次赋值:x=1,y=2,z=undefined,则最终的计算结果为:NaN

第四种情况:如果要查询的数组元素的值不存在时,会返回undefined;

image.png

二、null

null是Null类型的唯一一个值,常用来描述一个"空值",先看一下操作符typeof作用于null时,会返回什么?

image.png

并不是返回"null",而是"object",这也是学习中需要注意的一点,这也反映出null表示的是一个空对象指针,如果我们定义了一个变量打算用来保存对象,但开始并不确定具体的对象时,可以使用null来进行初始化,反过来,如果获取对象的值是null,说明此对象不存在。

image.png

三、undefined和null与其他数据类型的转换

通过以上分析可以看出:undefined一般是声明后未赋值的变量的默认值,表示"不知道是什么值,未定义的";null表示"空值",表示是"无值的"。

先用"=="检测一下undefined和null两者之间以及与一些特殊值的关系

image.png

undefind和null在进行 == 比较时,会进行强制类型转换,认为两者的值是相等的,都表示"值的空缺",并且各自与自身也相等。除此之外,null和undefined与任何值都不相等。

下面看看将undefined和null分别强制转换为数值,字符串和布尔值时的转换结果是什么?

用Number()强制转换为数值

image.png

以上说明,在算术运算中,如果操作数中有undefined,其算术运算结果是就是NaN;null在算术运算中则是隐式转换为数值0来参与运算,如下

image.png

用String()强制转换为字符串

image.png

这说明,在字符串拼接运算中,undefined和null都会被隐式转换为字符串进行拼接

用Boolean()强制转换为布尔值

image.png

可以看出,undefined和null转换为布尔值均为false,这在一些情况下可以用来判断变量的值是否存在,对象的属性和方法是否存在。如用来检测浏览器对DOM提供的属性和方法是否支持,如果支持,就执行相应的操作,不支持,则返回false。如

image.png


以上就是本人对undefined和null的理解和总结,如有疏漏,欢迎指正!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。