JavaScript 数组.docx

1、JavaScript 数组第6章 数组在程序设计中，数组是常用的数据结构。无论是在面向对象的程序设计中，还是面向过程的程序设计中，数组都起着重要的作用。数组是按照基本数据类型按一定规则组成的，是存放有序数据的集合。本章内容包括： 数组的基本概念； 一维数组； 二维数组。通过本章学习，读者应该可以掌握数组的基本概念，一维数组以及二维数组的用法。6.1 基本概念所谓的数组就是有相同或不同数据类型的元素按照一定的顺序排列的集合。在JavaScript语言中数组元素可以由简单数据类型的量组成，也可以由对象组成。维和下标都是数组的基本特性，为了方便读者更好理解JavaScript中的数组，这里先对数组的

2、基本概念进行讲解。6.1.1 什么是数组数组是一种构造数据类型，它是由相同类型的元素构成的。在内存中，它占据一组连续的存储位置。数组的每一项称为一个元素，每个元素的存取是通过数组名加偏移来实现的。实际上，数组是一组相关的内存位置，它们具有相同的名字。数组是程序设计语言中常用的数据结构之一。当若干数据具有相同的数据类型并且具有一定关系时，把它们组织成数组非常有效。JavaScript中数组主要有如下几个特点： 数组可以是不同数据类型元素的集合； 数组中的各元素是有先后顺序的，它们在内存中按照这个先后顺序连续存放在一起； 数据元素用整个数组的名字和它自己在数组中的顺序位置来表示。例如，a0表示名字

3、为a的数组中的第一个元素，a1表示数组a的第二个元素，依次类推。注意：JavaScript中数组元素的数据类型可以不同。这点和C、C+及Java语言是不同的。在后三种语言中，数组元素的数据类型必须相同。6.1.2 维和下标维是几何学和空间理论的基本概念。构成空间的每一个因素（如长、宽、高）叫做一维，如直线式一维的，平面是二维的，普通空间是三维的。表6.1说明了一维数组在内存中的存储方式。a是一个一维数组，它包括了10个元素。表6.2说明了二维数组在内存中的存储方式，b是一个二维数组，它包括了5行5列共25个元素。表6.1 一个具有10个元素的一维数组a在内存中的存储方式下标0123456789

4、a的元素a0a1a2a3a4a5a6a7a8a9对数组中的某一个元素是通过数组名加上下标访问的。也就是说，在数组名字后面的方括号内()加入特定元素的位置编号，就可以应用这些元素中的任何一个。例如，a0是数组的第一个元素，a1是数组的第二个元素，a9是数组的最后一个元素。注意：数组的下标从0开始，因而一个具有n个元素的数组a，其有效元素为a0至an-1。表6.2 行和列都是5的二维数组b在内存中的存储方式第1列第2列第3列第4列第5列第1行b00b01b02b03b04第2行b10b11b12b13b14第3行b20b21b22b23b24第4行b30b31b32b33b34第5行b40b41b

5、42b43b44其中数组b的每个元素用元素名bij识别，其中，b是数组名，i和j是惟一标识数组b中每一个元素的下标。说明：JavaScript中数组下标最大值为232-2，即4294967295。在JavaScript中，最常用的数组是一维数组和二维数组，下面将详细讲解一维数组和二维数组。6.2 一维数组一维数组是最简单的数组，其采用顺序存储结构，存储方式为：在内存中开辟一片连续存储空间，一维数组的第一个元素存放在连续存储空间第一个位置，第二个元素紧跟着第一个元素之后，其余依次类推。一维数组中逻辑关系相邻的两个元素在物理位置上也相邻。6.2.1 一维数组的定义及初始化使用JavaScript数

6、组，一般要经过声明数组，创建空间，创建数组元素并赋值三个步骤。一维数组的定义也就是声明数组和创建空间。初始化是指创建数组元素并赋值。一维数组的定义方式共有4种：1方法一var = new Array(); 该方法创建一个空数组，它的长度为0。var是定义变量的关键字，new是在内存中创建任何对象的关键字，array()是数组对象，数组名可以是字母，也可以是字母加数字的组合，但是不能是JavaScript的保留关键字，也不能全是数字。【示例6-1】中array1是数组名，数组对象中参数为空。该方法创建的是名为array1的空数组。var array1 =new Array(); /创建一个空数组

