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

5.5 使用变量及类型

在前面的例子中你看到了如何定义变量:你用var关键字,然后可选地在语句中为变量赋值。在函数中定义的变量是本地变量,适合仅在函数内使用。直接定义在script元素中的变量是全局变量,可在任意位置访问,包括同一HTML文档中的其他脚本。清单5-8演示了本地和全局变量的使用。

清单5-8 在文件jsdemo.html中使用本地和全局变量

JavaScript是动态类型语言。这并不说明JavaScript没有类型。它只是说你并非一定要显式声明变量类型,你可以轻而易举地为同一变量赋值不同类型。JavaScript会根据你为变量赋的值确定其类型,然后根据它们使用时的上下文在类型间自由转换。清单5-8的结果如下:

在AngularJS开发中使用全局变量是不被赞成的,因为它其实破坏了关注点的分离(我在第3章讲过的),并使其执行单元测试更困难(我在第25章中讲述)。一般来说,如果你必须使用全局变量让两个组件交流,那说明应用程序的设计已经错了。

5.5.1 使用基本类型
JavaScript定义了一组基本类型:string(字符串)、number(数字)和boolean(布尔)。这可能看起来像个简表(short list),但JavaScript设法为这三个类型做了很大的灵活性。

1.使用布尔
布尔类型有两个值:true和false。清单5-9列出了二者的使用,但该类型是条件语句中最常用的,比如if语句。该清单没有控制台输出。

清单5-9 在文件jsdemo.html中定义布尔值

2.使用字符串
你可以使用双引号或单引号定义字符串,如清单5-10所示。

清单5-10 在文件jsdemo.html中定义字符串变量

你使用的引号必须匹配。举个例子,你不能用单引号开始一个字符串又用双引号结束。该清单没有控制台输出。AngularJS包含三个工具方法可以让字符串的使用更容易些,如表5-2中所述。
表5-2  处理字符串的AngularJS方法

你可以在清单5-11看到全部三个与字符串相关的AngularJS的方法。

清单5-11 在文件jsdemo.html中使用AngularJS与字符串相关的方法

方法angular.isString用于当你处理不确定类型的对象时。这是AngularJS为键入的对象提供的若干方法之一,本章会常常讲到。方法angular.uppercase和angular.lowercase做的也许正如你所想象的,清单中的语句在控制台中产生如下输出:

3.使用数字
数字类型常用于代表整数(integer)和浮点数(floating-point)的数字(也称为实数)。清单5-12以供演示。

清单5-12 在jsdemo.html文件中定义数字值

你无需指定你所用数字的类型。你只需表示你需要的值,然后JavaScript会顺势而为。在清单中,我定义了整数,定义了浮点数,以及以0x为前缀的值用来表示十六进制数值。

AngularJS为标准JavaScript功能补充了angular.isNumber方法,传给它对象或值,如果是数字则返回true,否则返回false。该示例在控制台中产生了以下输出:

5.5.2 创建对象
有不同的方式创建JavaScript对象。清单5-13给出了简单示例。

提示:
JavaScript提供了对原型继承的支持,它允许新对象去继承功能。这并没在JavaScript中广泛使用,但我会在第18章中简单介绍,因为它是支持AngularJS服务被创建的方式之一。
清单5-13 在文件jsdemo.html中创建对象

我调用new Object()创建了对象,并将结果(刚创建的对象)赋给了变量myData。一旦对象被创建,我仅通过赋值就可以在该对象上定义属性,像这样:

在该语句之前,我的对象没有属性name。在该语句被执行后,属性存在了,它被赋值了“Adam”。你可以用句点1连接变量名和属性名来读取属性的值,像这样:

清单结果如下:

1.使用对象字面量
你可以使用对象字面量格式一步到位地定义对象及其属性。清单5-14显示了这是如何做的。

清单5-14 在文件jsdemo.html中使用对象字面量格式

每个你想定义的属性都用冒号(:)与其值隔开,属性间用逗号(,)隔开。这和前面的例子有相同效果,清单结果如下:

2.使用函数作为方法
我最喜爱的JavaScript特性之一就是你可以为对象添加函数的方式。被定义在对象上的函数叫方法(method)。清单5-15显示你可以如何以此种方式添加方法。

清单5-15 在文件jsdemo.html文件中为对象添加方法

在本例中,我使用了函数创建方法printMessage。注意参考由对象定义的属性,我必须使用this关键字。当函数用来作为方法时,被调用的方法所依附的对象就暗中通过特殊变量this作为参数传入了函数。清单输出如下:

3.扩展对象
AngularJS通过angular.extend方法,使从一个对象往另一个对象复制方法和属性变得容易,在清单5-16中我演示了它。

清单5-16 在文件jsdemo.html中扩展对象

在本例中我创建了带有city属性的对象,并将它赋值给了变量myExtendedObject。然后我使用angular.extend方法从myData对象上复制所有的属性和函数到myExtendedObject上去。最后,演示原有和复制属性的混合,我使用console.log方法写出name和city属性的值,控制台产生的输出如下:

