3.1 JavaScript对象类型

在JavaScript中，对象类型分为三种：本地对象、内置对象和宿主对象。

➢ 本地对象（native object）是ECMAScript定义的引用类型。

➢ 内置对象（built-in object）指的是无须实例化可直接使用的对象，其实也是特殊的本地对象。

➢ 宿主对象（host object）指的是用户的机器环境，包括DOM和BOM。

3.1.1 本地对象

在JavaScript中，常用的对象有Array、Number、Date和Object等。

➢ Array：用于在单独的变量名中存储一系列的值。

➢ Number：用于处理整数、浮点数等数值。

➢ Date：用于操作日期和时间。

➢ Object：在JavaScript中，所有类型都是对象，例如字符串、数字、数组等，这些可以带有属性和方法的变量称为对象。

1．Array（数组）

在JavaScript中可以使用Array（数组）类型在单个变量中存储一系列的值。例如：

数组是从0开始计数的，因此第一个元素的下标是[0]，后面每新增一个元素下标+1。使用Array类型存储数组的特点是无须在一开始声明数组的具体元素数量，可以在后续代码中陆续新增数组元素。

如果一开始就可以确定数组的长度，即其中的元素不需要后续动态加入，可直接写成：

或：

此时数组元素之间使用逗号隔开。Array对象还包含了length属性，可以用于获取当前数组的长度，即数组中的元素个数。如果当前数组中没有包含元素，则length值为0。例如：

Array对象还包含了一系列方法用于操作数组，常用方法如表3-1所示。

【示例1】 JavaScript Array对象的简单应用

示例1在浏览器中的运行效果如图3.1所示。

2．Number（数字）

Number对象用于处理整数、浮点数等数值，常用的属性和方法如表3-2所示。

下面通过具体代码演示Number对象的使用。

在上述示例中，MAX_VALUE和MIN_VALUE是直接通过构造函数Number进行访问的，而不是使用Number的实例对象进行访问的，这是因为这两个属性是Number的静态成员。

3．String（字符串）

String对象中包含了一系列方法，常用方法如表3-3所示。

（1）字符串长度

在字符串中，每一个字符都有固定的位置，其位置从左往右进行分配。以单词“HELLO”为例，其位置规则如图3.2所示。首字符H从位置0开始，第二个字符E是位置1，以此类推，直到最后一个字符O的位置是字符串的总长度减1。

（2）获取字符串中的单个字符

在JavaScript中，可以使用charAt()方法获取字符串指定位置上的单个字符。其语法结构如下：

语法

其中index参数值填写需要获取的字符所在的位置。例如：

如果需要获取指定位置上单个字符的字符代码，可以使用charCodeAt()方法。其语法结构如下：

语法

其中index参数值填写需要获取的字符所在的位置。例如：

（3）连接字符串

在JavaScript中可以使用concat()方法将新的字符串内容连接到原始字符串上。其语法结构如下：

语法

该方法允许带有一个或多个参数，表示按照从左往右的顺序依次连接这些字符串。

例如：

也可以直接使用加号（+）进行字符串的连接，其效果相同。因此上述示例代码可改为：

（4）查找字符串是否存在

使用indexOf()和lastIndexOf()方法可以查找原始字符串中是否包含指定的字符串内容。其语法格式分别如下：

语法

和：

其中，searchString参数位置填入需要用于对比查找的字符串片段，startIndex参数用于指定搜索的起始字符，该参数内容如果省略则按照默认顺序搜索全文。

indexOf()和lastIndexOf()方法都可以用于查找指定内容是否存在，如果存在，其返回值为指定内容在原始字符串中的位置序号；如果不存在，则直接返回-1。区别在于，indexOf()是从序号0的位置开始正序检索字符串内容的，而lastIndexOf()是从序号最大值的位置开始倒序检索字符串内容的。

（5）查找与替换字符串

在JavaScript中使用match()或search()方法可以查找匹配正则表达式的字符串内容。match()方法的语法格式如下：

语法

在参数regExp的位置需要填入一个正则表达式，例如，match(/a/g)表示全局查找字母a，后面的小写字母g是英文单词global的首字母简写，表示全局查找。其返回值为符合条件的所有字符串片段。

search()方法的语法格式如下：

语法

在参数regExp的位置同样需要填入一个正则表达式。不同之处在于，search()方法的返回值是符合匹配条件的字符串索引值。在JavaScript中使用replace()方法可以替换匹配正则表达式的字符串内容。replace()方法的语法格式如下：