7、对象array12方法二var = new Array(length);该方法创建一个长度为length的数组，length的数据类型必须是正整数型，其没有指定实际的元素。array(length)是长度为length的数组对象。【示例6-2】代码如下，其中array(5)是长度为5的数组对象，该方法创建的是一个长度为5，数组名为array2的数组，其数组元素分别为array20,array21,array22,array23,array24。var array2 =new Array(5); /创建包括5个元素的数组对象注意：虽然这种方法创建数组指定了长度，但实际上所有情况下数组都是变长的。

8、也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的。3方法三var = new Array(,);该方法直接用数组元素作为构造函数的参数。数组名（,）的数组元素包括元素1、元素2、元素3。【示例6-3】创建以a,b,c3个元素初始化的数组array3。其代码如下所示。var array3=new Array(“a”,”b”,”c”); /创建以”a”,”b”,”c”3个元素初始化一个数组对象代码说明： array3(a,b,c)是数组元素为a，b，c的数组对象； 元素array30为a； 元素array31为b； 元素array32为c。4方法四var =,;该方法在方括号（标准数

9、组符号）中直接输入数组元素，这种方法不需要通过调用array数组对象创建数组，效果与上面第3种形式的效果相同，都是以一定的数据列表来创建一个数组，该方法最为快捷。【示例6-4】创建数组元素为1，2，3的数组array4。其代码如下所示。var array4= “1”,”2”,”3”; /创建数组元素为1，2，3的数组对象代码说明： 1,2,3是数组元素； 该方法直接将数组元素赋值给数组名array4的数组对象。6.2.2 改变一维数组的长度JavaScript数组的大小可以随时动态的改变，这点与C和C+不同。JavaScript可以改变Array数组的length来改变数组的长度，也可直接对数

10、组长度以外的数组元素赋值。但是如果改变length属性，把一个初始长度为20的数组长度减为10，则该数组的第11位到第20位的10个元素将丢失；将一个初始长度为10的数组长度增加为20，该数组元素不会受到任何影响。【示例6-5】创建初始长度为5的数组array5，增加数组的长度。其代码如下所示。var array5 =new Array(5); /创建包括5个元素的数组对象array5var array5 =new Array(10); /将数组array5的长度改为10【示例6-6】创建初始长度为4的数组array6，减少数组的长度。其代码如下所示。var array6 =new Array

11、(4); /创建包括4个元素的数组对象array6var array6 =1,2,3,4; /初始化数组array6var array6 =new Array(2); /将数组array6的长度改为26.2.3 一维数组存储的数据类型数组中的每个元素代表了一个变量，而JavaScript中的变量是没有类型的。因此数组也是没有类型的，使用一个数组元素和一个变量没有区别。所以可以在一个数组中存储不同类型的数据。【示例6-7】一维数组中存储不同类型的数据。其代码如下所示。var array7 =new Date(),1234,”abc”;代码说明： array7是数组名，其包含了三种数据类型； 数组

12、的第一个元素是Date型数据； 数组的第二个元素是数字型数据； 数组的第三个元素是字符型数据。6.2.4 一维数组的遍历对JavaScript语言中一维数组元素进行遍历是通过forin语句来实现的。JavaScript的forin语句是一种特殊的for语句，它专门用来处理与数组和对象相关的循环操作。用forin语句处理数组，可以依次对数组中的每个数组元素执行一条或多条语句。forin的格式如下：for(variable in array_name) 循环体语句；其中variable将遍历数组中的每一个索引。其执行过程如下：（1）variable被赋值为数组的第一个下标索引（通常为0）；（2）如

