《JavaScript和jQuery实战手册(原书第2版)》——2.9节教程:编写使用数组的页面

简介: 本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.9节教程:编写使用数组的页面,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.9 教程:编写使用数组的页面
本书的很多脚本中用到了数组,但是,要快速体验一下创建和使用数组,请阅读这个简短的教程。
注意: 参见本书1.3节的“注意”部分中关于如何下载教程文件的说明。

  1. 在文本编辑器中打开chapter02目录下的arrays.html文件。
    我们从直接创建包含4个字符串的一个数组开始。和前面的教程一样,这个文件还在头部和正文区域包含了< script>标签。
  2. 在第一组< script>标签中输入如下粗体所示代码:
<script>
    var authors = [ 'Ernest Hemingway',
            'Charlotte Bronte',
            'Dante Alighieri',
            'Emily Dickinson'
        ];
    </script>

这段代码包含一条JavaScript语句,但是,它分为5行。要创建这条语句,输入第一行var authors = [ 'Ernest Hemingway',按下回车键,然后按下空格键直到对齐到'的下方(大约16个空格),然后输入'Charlotte Bronte',。
注意: 大多数HTML编辑器针对HTML和JavaScript代码使用Courier或Courier New这样的等宽字体。在等宽字体中,每个字符和其他字符都具有同样的宽度,因此,很容易对齐各列(就像本例中的所有作者名)。如果你的文本编辑器没有使用Courier或类似字体,可能无法把名字很好地排列对齐。
2.8.1节介绍过,当你创建拥有很多元素的数组时,如果将它分为数行,可以使代码更容易阅读。直到第5行末尾才有一个分号,由此可以看出这是一条语句。
这行代码创建了一个名为authors的数组,并且把4个作者的名字(4个字符串值)存储到数组中。接下来将访问该数组的一个元素。

  1. 找到第二对< script>标签,然后添加粗体所示代码:
<script>
    document.write('<p>The first author is <strong>');
    document.write(authors[0] + '</strong></p>');
    </script>

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

,以创建一个完整的HTML段落。要访问数组中的第一项,可以使用0而不是1作为索引:authors[0]。
此时,保存文件并在Web浏览器中预览是个好主意。你应该看到屏幕上显示了“The first author is Ernest Hemingway”。如果没有看到,那么在步骤2或步骤3创建数组的时候可能有输入错误。
注意: 别忘了使用1.6节所介绍的浏览器错误控制台来帮助找到任何JavaScript错误的源头。
  1. 回到文本编辑器,然后把如下粗体所示的两行代码加入脚本中:
    document.write('<p>The last author is <strong>');
    document.write(authors[4] + '</strong></p>');

除了显示不同的数组项目,这个步骤确实和前面的相同。保存页面并在浏览器中预览。将会看到“undefined”而不是一个作者的名字(如图2-6所示)。不要担心,这是故意的。别忘了,数组的索引值是从0开始的,因此,最后一项实际上是数组中项目的总数减去1。在这个例子中,authors数组中存储了4个字符串,因此,最后一项实际上应该使用authors[3]来访问。
注意: 如果试图使用不存在的一个索引值来读取一项,将会得到JavaScript的“undefined”值。这意味着,该索引位置没有存储值。
有一种简单的方法可以获取数组中的最后一项,而不管数组中存储了多少项。

  1. 回到文本编辑器并编辑刚刚输入的代码。删除4,并在其位置添加粗体所示的代码:
    document.write('<p>The last author is <strong>');
    document.write(authors[authors.length-1] + '</strong></p>');

还记得吧,2.8.3节介绍过,数组的length属性存储了数组中项目的数目。因此,authors数组中项目的总数可以通过authors.length这段代码获取。此时,在这段脚本中,结果是4。
知道了数组中最后一项的索引值总是数组中项目的总数减去1,就可以通过从总数中减去1来获得最后一项的索引值:authors.length-1。在访问一个数组的最后一项的时候,可以把这个简短的表达式作为索引值提供,即authors[authors.length-1]。
最后,在数组的开始再添加一个项目。

  1. 在步骤5中添加的代码之后添加另外一行代码:
    authors.unshift('Stan Lee');

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

  1. 再添加3行代码(如下粗体所示),以便最终的代码如下所示:
    document.write('<p>The first author is <strong>');
    document.write(authors[0] + '</strong></p>');
    document.write('<p>The last author is <strong>');
    document.write(authors[authors.length-1] + '</strong></p>');
    authors.unshift('Stan Lee');
    document.write('<p>I almost forgot <strong>');
    document.write(authors[0]);
    document.write('</strong></p>');

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

相关文章
|
7天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
11 0
|
26天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
2月前
|
JavaScript 前端开发 网络协议
​Node.js 教程(一) 基本概念与基本使用
​Node.js 教程(一) 基本概念与基本使用
|
3月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
82 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
26天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
15 0
|
3月前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
24 0
|
15天前
|
JavaScript 前端开发
JS:如何创建新元素并添加到页面中
JS:如何创建新元素并添加到页面中
21 1
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript的数组教程(最详细,更新至es6新语法)
JavaScript的数组教程(最详细,更新至es6新语法)
|
2月前
|
域名解析 JavaScript 关系型数据库
使用宝塔面板安装wiki.js详细教程
使用宝塔面板安装wiki.js详细教程