《AngularJS高级程序设计》——5.8 比较undefined和null值

5.8 比较undefined和null值

JavaScript定义了两个特别的值,当你比较它们时你得小心:undefined和null。当你读取没有赋值的变量或试图取不存在的对象属性时会返回undefined。清单5-38展示了JavaScript中undefined是如何使用的。

清单5-38 在文件jsdemo.html中的特殊值undefined

该清单输出如下:

JavaScript还定义了另一个特殊值null,这很少见。Null值与undefined稍有不同。当值没有被定义时返回undefined,而当你想指出你赋了值但值不是有效的对象、字符串、数字或布尔时使用null,也就是说,你定义了没有值的值。为了有助于明确这一点,清单5-39显示了从undefined到null的转化。

清单5-39 在文件jsdemo.html中使用undefined和null

我创建对象,然后试图取weather属性的值,它还没定义:

没有weather属性,所以调用myData.weather返回了undefined,然后使用关键字in来确定对象是否包含属性,返回false。这两条语句的输出如下:

接着,我为weather属性赋值,这可以为对象添加属性:

我读取属性的值,并再次查看对象上属性是否存在。如你所预料的,对象定义了属性,其值为sunny:

现在我设属性的值为null,像这样:

该效果有点特别。属性仍然被定义在对象上,但我指明了不包含值。当我再次执行我的检查,我得到了如下结果:

该差异就比较undefined和null而言是很重要的,因为null是对象,而undefined是独立的一个类型。

检查null或undefined
如果你想检查属性是否是null或undefined(你不在意它),那你可以简单地使用if语句和否定运算符(!),如清单5-40所示的。

清单5-40 在文件jsdemo.html中检查属性是否为null或undefined

该技术依赖于JavaScript执行类型强制转换,以至于你想检查的值被当作布尔值对待。如果变量或属性为null或undefined,那被强制转换的布尔值是false。清单产生该输出:

提示:
你可以将||运算符和null值一起用,在第9章中能看到该技术的演示。
你也可以使用AngularJS的angular.isDefined和angular.isUndefined方法,如清单5-41所示。

清单5-41 在文件jsdemo.html中使用测试值的定义的AngularJS方法

这些方法仅检查值是否已被定义,但不检查是否为null,也不能用于区别null和undefined值。在清单中我使用了angular.isDefined方法检查属性已定义和已赋值,已经被定义却不是null的值,和未定义的值。该示例产生如下控制台输出:

时间: 2024-09-19 23:55:15

《AngularJS高级程序设计》——5.8 比较undefined和null值的相关文章

《AngularJS高级程序设计》——导读

前言 AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中,并且得到众多前端工程师的青睐. 本书是AngularJS程序设计的高级指南.全书共25章,分为3个部分,每部分覆盖一组相关话题.第1部分为第1章到第8章,包括AngularJS简介,以及HTML.CSS和JavaScript的基础知识.第2部分为第9章到第17章,引导读者熟悉AngularJS库的各种特性,从对一个AngularJS应用程序中各种不同组件的概览开始,依次深入介绍每种类型的组件.第3部分为第18

Javascript基础_简单比较undefined和null 值_基础知识

JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心.在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4UndefinedAndNull</title> </head

《AngularJS高级程序设计》——2.3 基本功能之外

2.3 基本功能之外 我定义了基本的MVC构件,这样,就创建了一个本章开始时的静态模拟程序的动态版本.现在我们已经有了一个较为坚固的基础了,就可以使用一些更高级的技术来增添功能并创建一个更为完整的应用.在下面各节中,我将对这个待办事项应用使用不同的AngularJS特性,并解释将在本书中的何处更详细地介绍这些特性. 2.3.1 使用双向模型绑定 在前一节中所使用的绑定被称为单向绑定,其值是从模型中取得的,并用于操作模板中的元素.在Web应用开发中这是相当标准的做法和广泛应用的技术.例如,在使用j

《AngularJS高级程序设计》——5.4 定义并使用函数

5.4 定义并使用函数 当浏览器处理HTML文档时,它会一个挨一个地往下读.当其遇到script元素,就立刻按其定义顺序执行所包含的JavaScript语句. 这就是前面的例子中发生的,向控制台写了两条消息.你也可以将多条语句包成函数,在浏览器遇到调用该函数的语句前它不会执行,如清单5-4所示. 清单5-4 在文件jsdemo.html中定义JavaScript函数 定义函数很简单:使用function关键字,后面跟着你想的函数名,然后是一对括号("("和")").

《AngularJS高级程序设计》——5.5 使用变量及类型

5.5 使用变量及类型 在前面的例子中你看到了如何定义变量:你用var关键字,然后可选地在语句中为变量赋值.在函数中定义的变量是本地变量,适合仅在函数内使用.直接定义在script元素中的变量是全局变量,可在任意位置访问,包括同一HTML文档中的其他脚本.清单5-8演示了本地和全局变量的使用. 清单5-8 在文件jsdemo.html中使用本地和全局变量 JavaScript是动态类型语言.这并不说明JavaScript没有类型.它只是说你并非一定要显式声明变量类型,你可以轻而易举地为同一变量赋

《AngularJS高级程序设计》——1.5 如何搭建你的开发环境

1.5 如何搭建你的开发环境 从一个浏览器.一个文本编辑器和一个Web服务器就可以开始你的AngularJS开发之旅.客户端Web应用开发的好处之一就是你可以挑选并组合一系列开发工具,以创建一个适合你工作风格和编程实践的环境.在下面的各节中,我将描述我所使用的环境,以便你可以在自己的工作站上重新创建它.1.5.1 选择Web浏览器 AngularJS在任何现代浏览器上都可以工作,你应该在你的用户有可能使用到的所有浏览器上测试你的应用.不管怎样,你需要一个为开发而用的浏览器,以便于搭建出开发环境,

《AngularJS高级程序设计》——第5章 JavaScript基础 5.1准备示例项目

第5章 JavaScript基础 在本章中,我提供了JavaScript语言最重要特性的快速指南,它们适用于本书.我没有余力完整地讲解JavaScript,但我会专注其本质,即你需要快速了解情况并随着本书的示例走.除了最重要的JavaScript语言核心特性外,我还会讲述AngularJS提供的工具方法集. 通过演示JavaScript如何使用承诺,我完成了这一章.承诺代表异步任务,比如Ajax请求,而且它们在AngularJS应用中是广泛使用的,我在第21章会再谈这一话题.我还讲到Angula

《AngularJS高级程序设计》——1.6 小结

1.6 小结 在本章中,我描述了本书内容和结构的大致轮廓,以及AngularJS Web开发所需要的软件.就像之前所说的,学习AngularJS开发最好的方式就是通过实例学习,所以在第2章中我将直接开始演示如何创建你的第一个AngularJS应用程序.

《AngularJS高级程序设计》——5.11 小结

5.11 小结 在本章中我提供了JavaScript语言的简单基础,以及AngularJS为补充核心语言特性而提供的实用方法.我还介绍了承诺以及AngularJS对JSON的支持,它们二者是使用Ajax并实现我在第3章中讲的单页面应用程序模型所必不可少的.我不能在本书中提供完整的JavaScript描述,但我在这讲述的特性是我在本书中的示例所最常使用的,并且应该足够你跟上我对AngularJS开发不同方面的讲解.