13、果variable值是一个有效的下标索引（如小于数组长度），就执行步骤3，否则退出循环；（3）执行循环体语句；（4）variable被赋值为数组的下一个下标索引；转去执行步骤2进行循环判断。6.2.5 一维数组应用示例下面通过几个例子介绍JavaScript中一维数组的应用。【示例6-8】创建一个数组名为classmates的数组存储4个学生的姓名，即李大、张三、李四，然后在页面上输出姓名。其代码如下所示。 数组使用示例6-8 /*插入JavaScript代码*/ var i; /定义变量i var classmates = new Array(4); /定义数组名为classmates，长度

14、为4的数组 classmates0 = 李大; /第一个元素为李大 classmates1 = 王二; /第二个元素为王二 classmates2 = 张三; /第三个元素为张三 classmates3 = 李四; /第四个元素为李四 for(i=0;i4;i+) /循环输出数组的四个元素 document.write(第个+(i+1)+同学是:+classmatesi+); 该程序的执行效果如图6-1所示。图6-1 显示4个学生的姓名对实例6-8程序做一点改进，把其中数组创建语句修改如下：classmates = new Array(李大,王二,张三,李四);这样后面的4条赋值语句就不必再写

15、，其执行效果与原来相同。对于上例中数组元素遍历通过如下语句实现：for(i in classmates)使变量i循环时从0开始，一直循环到3。对示例6-8的程序进行修改。 修改示例6-8 /*插入JavaScript代码*/ var i; /定义变量i var classmates = new Array(4); /创建数组classmates classmates0 = 李大; /给数组元素赋值 classmates1 = 王二; /给数组元素赋值 classmates2 = 张三; /给数组元素赋值 classmates3 = 李四; /给数组元素赋值 for(i in classmate

16、s) /classmates是一个数组对象 document.write(第个+(parseInt(i)+1)+学生是:+classmatesi+); 注意：这个例子的执行效果和例6-8是相同的。但是必须注意的是：程序使用了parseInt(i)。这是因为for(i in classmates)中的i在循环中遍历数组classmates的下标时，i的值其实是字符串类型的下标值。【示例6-9】在页面上显示当前日期和时间，并显示星期几。其代码如下所示。 示例6-9显示星期几 var week,today,week_i; /定义3个变量week,today,week_i /*创建数组week，并给其

17、赋值，数组共有7个元素分别是：星期日、星期一、星期二、星期三、星期四、星期五、星期六*/ week=new Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六); today=new Date(); /创建Date对象，并赋值给变量today week_i=today.getDay(); /得到系统日期赋值给变量week_i document.write(today.toLocaleString()+weekweek_i); /输出系统日期及今天是星期几 代码说明： 首先定义几个变量，然后创建数组； 接着创建Date对象赋值给变量，并输出日期； JavaScript中的日期对象

18、将在后面详细讲解。该程序运行效果如图6-2所示。图6-2 显示星期几6.3 二维数组虽然一维数组可以处理一般简单的数据，但是在实际使用中仍显不足。多维数组并不是JavaScript中的一种内部机制，而是Array对象性质的一种应用。这种应用基于JavaScript中变量的无类型性。在JavaScript中二维数组需要两个下标才能识别某个元素的位置，二维数组常用来表示按行和按列格式存放信息的数值表。6.3.1 二维数组的定义及初始化前面提到，一个数组元素可以存储任意类型的数据，这样，当一个数组的元素是另一个数组时，就表现为二维或多维数组。二维数组的定义方法一般有三种：说明：JavaScript语

19、言不支持多维数组，不过可以将数组的每一个元素再定义为数组，以达到多维数组的目的。1方法一先定义一维数组，然后再定义一维数组赋值给初始一维数组的元素，一维数组的定义方法参见上节。【示例6-10】创建23的二维数组array10。其代码如下所示。var array10 = Array(2); /创建一个长度为2，数组名为array10的一维数组array100=Array(3); /将一个长度为3的数组赋值给array10数组的第一个元素array1000=1; /给子数组的第一个元素赋值array1001=2; /给子数组的第二个元素赋值array1002=3; /给子数组的第三个元素赋值arr

