九、对象
在 JavaScript 中，对象是一个无序的属性列表。属性由名称和值组成，也可以是函数。在这种情况下，该函数称为方法。本章涵盖了用 JavaScript 编码时需要熟悉的一些标准对象。它还提供了它们的属性和最可能使用它们的方法的例子。本章还介绍了数组、布尔对象、字符串对象和日期对象。
重新访问的对象
清单 9-1 给出了一个对象的简单例子。
清单 9-1。对象示例
<html>
<body>
<script>
var book = {novel: "Secret", author: "Rhonda Byrne", publicationDate: "Nov 2006"};
console.log(book.novel + " this book is of author " + book.author);
</script>
</body>
</html>
如本例所示，一个对象包含一个项目列表，列表中的每个项目都有一个名称-值对。这些属性的名称是 novel、author 和 publicationDate，每个属性都被赋予一个值。该代码的输出如图 9-1 所示。
图 9-1。输出
排列
正如您在本书前面看到的，数组对象允许您在一个变量名下存储多个值。索引号从 0 开始，数组的第一个元素表示为[0]，第二个表示为[1]，依此类推。
数组创建的语法是
var arrayName = [value1, value2, .... Valuen]
考虑清单 9-2 中数组文字的简单例子。
清单 9-2。数组文字示例
<html>
<body>
<script>
var countries = ["India", "Germany", "Scotland"];
console.log(countries);
</script>
</body>
</html>
此示例将变量 countries 声明为一个数组，它包含元素 India、Germany 和 Scotland。接下来，使用 console.log 方法打印 countries 数组。正如您所看到的，这个例子没有指定任何要打印的索引或元素。这段代码给出了一个数组的最大长度。
图 9-2。输出
如果在 console.log 语句中没有指定数组的元素索引，则显示元素的总数，而不是每个元素的内容。
现在考虑清单 9-3 中带有索引的数组的相关示例。
清单 9-3。带索引的数组示例
<html>
<body>
<script>
var countries = ["India", "Germany", "Scotland"];
console.log(countries[0], countries[1], countries[2]);
</script>
</body>
</html>
使用与清单 9-2 中相同的起始基本代码，这个例子展示了如何通过指定数组索引号来访问数组的各个元素。该代码的输出如图 9-3 所示。
图 9-3。输出
数组也可以使用新的关键字来定义，如清单 9-4 中的例子所示。
清单 9-4。带有索引示例的新数组
<html>
<body>
<script>
var countries = new Array( "India", "Germany", "Scotland" );
console.log(countries[0], countries[1], countries[2]);
</script>
</body>
</html>
这采用了相同的初始示例，并添加了关键字 new。两个例子的工作方式完全相同；唯一的区别是清单 9-4 创建了一个新数组。该代码的输出如图 9-4 所示。
图 9-4。输出
注意
如果可能的话，创建没有新关键字的数组，这样会更快。
数组对象的属性
表 9-1 列出并描述了数组对象的三个最常用属性。
表 9-1。数组对象的属性
|
财产
|
描述
| | --- | --- | | 构造器 | 返回数组函数 | | 指数 | 返回字符串中匹配项的从零开始的索引 | | 长度 | 给出数组的长度 |
接下来将更详细地描述构造函数和长度属性。
属性构造函数
构造函数属性的语法是
array.constructor
这将返回函数 Array(){[本机代码] }。清单 9-5 中显示了一个简单的例子。
清单 9-5。数组构造函数属性示例
<html>
<body>
<script>
var countries = new Array( "Germany", "India", "Scotland" );
console.log("countries.constructor is:" + countries.constructor);
</script>
</body>
</html>
此示例使用 new 关键字声明数组 countries，然后使用 console.log 显示 countries.constructor。此代码的输出如图 9-5 所示。
图 9-5。输出
属性长度
顾名思义，length 属性包含数组的长度。元素的数量以整数形式指定。长度属性的语法是
array.length
这将返回数组长度，即元素的总数。清单 9-6 提供了这个属性的一个工作实例。
清单 9-6。数组长度属性示例
<html>
<body>
<script>
var countries = new Array( "Germany", "India", "Scotland", "Austria" );
console.log("Length of array is:" + countries.length);
</script>
</body>
</html>
图 9-6。输出
数组方法
数组对象包含许多方法，表 9-2 中列出并描述了其中一些方法。
表 9-2。数组对象的方法
|
方法
|
描述
| | --- | --- | | concat() | 合并两个或多个数组并返回新数组。 | | forEach() | 对数组中的每个元素执行指定的函数。 | | 加入() | 将数组的元素组合成一个字符串。 | | lastIndexOf() | 返回在数组中找到给定元素的最后一个索引。如果元素不在数组中，则返回-1。 | | 流行() | 移除并返回数组的最后一个元素。 | | 推送() | 将一个或多个元素添加到数组末尾，并返回新的数组长度。 | | 反向() | 反转数组的顺序。 | | toString() | 以字符串形式返回数组的组成部分。 | | 排序() | 对数组元素进行排序。 | | shift() | 移除第一个元素并返回更新后的数组。 | | 切片() | 按照位置的指定剪切数组的一部分，并以字符串的形式返回数组。 |
下面是对 concat 和 pop 方法的更详细的描述。
方法串联
concat()方法的语法是
array.concat(arr1, arr2, ..., arrN);
这里，arr1 和 arr2 是数组的元素。这将返回另一个包含串联值的数组。清单 9-7 展示了一个使用这种方法的例子。
清单 9-7。Array concat()方法示例
<html>
<body>
<script>
var countries = ["Germany", "Scotland", "Austria"];
var continents = ["Europe", "Australia", "Africa"];
var world = countries.concat(continents);
console.log(" The world map has countries & continents:" + world);
</script>
</body>
</html>
此示例声明了两个数组，一个包含可变的国家，另一个包含可变的洲。然后使用 concat()方法组合这两个数组元素，形成一个新数组。
图 9-7。输出
方法弹出
pop 方法从数组中移除最后一个元素并返回它的值。pop()方法的语法是
array.pop();
这将返回从数组中移除的元素或值。清单 9-8 提供了 pop()方法的一个例子。
清单 9-8。数组 pop()方法示例
<html>
<body>
<script>
var countries = ["Germany", "Scotland", "Austria"];
var value = countries.pop();
console.log(" Removed value from array is:" + value);
var value = countries.pop();
console.log(" Removed value from array is:" + value);
</script>
</body>
</html>
这个例子用一些数组元素声明变量 countries，然后使用 pop()方法。该值存储在变量值中，然后显示出来。该代码的输出如图 9-8 所示。
图 9-8。输出
布尔代数学体系的
布尔对象代表两个值:真或假。布尔值的语法是
Boolean (value)
清单 9-9 显示了布尔对象的一个例子。
清单 9-9。布尔对象示例
<html>
<body>
<script>
function myBoolean() {
console.log(10 < 15);
}
myBoolean();
</script>
</body>
</html>
此示例比较布尔值。如果 10 小于 15，代码返回 true 如果不是，则返回 false。清单 9-9 的输出如图 9-9 所示。
图 9-9。输出
布尔属性
布尔对象的属性在表 9-3 中列出并描述。
表 9-3。布尔属性
|
财产
|
描述
| | --- | --- | | 构造器 | 对象的构造函数 | | 原型 | 允许开发人员添加属性和方法 |
布尔方法
现在让我们讨论布尔对象的一些有用的方法。
方法值
valueOf()方法的语法是
boolean.valueOf()
这将返回指定布尔对象的原始值。清单 9-10 显示了一个这样的例子。
清单 9-10。布尔值 Of()方法示例
<html>
<body>
<script>
var value = Boolean(10 < 15);
var num = value.valueOf();
console.log( "Value of Boolean is:" + num.valueOf() );
</script>
</body>
</html>
此示例分配变量值，然后使用 valueOf()方法检查布尔表达式是真还是假。输出如图 9-10 所示。
图 9-10。输出
线
在 string 对象中，可以存储一系列字符，如下例所示:
var textString = "JavaScript language" or 'JavaScript language'
如图所示，您可以用单引号或双引号来编写这个系列。
弹簧属性
表 9-4 列出并描述了字符串对象的一些属性。
表 9-4。String 对象的属性
|
财产
|
描述
| | --- | --- | | 长度 | 字符串的长度 | | 构造器 | 返回对字符串函数的引用 | | 原型 | 允许开发人员向对象添加属性和方法 |
下面是对长度属性的更详细的描述。
属性长度
属性长度的语法是
string.length
这给出了字符串中的字符数，包括空格和空白。考虑清单 9-11 中的简单例子。
清单 9-11。字符串长度属性示例
<html>
<body>
<script>
var text = "JavaScript Object";
var strLength = text.length;
console.log( "The string length is:" + strLength );
</script>
</body>
</html>
这个例子显示了字符串的长度。它声明了变量 text 并给它分配了一个字符串。然后，使用属性 length 确定给定字符串中的字符数。该代码的输出如图 9-11 所示。
图 9-11。输出
字符串方法
表 9-5 中列出并描述了字符串方法。
表 9-5。字符串方法
|
方法
|
描述
| | --- | --- | | concat() | 组合两个或多个字符串。 | | 索引（） | 在字符串中搜索给定文本和主字符串中的起始位置。如果搜索不成功，它返回-1。 | | 匹配() | 根据正则表达式匹配字符串时，返回“匹配字符串”。 | | 替换() | 检查正则表达式后，用新字符串替换一个字符串。 | | 夏拉特() | 返回给定位置的字符。 | | 切片() | 基于指定的开始和结束位置移除字符并提取字符串的一部分(不包括结束字符)。 | | 拆分() | 根据给定的分隔符(如“，”)将字符串分成多个子字符串，并以数组形式返回它们。 | | 搜索() | 在字符串中搜索值或正则表达式。如果找到，则返回匹配的位置。 | | toUpperCase() | 转换为大写。 | | toLowerCase() | 转换为小写。 | | substr() | 也用于提取。但是，起始位置和要提取的字符数是指定的。 | | 包括() | 检查字符串是否包含某个字符或一组字符。 | | endsWith（） | 检查字符串是否以某个字符或一组字符结尾。 |
下面将更详细地描述 chartAt、repeat 和 slice 方法。
方法特征
方法 charAt()的语法是
String.charAt(ind)
这将返回给定位置的字符。考虑清单 9-12 中的 chartAt()例子。
清单 9-12。String charAt()方法示例
<html>
<body>
<script>
var text = "JavaScript Object";
var char = text.charAt(2);
console.log( "The character at position 2 is:" + char );
</script>
</body>
</html>
我们现在使用同一个例子来展示 charAt()方法，它标识给定索引号处的字符。(注意数组的基数是 0，所以如果你把 2 作为索引，你会得到第三个字符。)
图 9-12。输出
方法重复
方法 repeat 的语法是
String.repeat(n)
这里，字符串内容重复的次数是通过数字 n 指定的。这将返回包含重复文本的字符串。为了更好地理解这是如何工作的，考虑清单 9-13 中的例子。
清单 9-13。字符串重复()方法示例
<html>
<body>
<script>
var text = "JavaScript Object";
var string = text.repeat(2);
console.log( "The string repeats twice:" + string );
</script>
</body>
</html>
在这种情况下，声明的字符串“JavaScript Object”通过方法 repeat()写了两次。该代码的输出如图 9-13 所示。
图 9-13。输出
方法切片
方法切片的语法是
string.slice( startslice [, endSlice] );
这里，startslice 是在移除之前要提取的部分的起始位置编号，endslice 是可选的，用于从右侧移除字符串的一部分。索引(位置)是从字符串的右侧指定的(即从字符串的末尾向左计数)。之后的所有内容都被删除，不作为返回字符串的一部分发送。这个数字作为负号传递。所以，-4 表示最后四个字符。
考虑清单 9-14 中切片方法的例子。
清单 9-14。String slice()方法示例
<html>
<body>
<script>
var text = "JavaScript is also Object oriented";
var string = text.slice(4, -4);
console.log( "The new string is:" + string );
</script>
</body>
</html>
此示例声明变量 text，并为其分配字符串。起始和结束索引号在 slice 方法中指定，代码将从字符串中提取它们之间的字符。输出如图 9-14 所示。
图 9-14。输出
日期
日期对象帮助我们处理日期和时间。有四种方法可以创建该对象:
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])
日期属性
表 9-6 中列出并描述了日期属性。
表 9-6。日期属性
|
财产
|
描述
| | --- | --- | | 构造器 | 构造器 | | 原型 | 允许开发人员添加属性和方法 |
属性构造函数
constructor 属性返回创建 date 对象原型的函数。构造函数的语法是
date.constructor
考虑清单 9-15 中的构造函数属性的例子。
清单 9-15。日期构造函数属性示例
<html>
<body>
<script>
var tdyDate = new Date();
console.log(tdyDate.constructor);
</script>
</body>
</html>
这个例子用一个新的日期声明了变量 tdyDate。构造函数属性返回函数日期。输出如图 9-15 所示。
图 9-15。代码输出
日期方法
表 9-7 中列出并描述了日期对象的一些常用方法。
表 9-7。日期对象的方法
|
方法
|
描述
| | --- | --- | | getDate（） | 给出日期中的某一天(例如 1，2，3，… 31) | | getDay（） | 以数字的形式给出星期几(例如，从 0，1，2，… 6) | | getFullYear() | 返回日期中的年份(如 1978 年) | | getHours() | 给出日期的小时(例如，0，1，… 23) | | getMinutes() | 返回日期的分钟数(例如，0，1，2，… 59) | | getMonth（） | 给出日期对象的月份(例如，0，1，2，11) | | getSeconds() | 返回秒数(例如，0，1，2，3，… 59) |
对于表 9-7 中除 getDay()之外的所有方法，都有对应的 set 方法，如 setDate、setFullYear 等。
现在让我们看几个例子。
通过 getDay()方法使用属性原型
如前所述，prototype 属性允许您向对象添加属性和方法，无论它是布尔值、字符串、日期还是其他。使用 prototype 属性的语法是
Object.prototype.name = value
清单 9-16 展示了如何向日期对象添加一个新方法。
清单 9-16。日期原型属性示例
<html>
<body>
<script>
function myDay() {
var tdyDay = new Date();
tdyDay.today();
console.log(tdyDay.Day);
}
Date.prototype.today = function() {
switch (this.getDay()) {
case 0:
this.Day = "Sunday";
break;
case 1:
this.Day = "Monday";
break;
case 2:
this.Day = "Tuesday";
break;
case 3:
this.Day = "Wednesday";
break;
case 4:
this.Day = "Thursday";
break;
case 5:
this.Day = "Friday";
break;
case 6:
this.Day = "Saturday";
break;
}
};
myDay();
</script>
</body>
</html>
本示例向 date 对象添加一个新函数 today。在这个函数中，首先 getDay 函数使用。基于此，将显示一天的名称，例如 0 表示星期一，1 表示星期二，依此类推。在函数 myDay 中，定义了一个新的日期，并调用了 today 方法。
图 9-16。输出
方法 setMonth
setMonth()方法的语法是
Date.setMonth(monthValue[, dayValue])
这里，monthValue 表示从 1 月到 12 月的月份，但是为它传递的整数值必须是从 0 到 11，其中 0 表示 1 月，以此类推。dayValue 参数是可选的，表示一个月中的日期，例如 1，2，3 … 31。
清单 9-17 展示了如何在程序中使用这个方法。
清单 9-17。Date setMonth()方法示例
<html>
<body>
<script>
var d1 = new Date( "March 23, 2017 11:35:00" );
d1.setMonth( 1 );
console.log( "The date is set to: " + d1 );
</script>
</body>
</html>
此示例声明日期 d1，并使用 new 关键字为其赋值。然后它调用方法 setMonth()并传递值 1。这表示日期的新月份值。本示例将二月的新值设置为 1。
该代码的输出如图 9-17 所示。
图 9-17。程序输出
摘要
本章介绍了使用 JavaScript 时会遇到的几个基本对象，包括数组、布尔值、字符串和日期。它描述了一些与它们相关的属性和方法，并向您展示了如何使用它们来编写 JS 代码。
在第 10 章，你将探索 JSON 格式。
版权属于：月萌API www.moonapi.com，转载请注明出处
