《JavaScript和jQuery实战手册（原书第2版）》——2.9节教程：编写使用数组的页面...-白红宇

2.9 教程：编写使用数组的页面

本书的很多脚本中用到了数组，但是，要快速体验一下创建和使用数组，请阅读这个简短的教程。

注意：参见本书1.3节的“注意”部分中关于如何下载教程文件的说明。

在文本编辑器中打开chapter02目录下的arrays.html文件。
我们从直接创建包含4个字符串的一个数组开始。和前面的教程一样，这个文件还在头部和正文区域包含了< script>标签。

在第一组< script>标签中输入如下粗体所示代码：

这段代码包含一条JavaScript语句，但是，它分为5行。要创建这条语句，输入第一行var authors = [ 'Ernest Hemingway'，按下回车键，然后按下空格键直到对齐到'的下方（大约16个空格），然后输入'Charlotte Bronte',。

注意：大多数HTML编辑器针对HTML和JavaScript代码使用Courier或Courier New这样的等宽字体。在等宽字体中，每个字符和其他字符都具有同样的宽度，因此，很容易对齐各列（就像本例中的所有作者名）。如果你的文本编辑器没有使用Courier或类似字体，可能无法把名字很好地排列对齐。

2.8.1节介绍过，当你创建拥有很多元素的数组时，如果将它分为数行，可以使代码更容易阅读。直到第5行末尾才有一个分号，由此可以看出这是一条语句。

这行代码创建了一个名为authors的数组，并且把4个作者的名字（4个字符串值）存储到数组中。接下来将访问该数组的一个元素。

找到第二对< script>标签，然后添加粗体所示代码：

第一行开始了一个新的段落，其中有一些文本以及一个开始标签，这只是普通的HTML。下一行显示了存储在authors数组的第一项中的值，并且显示了结束标签和

，以创建一个完整的HTML段落。要访问数组中的第一项，可以使用0而不是1作为索引：authors[0]。

此时，保存文件并在Web浏览器中预览是个好主意。你应该看到屏幕上显示了“The first author is Ernest Hemingway”。如果没有看到，那么在步骤2或步骤3创建数组的时候可能有输入错误。

注意：别忘了使用1.6节所介绍的浏览器错误控制台来帮助找到任何JavaScript错误的源头。

回到文本编辑器，然后把如下粗体所示的两行代码加入脚本中：

document.write('The last author is ');    document.write(authors[4] + '
');

除了显示不同的数组项目，这个步骤确实和前面的相同。保存页面并在浏览器中预览。将会看到“undefined”而不是一个作者的名字（如图2-6所示）。不要担心，这是故意的。别忘了，数组的索引值是从0开始的，因此，最后一项实际上是数组中项目的总数减去1。在这个例子中，authors数组中存储了4个字符串，因此，最后一项实际上应该使用authors[3]来访问。

注意：如果试图使用不存在的一个索引值来读取一项，将会得到JavaScript的“undefined”值。这意味着，该索引位置没有存储值。

有一种简单的方法可以获取数组中的最后一项，而不管数组中存储了多少项。

回到文本编辑器并编辑刚刚输入的代码。删除4，并在其位置添加粗体所示的代码：

document.write('The last author is ');    document.write(authors[authors.length-1] + '
');

还记得吧，2.8.3节介绍过，数组的length属性存储了数组中项目的数目。因此，authors数组中项目的总数可以通过authors.length这段代码获取。此时，在这段脚本中，结果是4。

知道了数组中最后一项的索引值总是数组中项目的总数减去1，就可以通过从总数中减去1来获得最后一项的索引值：authors.length-1。在访问一个数组的最后一项的时候，可以把这个简短的表达式作为索引值提供，即authors[authors.length-1]。

最后，在数组的开始再添加一个项目。

在步骤5中添加的代码之后添加另外一行代码：

authors.unshift('Stan Lee');

2.8.3节介绍过，unshift()方法在数组的开始处添加一个或多个项目。在执行这段代码后，author数组现在将是 ['Stan Lee', 'Ernest Hemingway'，‘Charlotte Bronte’，‘Dante Alighieri’，‘Emily Dickinson’]。

最后，我们在页面显示新添加的项。

再添加3行代码（如下粗体所示），以便最终的代码如下所示：

document.write('The first author is ');    document.write(authors[0] + '
');    document.write('The last author is ');    document.write(authors[authors.length-1] + '
');    authors.unshift('Stan Lee');    document.write('I almost forgot ');    document.write(authors[0]);    document.write('
');

保存文件并在Web浏览器中预览。将会看到如图2-7所示的内容。如果没有看到这些内容，别忘了Web浏览器的错误控制台可以帮助你找到错误（参见1.6节）。