20、ay101=Array(3); /将一个长度为3的数组赋值给array10数组的第二个元素array1010=4; /给子数组的第一个元素赋值array1011=5; /给子数组的第二个元素赋值array1012=6; /给子数组的第三个元素赋值代码说明： 先创建长度为2的一维数组； 再把长度为3，元素为1，2，3的数组赋值给初始一维数组的第一个元素； 最后把长度为3，元素为4，5，6的数组赋值给初始一维数组的第二个元素。该二维数组在内存中的在内存中的存储方式如表6.3所示：表6.3 array10在内存中的存储方式第一列第二列第三列第一行123第二行4562方法二先定义一维数组，然后用for

21、循环语句给数组元素赋值，这种方法可以快速定义维数很多的二维数组。该二维数组在内存中的存储方式为66的矩阵。【示例6-11】创建66的二维数组array11。其代码如下所示。var array11 = new Array(6); /定义长度为6，数组名为array11的的一维数组/*创建长度为6的子数组赋值给数组array11的六个元素,没有初始化元素的初值*/for(var i=0;i6;i+) array11i= new Array(6);注意：JavaScript中二维数组定义时，可以不用一开始就赋值。在定义了66的二维数组后，就可以用array11ij的形式来访问一个二维数组的元素，要遍

22、历一个二维数组则可以通过二重循环来实现。代码如下：for (var i=0;i6;i+) for(var j=0;j6;j+) /处理array11ij的语句 更多维的数组可以用类似的方法实现，只需要增加循环的次数即可。3方法三var =元素一，元素二，元素三，元素四，元素五，元素六，元素七，元素八，元素九该方法在方括号中嵌套方括号，直接输入数组元素来定义数组。【示例6-12】创建33的二维数组array12。var array12=1,2,3,4,5,6,7,8,9;代码说明： 该代码定义了33数组； 其中array1200=1,array1201=2,array1202=3； array1

23、210=4,array1211=5,array1212=6； array1220=7,array1221=8,array1222=9。6.3.2 二维数组应用示例下面通过几个例子来介绍JavaScript中二维数组的应用。【示例6-13】通过声明二维数组来绑定SELECT下拉菜单。本例中首先定义二维数组来存储城市名称，然后再对二维数组进行赋值。ChangeCity()函数的功能是根据所选择的省份来改变城市。其代码如下所示。 动态改变下拉菜单内容示例 /*定义一个二维数组aArray,用于存放城市名称。*/ var aCity=new Array(); /*定义4个子数组*/ aCity0=ne

24、w Array(); aCity1=new Array(); aCity2=new Array(); aCity3=new Array(); /*对子数组的元素赋值，每个省份的城市存放于数组的一行。*/ aCity00=-请选择-; aCity10=-请选择-; aCity11=南京市; aCity12=南通市; aCity13=无锡市; aCity14=苏州市; aCity15=泰州市; aCity20=-请选择-; aCity21=长沙市; aCity22=株州市; aCity23=湘潭市; aCity30=-请选择-; aCity31=杭州市; aCity32=苏州市; aCity33=

25、温州市; /*根据所选择的省份来改变城市的函数*/ function ChangeCity() var i,iProvinceIndex; /定义两个变量i和iProvinceIndex /*返回用户所选择省份的索引号给变量iProvinceIndex*/ iProvinceIndex=document.frm.optProvince.selectedIndex; iCityCount=0; while (aCityiProvinceIndexiCityCount!=null) iCityCount+; /计算选定省份的城市个数 document.frm.optCity.length=iCit

26、yCount; /改变下拉菜单的选项数 for (i=0;i=iCityCount-1;i+) /改变下拉菜单的内容 /*根据所选择的省份得到的城市赋值给数组optCityi*/ document.frm.optCityi=new Option(aCityiProvinceIndexi); document.frm.optCity.focus(); /显示城市 选择你所在的省份及城市 /创建名为frm的表单 省份： /*创建一个下拉菜单用来选择省份*/ -请选择- 江苏省 湖南省 浙江省 城市： /*创建一个下拉菜单用来选择城市*/ -请选择- 代码说明： 先定义二维数组aCity，然后给二维数组赋值； 在ChangeCity()函数中，处理用户单击事件并显示不同的效果。该程序初始运行效果如图6-3所示。当用户省份选择为