本文介绍JavaScript中数组和函数的核心概念。数组用于存储有序数据集合，支持通过索引访问、修改及遍历元素，并可结合循环处理URL或DOM对象。函数用于封装可复用代码，支持无参数调用及带参数与返回值的设计，通过示例演示如何优化代码结构并处理时间格式化等实际场景。
JavaScript数组基础
此前我们已掌握变量、数字、字符串及对象参数的用法。接下来介绍JavaScript的另一个关键组成部分：数组。
数组本质上是一个列表容器，可用于存储各类有序数据，例如用户名单、URL集合或颜色列表等。
下面演示如何创建一个包含颜色信息的数组：
var colors = new Array("red","blue","green");
创建数组后，其核心优势在于可以通过数字索引访问各个元素。数组索引从0开始，首个元素的索引号为0，调用方式如下：
var the_element = colors[0];
执行上述代码时，变量the_element将被赋值为字符串"red"。通过数组名配合方括号内的索引号，即可获取对应元素。注意第二个元素的索引号为1。
数组创建后，支持动态添加或修改元素值。例如，若要将颜色数组的第一个元素从红色改为紫色，操作如下：
colors[0] = "purple";
数组常与循环结构配合使用，下文将具体讲解数组与循环的应用场景。
数组的强大之处在于可通过循环遍历各元素并执行特定功能。以下示例展示如何循环遍历一个URL数组：
首先，需声明相关变量：
var url_names = new Array("hits.org","awaken.org","bianca.com");
var a_url;
接下来，通过循环遍历数组元素，依次打开每个URL，并在每次打开后等待用户点击alert框的OK按钮：
for(loop=0; loop<url_names.length;loop++)
{
// make the name of a url, for example http://www.hits.org/
a_url = "http://www." + url_names[loop] + "/";
// open a window
var new_window=open(a_url,"new_window","width=300,height=300");
// wait for the click
alert("hit ok for the next site");
}
首先注意循环条件从0遍历至url_names.length。在数组名后使用.length属性可获取元素总数。需注意，元素数量与最后一个元素的索引号不同：若数组有3个元素，长度为3，但最后一个元素的索引号为2（即array[2]），因为首个元素索引为0。若代码中数组调用出现"object not found"错误，通常是因为混淆了元素数量与索引号。
此外，.length的使用方式类似于为对象添加属性，这是因为数组本身即为对象，而length是其内置属性。
数组作为对象的另一体现是：必须使用new关键字生成新数组。如前例url_names = new Array(...)所示，该语句实际含义为生成一个新数组实例，并由url_names变量引用它。使用"new"关键字即表示创建新对象。
循环第一行生成一个变量，其值为拼接后的字符串：
a_url = "http://www." + url_names[loop] + "/";
循环初始时，loop变量值为0。url_names数组的第一个元素是字符串"hits.org"，因此第一次循环中，a_url的值为"http://www.hits.org/"。
循环的下一行利用该URL打开一个新窗口：
var new_window=open(a_url,"new_window","width=300,height=300");
由于每次打开窗口时指定的窗口名称均为"new_window"，因此切换到新URL时不会重复打开多个窗口。若省略窗口名称"new_window"，每次循环将打开一个新窗口。
循环的第三行仅用于弹出alert框，并等待用户点击OK按钮。
数组不仅可存储字符串，还可包含其他类型数据。数组在JavaScript文档对象模型（DOM）的诸多方面均有应用，下一讲将深入探讨此内容。
以下是onClick=""链接中的代码示例：
var change=prompt('Change which image (0 or 1)?','');
window.document.images[change].src='three.jpg';
本例旨在通过图片交换演示数组如何介入DOM。建议尝试运行该示例并查看源码。
document.image_name.src = 'some_image.gif';
要实现此功能，需为每个图片命名。若不知图片具体名称但知晓其在HTML页面中的顺序，可通过DOM索引指定该图片。
HTML文件中的第一张图片对应document.images[0]，第二张为document.images[1]，依此类推。若需知晓文件中图片总数，可检查图片数组长度：document.images.length。例如，若想将网页中所有图形替换为Spacer GIF图片，可执行以下操作：
for(loop=0; loop<document.images.length; loop++)
{
document.images[loop].src = 'spacer.gif';
}
逻辑是否清晰？
JavaScript函数定义
好的，下一讲我们将学习函数。
函数是编程中必须掌握的最后一种基本组成要素。所有编程语言均包含函数。函数是一段可多次调用且无需重复编写的代码块。
假设你想创建一个长文本链接，点击后可快速显示当前时间。
例如…时间!
查看源码：
<a href="#" onClick="
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
var the_time = the_hour + ':' + the_minute + ':' + the_second;
alert('The time is now: ' + the_time);">时间!</a>
此处JavaScript的具体工作细节暂不重要，稍后我们将回顾。
关键在于代码过长。若有10个此类时间链接，每次均需复制粘贴这段程序，导致HTML冗长且难以维护。此外，若需修改逻辑，必须在10个不同位置进行更改。
通过编写函数执行该逻辑，无需复制10次程序。函数使代码更易编辑且可读性更高。
下面展示如何编写一个报时函数。
该HTML页面包含一个名为announceTime的函数，并通过链接调用annoumnceTime：
<a href="#" onClick="announceTime();">时间!</a>
效果如下：
这行代码类似于第二课中的内容：
<a href="#" onClick="alert('Hello!');">Hello!</a>
这称为从链接调用警告对话框。函数类似于方法，区别在于方法依附于特定对象。在警告示例中，该对象为窗口对象。
让我们回到函数本身。查看源码可知，函数定义位于HTML文件的头部中。
<html>
<head>
<title>无参数函数</title>
<script langauge="JavaScript">
<!-- hide me
function announceTime()
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
//put together the string and alert with it
var the_time = the_hour + ":" + the_minute + ":" + the_second;
alert("The time is now: " + the_time);
}
// show me -->
</script>
</head>
<body>
...
</body>
</html>
现在逐行复习该函数。首先，所有函数遵循以下格式：
function functionName(parameter list)
{
statements ...
}
函数命名规则与变量类似：首字符必须是字母或标准符号，其余字符可为数字或横线。必须确保函数名不与已定义的变量重名，否则可能导致严重错误。我习惯使用内部大写法命名函数，以避免与字符意外重名。
函数名后跟随参数列表。本例为无参数函数，下一例将介绍带参数的情况。
参数之后是函数主体，即调用函数后执行的语句集合。在后续示例中，我将利用此报时器，并解释其工作原理。
第一行代码：
var the_date = new Date();
创建一个新日期对象。如同创建数组时需使用new关键字，获取当前时间也需先取得日期对象。新创建的日期对象会自动重置为当前日期和时间。要在对象外部获取该信息，需使用对象方法：
这些方法从日期对象中获取相应的数值。
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
你可能疑惑：如何确定日期对象具备这些方法？或如何知晓存在此类方法？这些信息源自JavaScript库。我将尽力解释内置JavaScript对象，但可能无法完全详尽。
函数的其余部分逻辑清晰：它调用返回数值的方法，将其转换为字符串，并调用警告方法弹出字符串对话框。注意可在函数内部调用其他方法和函数，我们将详细讨论。
若你测试过时间链接，可能发现某些问题。例如显示"12:12:04"，但getSecond()返回值为"4"。合成时间时，the_minute+":"+the_second的结果为14:4而非预期的14:04。解决此问题需引入新函数来修正分秒合成值。
带参数与返回值的函数
下面介绍参数及返回值。
尽管无参数函数能减少代码量并提高HTML可读性，但带参数的函数更为实用。
在前例中，当返回的分秒值小于10时会出现问题。我们希望秒值显示为04而非4。可采取以下措施：
var the_minute = the_date.getMinutes();
if (the_minute < 10)
{
the_minute = "0" + the_minute;
}
var the_second = the_date.getSeconds();
if (the_second < 10)
{
the_second = "0" + the_second;
}
这确实有效。但注意相同代码重复编写了两次：若某值小于10，则前缀加"0"。因此，当需多次使用相同代码时，应考虑使用函数。本例中我编写了一个名为fixNumber的函数：
function fixNumber(the_number)
{
if (the_number < 10)
{
the_number = "0" + the_number;
}
return the_number;
}
fixNumber的参数为the_number。参数本质上是一个变量，函数被调用时其值被设定。本例中调用方式如下：
var fixed_variable = fixNumber(4);
参数the_number在函数内部被设置为4。此时fixNumber的主体逻辑已清晰：若变量the_number小于10，则在其前添加"0"。此处新引入return指令：返回the_number的值。在以下情况中将用到return指令：
var some_variable = someFunction();
变量some_variable的值即为函数someFunction()的返回值。在fixNumber中，我加入: return the_number，表示退出函数并将the_number的值返回给任何等待赋值的变量。
因此，代码书写如下：
var fixed_variable = fixNumber(4);
the_number初始值通过函数调用被设为4。因4小于10，the_number被修改为"04"。随后the_number值被返回，变量fixed_variable被赋值为"04"。
为将fixNumber整合到原始函数announceTime()中，添加以下内容：
function announceTime()
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var fixed_minute = fixNumber(the_minute);
var the_second = the_date.getSeconds();
var fixed_second = fixNumber(the_second);
//put together the string and alert with it
var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;
alert("The time is now: " +the_time);
}
假设点击时间链接时时间为12:04:05。通过new Date()获取日期，getHours()获取小时，前述方法获取分钟（本例中为4），然后调用fixNumber，参数为the_minute：
var fixed_minute = fixNumber(the_minute);
当fixNumber()被调用时，参数the_number被设置为the_minute的值。本例中the_minute为4，故the_number被设为4。
设定参数后进入函数主体。因4小于10，the_number被改为"04"，随后通过return指令返回the_number值。当fixNumber返回"04"后，本例中fixed_minute即等于"04"。
让我们逐步研究该过程。假定时间为12:04:05。
我们从函数announceTime()开始：
1.the_minute = the_date.getMinutes();则the_minute = 4
2.fixed_minute = fixNumber(the_minute);等于函数fixNumber()并将其值返回给fixed_minute
现在进入函数fixNumber()：
3.函数fixNumber(the_number)fixNumber()用the_minute的值调用，the_minute值是4，所以现在the_number = 4
4.如果(the_number < 10) {the_number = "0" + the_number;}由于4小于10，所以the_number现在等于"04"
5.返回the_number值，退出该函数并返回值"04"
现已退出函数fixTime()，因此回到announceTime()：
6.该函数返回值为"04"，所以fixed_minute 现在等于"04"
本例使用了一个仅含一个参数的函数。实际上，函数可设置多个参数。下一讲将讲解多参数函数的用法。
1
2下一页阅读全文