语法

在参数regExp的位置需要填入一个正则表达式，在参数replaceText的位置填入需要替换的新的文本内容。例如，replace(/a/g,"A")表示的是把所有的小写字母a都替换为大写形式。该方法的返回值是已经替换完毕的新字符串内容。

【示例2】 JavaScript查找和替换字符串

示例2在浏览器中的运行效果如图3.3所示。

本例在JavaScript中声明了变量msg作为测试样例，分别使用match()、search()与replace()方法查找和替换字符串，最后使用alert()方法输出全部的返回结果。

由图3.3可见，search()方法可获取指定内容的所在索引位置，而match()方法是把符合条件的所有字符串以逗号隔开的形式全部展现出来。其中，\d表示数字0～9的任意一个字符，/g表示全局查找。replace()方法将原字符串中所有的小写字母a均替换成大写字母的形式。如果没有加全局字符g，则只会替换其中第1个小写字母a。

（6）获取字符串片段

在JavaScript中，可以对字符串类型的变量使用slice()和substring()方法截取其中的字符串片段。其中slice()方法用于提取指定片段，substring()方法用于节选指定片段。slice()方法语法格式如下：

语法

其中，在start参数位置填写需要删除的字符串的第一个字符位置，在end参数位置填写需要删除字符串的结束位置（不包括该位置上的字符），如果end参数省略则默认填入字符串长度。如果填入的属性值为负数，表示从字符串的最后一个位置开始计算，例如-1表示倒数第一个字符。substring()方法语法格式如下：

语法

与slice()方法的语法结构类似，其中start参数位置填写需要节选的字符串的第一个字符位置，end参数位置填写需要节选字符串的结束位置（不包括该位置上的字符）。同样，如果end参数省略则默认填入字符串长度。

当参数均为非负数时，substring()与slice()方法获取的结果完全一样。只有参数值存在负数情况时，这两个方法才会有所不同：substring()方法会忽略负数，直接将其当作0来处理；而slice()方法会用字符串长度加上该负数数值，计算出对应的位置。例如：

【示例3】 JavaScript获取字符串片段的简单应用

示例3在浏览器中的运行效果如图3.4所示。本示例在JavaScript中声明了变量msg作为字符串测试样例，其中字符串内容为"Hello JavaScript"，共计16个字符位置，分别使用substring(0,5)和slice(0,-11)方法进行字符串节选，最后使用alert()方法输出返回结果。由示例运行效果图可见，substring(0,5)方法获取了从第0位开始到第5位结束（不包括第5位本身）的所有字符。slice(0,-11)方法因为带有负数11，表示倒数第11位字符，将其加上字符串长度换算后得到slice(0,5)，在没有负数的情况下与substring(0,5)效果完全相同，因此得到同样的结果。

（7）字符串大小写转换

在JavaScript中可以对字符串类型的变量使用toLowerCase()和toUpperCase()方法转换其中存在的大小写字母。其中toLowerCase()表示将所有字母转换为小写，toUpperCase()表示将所有字母转换为大写。

【示例4】 JavaScript字符串大小写转换

示例4在浏览器中的运行效果如图3.5所示。

（8）转义字符

在前几节的例题中我们看到了alert()方法中带有\n符号表示换行，这种符号称为转义字符。与C语言、Java语言相似，在JavaScript中String类型也包含了一系列转义字符。具体情况如表3-4所示。

4．Date（日期）

JavaScript中的对象与Java中的类非常相似，需要使用“new对象名()”的方法创建一个实例，语法格式如下：

语法

➢ 日期实例是存储Date对象的变量。可以省略参数，如果没有参数，则表示当前日期和时间，例如：

➢ 参数是字符串格式"MM DD，YYYY，hh：mm：SS"，表示日期和时间，例如：

Date对象有大量用于设置、获取和操作日期的方法，从而实现在页面中显示不同类型的日期时间。其中，常用的是获取日期的方法，如表3-5所示。

➢ getFullYear()返回四位数的年份，getYear()返回二位或四位的年份，getFullYear()常用于获取完整年份。

➢ 获取星期几使用getDay()：0表示周日，1表示周一，6表示周六。

➢ 各部分时间表示的范围：除号数（一个月中的每一天）外，其他均从0开始计数。例如，月份0～11，0表示1月份，11表示12月份。

