素材巴巴 > 程序开发 >

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

程序开发 2023-09-12 08:54:20

本节书摘来自异步社区《AngularJS高级程序设计》一书中的第5章,第5.5节,作者:【美】Adam Freeman(弗里曼)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

5.5 使用变量及类型

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

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

screenshot

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

screenshot

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

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

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

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

screenshot

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

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

screenshot

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

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

screenshot

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

screenshot

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

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

screenshot

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

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

screenshot

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

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

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

screenshot

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

screenshot

清单结果如下:

screenshot

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

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

screenshot

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

screenshot

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

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

screenshot

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

screenshot

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

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

screenshot

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

screenshot

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

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

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

screenshot

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

screenshot

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

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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

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

screenshot

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

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

screenshot

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

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

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

screenshot

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

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

screenshot

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

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

screenshot

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

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

screenshot

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

screenshot


标签:

上一篇: 【Spring】13.SpringMvc 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。