HTML5学堂-码匠 HTML5学堂

您当前位于:JavaScript基础 ——> undefined与null的区别

undefined与null的区别

2015/07/03 12:55:14 | 作者:HTML5学堂(码匠) | 分类:JavaScript基础 | 关键词:undefined,null,区别,辨析

undefined与null的区别

HTML5学堂:JavaScript中存在两个“空”,一个是null,一个是undefined,那么这两个有什么区别呢?两者又分别应用在什么时候呢?针对来两者进行数学转换的话,两者又分别呈现出什么内容呢?我们一起来看一下~

字面的含义

从字面上来理解undefined和null其实相对比较简单,undefined表示的是声明一个变量之后我们并没有给它定义内容。而null表示的是有定义,定义的是一个空对象。

if语句中的状态

将undefined和null均作为if语句的条件时,我们会发现,两者均被转换成了布尔值false。看下面的实例:

  1. <script>
  2.     if (undefined) {
  3.         console.log('undefined为真 - HTML5学堂');
  4.     } else {
  5.         console.log('undefined为假 - HTML5学堂');
  6.     }
  7. </script>
  8. <script>
  9.     if (null) {
  10.         console.log('null为真 - HTML5学堂');
  11.     } else {
  12.         console.log('null为假 - HTML5学堂');
  13.     }
  14. </script>

查看原来的JavaScript书籍时发现,在1995年JavaScript诞生时,最初像JAVA一样,只设置了null作为表示"无"的值。但是,JavaScript的设计者并不希望表示“无”的是一个对象;另外,由于JS属于弱变量类型语言,所以对于数据之间进行运算的时候,会进行自动的数据类型转换,null会自动转换为0,此时如果代码是由于自动数据类型转换而出现问题,是很难找到错误的。基于这样两个原因,就有了而今的undefined。

关于上面提到的自动数据类型转换,写个实际的例子来解释一下,下面这个例子当中,原本num是一个数字,但是当数字和字符串运算时,“+”就从原来的加号含义就变成了连字符含义,组成了一个字符串。这个结果后面的过程就是,现将num数字转换为字符串,然后再将两个字符串相互连接。

  1. <script>
  2.     var username = '100';
  3.     var num = 100;
  4.     num = num + username;
  5.     console.log(typeof(num));
  6. </script>

欢迎沟通交流~HTML5学堂

null与undefined转为数值是什么

  1. <script>
  2.     var num = 100;
  3.     console.log(num + null);        // 打印100
  4.     console.log(num * null);        // 打印0
  5.     console.log(num + undefined);    // 打印NaN
  6.     console.log(num * undefined);    // 打印NaN
  7. </script>

最初的区分方式

null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

目前的用法

上面这种想法是好的,但是在实际操作中证明并不是那么可行,目前,null和undefined基本是同义的,只有一些细微的差别。

null表示"没有对象",即该处不应该有值。

null出现在哪里?

对于函数的参数,为了表示该函数的参数不是对象,会使用null。这种用法在传参时经常遇到此类应用

对象原型链的终点是null

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。

undefined会出现在哪里?

1 变量被声明了,但没有赋值,默认为undefined

2 调用函数时,应该提供的参数没有提供,该参数默认为undefined

3 对象没有赋值的属性,该属性的值默认为undefined

4 函数没有返回值时,默认返回undefined

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端