下面使用Date对象的方法显示当前时间的小时、分钟和秒，代码如示例5所示。

【示例5】 时钟特效

在示例5中，使用Date对象的getHours()方法、getMinutes()方法和getSeconds()方法获取当前时间的小时、分钟和秒数，通过innerHTML属性将时间显示在id为myclock的div元素中。

在JavaScript中使用Date对象处理与时间、日期有关的内容，有四种初始化方式，列举如下：

可以用Date对象的一系列方法分别获取指定的内容，Date对象的常见方法如表3-6所示。

【示例6】 JavaScript Date对象的简单应用

示例6在浏览器中的运行效果如图3.6所示。

5．Object（对象）

在JavaScript中，所有类型都是对象，例如字符串、数字、数组等，这些可以带有属性和方法的变量称为对象。例如String对象包含了length属性用于获取字符串长度，也包含了subString()、indexOf()等方法用于处理字符串。

属性是与对象相关的值，方法是对象可执行的动作。例如，将学生作为现实中的对象，他具有学号、姓名、班级、专业等属性值，也可以具有选课、学习和考试等行为动作。

在JavaScript中创建student对象的写法如下：

获取对象中的指定属性有两种方法，一是对象变量名称后面加点（.）和属性名称（对象名.属性名）；二是对象变量名称后面使用中括号和引号包围属性名称（对象名["属性名"]）。仍然以上面的student对象为例，获取其中学生姓名的写法如下：

或：

还可以用该方法直接修改对象中的属性值，例如将之前的学生姓名张三换成新内容：

【示例7】 JavaScript Object对象的简单应用

示例7在浏览器中的运行效果如图3.7所示。

3.1.2 内置对象

1．Global对象

在JavaScript中Global对象又称为全局对象，其中包含的属性和函数可以用于所有的本地JavaScript对象。Global对象的全局属性和方法分别如表3-7和表3-8所示。

说明

全局对象是预定义的对象，作为JavaScript的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。

在顶层JavaScript代码中，可以用关键字this引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript代码引用parseInt()函数时，它引用的是全局对象的parseInt属性。全局对象是作用域链的头，还意味着在顶层JavaScript代码中声明的所有变量都将成为全局对象的属性。

全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。

将JavaScript代码嵌入到一个特殊环境中时，全局对象通常具有环境特定的属性。实际上，ECMAScript标准没有规定全局对象的类型，JavaScript的实现或嵌入的JavaScript都可以把任意类型的对象作为全局对象，只要该对象定义了这里列出的基本属性和函数。例如，在允许通过LiveConnect或相关的技术来脚本化Java的JavaScript实现中，全局对象被赋予了这里列出的java和Package属性以及getClass()方法。而在客户端JavaScript中，全局对象就是Window对象，表示允许JavaScript代码的Web浏览器窗口。

2．Math对象

Math对象提供了许多与数学相关的功能，它是JavaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。Math对象的常用方法如表3-9所示。

random()方法返回的随机数包括0，不包含1，且都是小数，如果想选择一个1～100中的整数（包括1和100），则代码如下所示：

如果希望返回的整数为2～99，只有98个数字，第一个值为2，则代码如下所示：

下面使用ceil()和random()随机选择颜色，代码如示例8所示。

【示例8】 选择颜色

在浏览器中打开示例8，如图3.8所示，点击“选择颜色”按钮，随机显示一种颜色，如图3.9所示。

在JavaScript中Math对象用于数学计算，无须初始化创建，可以直接使用关键字Math调用其所有的属性和方法。Math对象的常用属性和常用方法分别如表3-10和表3-11所示。

【示例9】 JavaScript Math对象的简单应用

示例9在浏览器中的运行效果如图3.10所示。

3.1.3 宿主对象

宿主对象包括HTML DOM（文档对象模型）和BOM（浏览器对象模型）。具体内容和用法请参考后面的章节内容。

3.1.4 技能训练

上机练习1 制作年历

需求说明

利用prompt()函数接收用户设置的年份，制作如图3.11所示的年历。

代码实现思路

➢ 利用prompt()函数接收用户设置的年份。

➢ 编写calendar()函数，根据指定的年份生成年历。

➢ 设计并输出日历的显示样式。

➢ 获取指定年份1月1日的星期值，获取每个月共有多少天。

➢ 循环遍历每个月中的日期。

➢ 将日期显示到对应的星期下面。