提示:
方法extend保存目标对象上的所有属性和方法。如果你想无保留地创建对象的副本,那你可以使用angular.copy方法代替。
5.5.3 使用对象
一旦你创建了对象,你就可以用它们做一些事。在下面的段落中,我会讲在本书后面都会用到的活动。

1.检查对象
AngularJS提供angular.isObject方法,如果随之被调用的参数是对象则返回true,否则返回false,如清单5-17所演示的。

清单5-17 在文件jsdemo.html中检查对象

我定义了对象、字符串和数字,并全都使用angular.isObject方法判定它们,在控制台产生了如下输出:

2.读取和修改属性的值
最显而易见的要用对象做的事是,读取或修改赋给对象所定义属性的值。有两种你可以使用的不同语法风格,二者皆在清单5-18中所示。

清单5-18 在文件jsdemo.html中读取和修改对象属性

第一种风格是众多程序员所熟悉的,我在前面示例中用到过。你用句点把对象名称和属性名称连在一起,像这样:

你可以使用等号(=)为属性赋一个新值,或忽略它而读取当前值。第二种风格就是数组风格的索引,像这样:

在这种风格中,你在方括号(“[”和“]”)之间指定你要的属性名称。它可能是个方便的存取属性的方式,因为你可以把你感兴趣的属性名作为变量传入,像这样:

这是你如何枚举对象属性的基础,我一会儿讲它。这里是清单在控制台的输出。

3.枚举对象的属性
枚举对象的属性要使用for...in语句。清单5-19显示了你可以如何使用该语句。

清单5-19 在文件jsdemo.html中枚举对象的属性

循环for...in是标准的JavaScript特性,为myData对象中的每个属性执行代码块中的语句。变量prop被赋值为每个迭代中所处理的属性名称。我使用数组索引风格从对象中取回属性的值。

AngularJS提供的angular.forEach方法是另一个选择,它要的是一个对象和一个将为其每个属性执行的函数。通过value和key参数将当前属性值及其名称传给函数。效果和使用for...in循环一样,正如以下控制台输出所示:

从结果中,你可以看到我在myData对象上作为方法而定义的函数同时以两种情况枚举。这正是JavaScript处理函数的灵活方式所致,但在你刚接触JavaScript时有些事还是需要注意的。

4.添加和删除属性和方法
即使你已经使用对象字面量风格定义了新属性,你仍然可以在对象上定义它。清单5-20做出了演示(本段清单未产生任何控制台输出)。

清单5-20 在文件jsdemo.html中为对象添加新属性

在该清单中,我为对象dayOfWeek添加了新属性。我使用了点标记(用句点把对象和属性的名称连接起来),但我也能轻易地使用索引风格标记。正如你现在可能期望的,你也可以通过将属性的值设为函数为对象添加新方法,如清单5-21所示。

清单5-21 在文件jsdemo.html中为对象添加新方法

你可以使用delete关键字从对象上删除属性或方法,如清单5-22所示。

清单5-22 在文件jsdemo.html中从对象上删除属性

5.判断对象是否拥有属性
你可以使用in表达式查看对象是否拥有某属性,如清单5-23所示。

清单5-23 在文件jsdemo.html中查看对象是否拥有某属性

在本例中,我测试了存在和不存在的属性。变量hasName的值是true,变量hasData的值是false,如下:

时间: 2024-11-02 21:59:55

《AngularJS高级程序设计》——5.5 使用变量及类型的相关文章

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

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

《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.8 比较undefined和null值

5.8 比较undefined和null值 JavaScript定义了两个特别的值,当你比较它们时你得小心:undefined和null.当你读取没有赋值的变量或试图取不存在的对象属性时会返回undefined.清单5-38展示了JavaScript中undefined是如何使用的. 清单5-38 在文件jsdemo.html中的特殊值undefined 该清单输出如下: JavaScript还定义了另一个特殊值null,这很少见.Null值与undefined稍有不同.当值没有被定义时返回un

《AngularJS高级程序设计》——5.6 使用JavaScript运算符

5.6 使用JavaScript运算符 JavaScript定义了大量标准的运算符集.我在表5-3中概括了最有用的. 表5-3 有用的JavaScript运算符5.6.1 使用条件语句许多JavaScript运算符是和条件语句一起使用的.在本书中,我倾向使用if/else和switch语句.清单5-24展示了两者的使用(如果你使用过几乎所有编程语言,那你会很熟悉). 清单5-24 在文件jsdemo.html中使用if/else和switch条件语句 清单结果如下: 5.6.2 对比等于运算符和

《AngularJS高级程序设计》——2.2 使用AngularJS

2.2 使用AngularJS 对于要创建的基本功能来说,todo.html文件中的静态HTML目前仅作为占位符使用.用户应该能看到待办事项的列表,勾选掉已完成的事项,并创建新事项.在下面各节中,我打算将AngularJS加进来,并应用一些基本特性来为我的待办事项应用赋予生命.简单起见,假定只有一个用户,并且不用考虑保留应用程序中的数据状态.2.2.1 将AngularJS应用到HTML文件将AngularJS加入到HTML文件中是挺简单的,只需简单增加一个script元素来引入angular.

《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应用程序.