JavaScript 数组.docx
《JavaScript 数组.docx》由会员分享，可在线阅读，更多相关《JavaScript 数组.docx（24页珍藏版）》请在冰豆网上搜索。
JavaScript数组
第6章数组
在程序设计中，数组是常用的数据结构。
无论是在面向对象的程序设计中，还是面向过程的程序设计中，数组都起着重要的作用。
数组是按照基本数据类型按一定规则组成的，是存放有序数据的集合。
本章内容包括：
❑数组的基本概念；
❑一维数组；
❑二维数组。
通过本章学习，读者应该可以掌握数组的基本概念，一维数组以及二维数组的用法。
6.1基本概念
所谓的数组就是有相同或不同数据类型的元素按照一定的顺序排列的集合。
在JavaScript语言中数组元素可以由简单数据类型的量组成，也可以由对象组成。
维和下标都是数组的基本特性，为了方便读者更好理解JavaScript中的数组，这里先对数组的基本概念进行讲解。
6.1.1什么是数组
数组是一种构造数据类型，它是由相同类型的元素构成的。
在内存中，它占据一组连续的存储位置。
数组的每一项称为一个元素，每个元素的存取是通过数组名加偏移来实现的。
实际上，数组是一组相关的内存位置，它们具有相同的名字。
数组是程序设计语言中常用的数据结构之一。
当若干数据具有相同的数据类型并且具有一定关系时，把它们组织成数组非常有效。
JavaScript中数组主要有如下几个特点：
❑数组可以是不同数据类型元素的集合；
❑数组中的各元素是有先后顺序的，它们在内存中按照这个先后顺序连续存放在一起；
❑数据元素用整个数组的名字和它自己在数组中的顺序位置来表示。
例如，a[0]表示名字为a的数组中的第一个元素，a[1]表示数组a的第二个元素，依次类推。
注意：
JavaScript中数组元素的数据类型可以不同。
这点和C、C++及Java语言是不同的。
在后三种语言中，数组元素的数据类型必须相同。
6.1.2维和下标
维是几何学和空间理论的基本概念。
构成空间的每一个因素（如长、宽、高）叫做一维，如直线式一维的，平面是二维的，普通空间是三维的。
表6.1说明了一维数组在内存中的存储方式。
a是一个一维数组，它包括了10个元素。
表6.2说明了二维数组在内存中的存储方式，b是一个二维数组，它包括了5行5列共25个元素。
表6.1一个具有10个元素的一维数组a在内存中的存储方式
下标
0
1
2
3
4
5
6
7
8
9
a的元素
a[0]
a[1]
a[2]
a[3]
a[4]
a[5]
a[6]
a[7]
a[8]
a[9]
对数组中的某一个元素是通过数组名加上下标访问的。
也就是说，在数组名字后面的方括号内（[]）加入特定元素的位置编号，就可以应用这些元素中的任何一个。
例如，a[0]是数组的第一个元素，a[1]是数组的第二个元素，a[9]是数组的最后一个元素。
注意：
数组的下标从0开始，因而一个具有n个元素的数组a，其有效元素为a[0]至a[n-1]。
表6.2行和列都是5的二维数组b在内存中的存储方式
第1列
第2列
第3列
第4列
第5列
第1行
b[0][0]
b[0][1]
b[0][2]
b[0][3]
b[0][4]
第2行
b[1][0]
b[1][1]
b[1][2]
b[1][3]
b[1][4]
第3行
b[2][0]
b[2][1]
b[2][2]
b[2][3]
b[2][4]
第4行
b[3][0]
b[3][1]
b[3][2]
b[3][3]
b[3][4]
第5行
b[4][0]
b[4][1]
b[4][2]
b[4][3]
b[4][4]
其中数组b的每个元素用元素名b[i][j]识别，其中，b是数组名，i和j是惟一标识数组b中每一个元素的下标。
说明：
JavaScript中数组下标最大值为232-2，即4294967295。
在JavaScript中，最常用的数组是一维数组和二维数组，下面将详细讲解一维数组和二维数组。
6.2一维数组
一维数组是最简单的数组，其采用顺序存储结构，存储方式为：
在内存中开辟一片连续存储空间，一维数组的第一个元素存放在连续存储空间第一个位置，第二个元素紧跟着第一个元素之后，其余依次类推。
一维数组中逻辑关系相邻的两个元素在物理位置上也相邻。
6.2.1一维数组的定义及初始化
使用JavaScript数组，一般要经过声明数组，创建空间，创建数组元素并赋值三个步骤。
一维数组的定义也就是声明数组和创建空间。
初始化是指创建数组元素并赋值。
一维数组的定义方式共有4种：
1．方法一
var<数组名>=newArray（）;
该方法创建一个空数组，它的长度为0。
var是定义变量的关键字，new是在内存中创建任何对象的关键字，array（）是数组对象，数组名可以是字母，也可以是字母加数字的组合，但是不能是JavaScript的保留关键字，也不能全是数字。
【示例6-1】中array1是数组名，数组对象中参数为空。
该方法创建的是名为array1的空数组。
vararray1=newArray（）;//创建一个空数组对象array1
2．方法二
var<数组名>=newArray（length）;
该方法创建一个长度为length的数组，length的数据类型必须是正整数型，其没有指定实际的元素。
array（length）是长度为length的数组对象。
【示例6-2】代码如下，其中array（5）是长度为5的数组对象，该方法创建的是一个长度为5，数组名为array2的数组，其数组元素分别为array2[0],array2[1],array2[2],array2[3],array2[4]。
vararray2=newArray（5）;//创建包括5个元素的数组对象
注意：
虽然这种方法创建数组指定了长度，但实际上所有情况下数组都是变长的。
也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的。
3．方法三
var<数组名>=newArray（<元素1>,<元素2>,<元素3>…）;
该方法直接用数组元素作为构造函数的参数。
数组名（<元素1>,<元素2>,<元素3>）的数组元素包括元素1、元素2、元素3。
【示例6-3】创建以a,b,c3个元素初始化的数组array3。
其代码如下所示。
vararray3=newArray（“a”,”b”,”c”）;//创建以”a”,”b”,”c”3个元素初始化一个数组对象
代码说明：
❑array3（"a","b","c"）是数组元素为a，b，c的数组对象；
❑元素array3[0]为a；
❑元素array3[1]为b；
❑元素array3[2]为c。
4．方法四
var<数组名>=[<元素1>,<元素2>,<元素3>…];
该方法在方括号（标准数组符号）中直接输入数组元素，这种方法不需要通过调用array数组对象创建数组，效果与上面第3种形式的效果相同，都是以一定的数据列表来创建一个数组，该方法最为快捷。
【示例6-4】创建数组元素为1，2，3的数组array4。
其代码如下所示。
vararray4=[“1”,”2”,”3”];//创建数组元素为1，2，3的数组对象
代码说明：
❑["1","2","3"]是数组元素；
❑该方法直接将数组元素赋值给数组名array4的数组对象。
6.2.2改变一维数组的长度
JavaScript数组的大小可以随时动态的改变，这点与C和C++不同。
JavaScript可以改变Array数组的length来改变数组的长度，也可直接对数组长度以外的数组元素赋值。
但是如果改变length属性，把一个初始长度为20的数组长度减为10，则该数组的第11位到第20位的10个元素将丢失；将一个初始长度为10的数组长度增加为20，该数组元素不会受到任何影响。
【示例6-5】创建初始长度为5的数组array5，增加数组的长度。
其代码如下所示。
vararray5=newArray（5）;//创建包括5个元素的数组对象array5
vararray5=newArray（10）;//将数组array5的长度改为10
【示例6-6】创建初始长度为4的数组array6，减少数组的长度。
其代码如下所示。
vararray6=newArray（4）;//创建包括4个元素的数组对象array6
vararray6=[1,2,3,4];//初始化数组array6
vararray6=newArray
（2）;//将数组array6的长度改为2
6.2.3一维数组存储的数据类型
数组中的每个元素代表了一个变量，而JavaScript中的变量是没有类型的。
因此数组也是没有类型的，使用一个数组元素和一个变量没有区别。
所以可以在一个数组中存储不同类型的数据。
【示例6-7】一维数组中存储不同类型的数据。
其代码如下所示。
vararray7=[newDate（）,1234,”abc”];
代码说明：
❑array7是数组名，其包含了三种数据类型；
❑数组的第一个元素是Date型数据；
❑数组的第二个元素是数字型数据；
❑数组的第三个元素是字符型数据。
6.2.4一维数组的遍历
对JavaScript语言中一维数组元素进行遍历是通过for…in语句来实现的。
JavaScript的for…in语句是一种特殊的for语句，它专门用来处理与数组和对象相关的循环操作。
用for…in语句处理数组，可以依次对数组中的每个数组元素执行一条或多条语句。
for…in的格式如下：
for（variableinarray_name）
{
循环体语句；
}
其中variable将遍历数组中的每一个索引。
其执行过程如下：
（1）variable被赋值为数组的第一个下标索引（通常为0）；
（2）如果variable值是一个有效的下标索引（如小于数组长度），就执行步骤3，否则退出循环；
（3）执行循环体语句；
（4）variable被赋值为数组的下一个下标索引；转去执行步骤2进行循环判断。
6.2.5一维数组应用示例
下面通过几个例子介绍JavaScript中一维数组的应用。
【示例6-8】创建一个数组名为classmates的数组存储4个学生的姓名，即李大、张三、李四，然后在页面上输出姓名。
其代码如下所示。
</p><p>数组使用示例6-8</p><p>
/*插入JavaScript代码*/
vari;//定义变量i
varclassmates=newArray（4）;//定义数组名为classmates，长度为4的数组
classmates[0]="李大";//第一个元素为李大
classmates[1]="王二";//第二个元素为王二
classmates[2]="张三";//第三个元素为张三
classmates[3]="李四";//第四个元素为李四
for（i=0;i<4;i++）
//循环输出数组的四个元素
document.write（"第个"+（i+1）+"同学是:
"+classmates[i]+"
"）;
该程序的执行效果如图6-1所示。
图6-1显示4个学生的姓名
对实例6-8程序做一点改进，把其中数组创建语句修改如下：
classmates=newArray（"李大","王二","张三","李四"）;
这样后面的4条赋值语句就不必再写，其执行效果与原来相同。
对于上例中数组元素遍历通过如下语句实现：
for（iinclassmates）
{
使变量i循环时从0开始，一直循环到3。
}
对示例6-8的程序进行修改。
</p><p>修改示例6-8</p><p>
/*插入JavaScript代码*/
vari;//定义变量i
varclassmates=newArray（4）;//创建数组classmates
classmates[0]="李大";//给数组元素赋值
classmates[1]="王二";//给数组元素赋值
classmates[2]="张三";//给数组元素赋值
classmates[3]="李四";//给数组元素赋值
for（iinclassmates）//classmates是一个数组对象
document.write（"第个"+（parseInt（i）+1）+"学生是:
"+classmates[i]+"
"）;
注意：
这个例子的执行效果和例6-8是相同的。
但是必须注意的是：
程序使用了parseInt（i）。
这是因为for（iinclassmates）中的i在循环中遍历数组classmates的下标时，i的值其实是字符串类型的下标值。
【示例6-9】在页面上显示当前日期和时间，并显示星期几。
其代码如下所示。
</p><p>示例6-9显示星期几</p><p>
varweek,today,week_i;//定义3个变量week,today,week_i
/*创建数组week，并给其赋值，数组共有7个元素分别是：
星期日、星期一、星期二、星期三、星期四、星期五、星期六*/
week=newArray（"星期日","星期一","星期二","星期三","星期四","星期五","星期六"）;
today=newDate（）;//创建Date对象，并赋值给变量today
week_i=today.getDay（）;//得到系统日期赋值给变量week_i
document.write（today.toLocaleString（）+week[week_i]）;//输出系统日期及今天是星期几
代码说明：
❑首先定义几个变量，然后创建数组；
❑接着创建Date对象赋值给变量，并输出日期；
❑JavaScript中的日期对象将在后面详细讲解。
该程序运行效果如图6-2所示。
图6-2显示星期几
6.3二维数组
虽然一维数组可以处理一般简单的数据，但是在实际使用中仍显不足。
多维数组并不是JavaScript中的一种内部机制，而是Array对象性质的一种应用。
这种应用基于JavaScript中变量的无类型性。
在JavaScript中二维数组需要两个下标才能识别某个元素的位置，二维数组常用来表示按行和按列格式存放信息的数值表。
6.3.1二维数组的定义及初始化
前面提到，一个数组元素可以存储任意类型的数据，这样，当一个数组的元素是另一个数组时，就表现为二维或多维数组。
二维数组的定义方法一般有三种：
说明：
JavaScript语言不支持多维数组，不过可以将数组的每一个元素再定义为数组，以达到多维数组的目的。
1．方法一
先定义一维数组，然后再定义一维数组赋值给初始一维数组的元素，一维数组的定义方法参见上节。
【示例6-10】创建2×3的二维数组array10。
其代码如下所示。
vararray10=Array
（2）;//创建一个长度为2，数组名为array10的一维数组
array10[0]=Array（3）;//将一个长度为3的数组赋值给array10数组的第一个元素
array10[0][0]=1;//给子数组的第一个元素赋值
array10[0][1]=2;//给子数组的第二个元素赋值
array10[0][2]=3;//给子数组的第三个元素赋值
array10[1]=Array（3）;//将一个长度为3的数组赋值给array10数组的第二个元素
array10[1][0]=4;//给子数组的第一个元素赋值
array10[1][1]=5;//给子数组的第二个元素赋值
array10[1][2]=6;//给子数组的第三个元素赋值
代码说明：
❑先创建长度为2的一维数组；
❑再把长度为3，元素为1，2，3的数组赋值给初始一维数组的第一个元素；
❑最后把长度为3，元素为4，5，6的数组赋值给初始一维数组的第二个元素。
该二维数组在内存中的在内存中的存储方式如表6.3所示：
表6.3array10在内存中的存储方式
第一列
第二列
第三列
第一行
1
2
3
第二行
4
5
6
2．方法二
先定义一维数组，然后用for循环语句给数组元素赋值，这种方法可以快速定义维数很多的二维数组。
该二维数组在内存中的存储方式为6×6的矩阵。
【示例6-11】创建6×6的二维数组array11。
其代码如下所示。
vararray11=newArray（6）;//定义长度为6，数组名为array11的的一维数组
/*创建长度为6的子数组赋值给数组array11的六个元素,没有初始化元素的初值*/
for（vari=0;i<6;i++）
{
array11[i]=newArray（6）;
}
注意：
JavaScript中二维数组定义时，可以不用一开始就赋值。
在定义了6×6的二维数组后，就可以用array11[i][j]的形式来访问一个二维数组的元素，要遍历一个二维数组则可以通过二重循环来实现。
代码如下：
for（vari=0;i<6;i++）{
for（varj=0;j<6;j++）{
//处理array11[i][j]的语句
}
}
更多维的数组可以用类似的方法实现，只需要增加循环的次数即可。
3．方法三
var<数组名>=[[元素一，元素二，元素三]，[元素四，元素五，元素六]，[元素七，元素八，元素九]]
该方法在方括号中嵌套方括号，直接输入数组元素来定义数组。
【示例6-12】创建3×3的二维数组array12。
vararray12=[[1,2,3],[4,5,6],[7,8,9]];
代码说明：
❑该代码定义了3×3数组；
❑其中array12[0][0]=1,array12[0][1]=2,array12[0][2]=3；
❑array12[1][0]=4,array12[1][1]=5,array12[1][2]=6；
❑array12[2][0]=7,array12[2][1]=8,array12[2][2]=9。
6.3.2二维数组应用示例
下面通过几个例子来介绍JavaScript中二维数组的应用。
【示例6-13】通过声明二维数组来绑定SELECT下拉菜单。
本例中首先定义二维数组来存储城市名称，然后再对二维数组进行赋值。
ChangeCity（）函数的功能是根据所选择的省份来改变城市。
其代码如下所示。
动态改变下拉菜单内容示例
/*定义一个二维数组aArray,用于存放城市名称。
*/
varaCity=newArray（）;
/*定义4个子数组*/
aCity[0]=newArray（）;
aCity[1]=newArray（）;
aCity[2]=newArray（）;
aCity[3]=newArray（）;
/*对子数组的元素赋值，每个省份的城市存放于数组的一行。
*/
aCity[0][0]="--请选择--";
aCity[1][0]="--请选择--";
aCity[1][1]="南京市";
aCity[1][2]="南通市";
aCity[1][3]="无锡市";
aCity[1][4]="苏州市";
aCity[1][5]="泰州市";
aCity[2][0]="--请选择--";
aCity[2][1]="长沙市";
aCity[2][2]="株州市";
aCity[2][3]="湘潭市";
aCity[3][0]="--请选择--";
aCity[3][1]="杭州市";
aCity[3][2]="苏州市";
aCity[3][3]="温州市";
/*根据所选择的省份来改变城市的函数*/
functionChangeCity（）
{
vari,iProvinceIndex;//定义两个变量i和iProvinceIndex
/*返回用户所选择省份的索引号给变量iProvinceIndex*/
iProvinceIndex=document.frm.optProvince.selectedIndex;
iCityCount=0;
while（aCity[iProvinceIndex][iCityCount]!
=null）
iCityCount++;//计算选定省份的城市个数
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数
for（i=0;i<=iCityCount-1;i++）//改变下拉菜单的内容
/*根据所选择的省份得到的城市赋值给数组optCity[i]*/
document.frm.optCity[i]=newOption（aCity[iProvinceIndex][i]）;
document.frm.optCity.focus（）;//显示城市
}
选择你所在的省份及城市
//创建名为frm的表单
省份：
/*创建一个下拉菜单用来选择省份*/
城市：
/*创建一个下拉菜单用来选择城市*/