null、NaN、undefined三者的区别是什么?

  在初次接触到JavaScript的时候,傻傻的分不清null、NaN、undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑久矣。针对这个问题,我特意查找了多方资料,在笔记本上做了详细的分析记录,但是由于纸质资料不便于携带、不便于后期查看。所以特此将笔记搬至博客园上,如有表述不正确的地方,希望大家能够给予意见,谢谢!

  1.数据类型

   ECMAScript中定义了5中简单的数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和 String。

  2.Undefined

  undefined是一个表示“无”的原始值或者表示“缺少值”,就是此处应该有一个值,但是未定义。当场尝试读取时就会返回undefined;例如变量被声明了但是没有赋值,就等于undefined。请看下边两个例子:

  

  这个例子只是声明了变量,但是未对其进行初始化。比较这个变量与undefined字面量,结果返回未true,表明他们是相等的。

  再看这个例子:

  这个例子将值undefined初始化了变量message,实际上等价于上述第一个例子的效果。但是我们根本不需要做这样子的操作,因为未经过定义的值默认就会取得undefined值,在这里进行这样的操作只是为了向大家详细地进行基础知识点的讲解以便于更好的理解。不过,包含undefined的值和尚未定义的变量还是不一样的。请看下边这个例子:

  运行上述代码就会发现,第一个弹框就会显示message的值“undefined”,而运行第二个alert弹框时,控制台会报错:'age' is not defined。但是如果用typeof分别检测声明了的变量和未声明的变量,结果竟然都是“undefined”,来看看下边这个例子:

  

  结果表明。对未初始化和未声明的变量执行typeof操作符否反悔了undefined的值。

  3.Null

  Null表示一个空对象指针,换句话说,就是一个对象被定义了,但是值为“空值”,当用typeof操作符检测null值时,返回“objec”的原因也归咎于此。如下面的例子所示:

    

  实际上undefined值时派生自null值的,所以他们的对等性能测试返回的是true:

  但是需要注意的是,对等性能测试虽然返回的是true,但无论在什么情况下都没有必要把一个变量的值显示设置为undefined,可是同样的规则对于null则不适用。换句话说,只要意在保存对象的变量还没有真正的保存对象,就应该明确地让该变量保存null值。这样做不仅可以体现null作为空对象指针的惯例,而且也有助于进一步区分null和nudefined。在自我学习的过程中,关于null让我感受最深的地方就是在闭包的应用中。大家都知道,闭包在给我们开发带来方便的同时,也埋下了一些隐患,比如内存消耗,内存泄漏的问题,那么如何解决这个问题呢?在闭包使用结束后释放掉闭包里的东西就可以了。那到底如何来释放呢?此时,我们就需要手动设置函数的引用为null,这也是我认为可以体现null作用的一点。

  4.NaN

  NaN(Not a number)表示的是尝试将一个非number的字面量、变量或者表达式转换为数字的时候返回的值。

  该值有两个特点,一是任何涉及NaN的操作都会返回NaN,比如NaN/10;二是NaN与任何值都不相等,包括NaN本身。

  因此,ECMAScript定义了isNaN()函数。该函数只接受一个任意类型参数。isNaN()在接收到一个值之后,会尝试将这个值转化为数值,那么此时就有两种情况,如果传入的参数是一些不是数值的值,那么就会被转化为数值,比如字符串“100”或Blooean值;如果传入的是参数是一些不能被转化为数值的值都会导致这个函数返回true。请看下边的例子:

  

  上述例子分别测试了5个不同的值。第一个测试的是NaN自身,那么必然返回的结果是true;第二个测试的是数值100,本来100就是数字,那么必然返回的结果是false;第三个测试的是字符串“100”,字符串“100”可以被转换为数字100,那么那么必然返回的结果是false;第四个测试的是非数字的字符串,该字符串不能被转换为数字,那么必然返回的结果就是true;最后一个测试的是Boolean,因为在Boolean中,true被转换为数字1,false被转换为数值0.那么必然返回的结果是false。

  5.总结

  在详细地分析完三种数据类型之后,现在我们来做一个总结:

  a. null表示一个对象被定义了,值为“空值”;

  b. undefined表示当一个变量已经申明,但是为赋值时返回的值;如果是未声明的变量直接带入表达式,则会产生未定义的报错;

  c. NaN表示的是尝试将非number的字面量、变量和表达式转换为数字的时候返回的值;

  d. 注意:在验证null时, 一定要使用===, 因为==无法分别null和undefined。

  

 

JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈的更多相关文章

  1. JavaScript高级程序设计第三版-读书笔记(1-3章)

    这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript   提供核心语言功能 DOM     提供访问 ...

  2. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  3. javascript高级程序设计第三版书摘

    在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...

  4. Javascript高级程序设计第三版-笔记

    1.JS数值最大值最小值: >Number.MIN_VALUE <5e-324 >Number.MAX_VALUE <1.7976931348623157e+308 判断数值是 ...

  5. 22.1 高级函数【JavaScript高级程序设计第三版】

    函数是JavaScript 中最有趣的部分之一.它们本质上是十分简单和过程化的,但也可以是非常复杂和动态的.一些额外的功能可以通过使用闭包来实现.此外,由于所有的函数都是对象,所以使用函数指针非常简单 ...

  6. 21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】

    IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLH ...

  7. 2.1 <script>元素【JavaScript高级程序设计第三版】

    向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...

  8. 14.5 富文本编辑【JavaScript高级程序设计第三版】

    富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得).在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一.虽然也没有规范,但在IE 最早 ...

  9. DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

随机推荐

  1. CentOS查看你是否有USB 3.0端口

    近来的大多数的新计算机都有了USB 3.0接口了.但是你怎么知道你的计算机有没有USB 3.0接口?这篇短文中,我们会告诉如何在Linux下知道你的系统上有USB 3还是USB3接口. 在Linux终 ...

  2. 【Java面试题】47 heap和stack有什么区别

    java的内存分为两类,一类是栈内存,一类是堆内存.栈内存是指程序进入一个方法时,会为这个方法单独分配一块私属存储空间,用于存储这个方法内部的局部变量,当这个方法结束时,分配给这个方法的栈会释放,这个 ...

  3. 如何在vs2008安装64位编译器

    1.打开D:\Microsoft Visual Studio 9.0\Microsoft Visual Studio 2008 Professional Edition - CHS setup.exe ...

  4. 学习 TList 类的实现[5]

    先来实现 TMyList.SetCapacity. 马上会想到下面代码: procedure TMyList.SetCapacity(const Value: Integer); begin   if ...

  5. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  6. C# 基础小知识之yield 关键字

    对于yield关键字我们首先看一下msdn的解释: 如果你在语句中使用 yield 关键字,则意味着它在其中出现的方法.运算符或 get 访问器是迭代器. 通过使用 yield 定义迭代器,可在实现自 ...

  7. jquery插件大全

    241个jquery插件—jquery插件大全 免费JQuery插件 推荐12款非常有用的流行 jQuery 插件

  8. mysql数据库使用mysqldump工具针对一个数据库备份,使用--databases选项与不使用该参数的区别

    需求描述: 今天在做mysqldump备份某个数据库的试验,在备份某个数据库的时候可以使用 --databases参数,也可以直接进行某个数据库的备份,那么这里记录下两者的区别 操作过程: 1.使用- ...

  9. mysql数据库中,通过一条insert into语句,同时插入多个值

    需求描述: 今天在看一本mysql的书籍,发现一个mysql中insert into好用的技巧,就是通过 1条insert into语句,插入多行数据,而不是多个insert into语句.在此记录下 ...

  10. CRC-16校验C#代码

    [csharp] view plaincopyprint? using System; using System.Collections.Generic; using System.Text; usi ...