JavaScript 数组Word下载.docx
《JavaScript 数组Word下载.docx》由会员分享,可在线阅读,更多相关《JavaScript 数组Word下载.docx(24页珍藏版)》请在冰豆网上搜索。
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.方法二
=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.方法三
=newArray(<
元素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.方法四
=[<
…];
该方法在方括号(标准数组符号)中直接输入数组元素,这种方法不需要通过调用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个学生的姓名,即李大、张三、李四,然后在页面上输出姓名。
<
html>
<
head>
title>
数组使用示例6-8
/title>
/head>
body>
scriptlanguage=javascript>
/*插入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]+"
BR>
);
/script>
/body>
/html>
该程序的执行效果如图6-1所示。
图6-1显示4个学生的姓名
对实例6-8程序做一点改进,把其中数组创建语句修改如下:
classmates=newArray("
这样后面的4条赋值语句就不必再写,其执行效果与原来相同。
对于上例中数组元素遍历通过如下语句实现:
for(iinclassmates)
使变量i循环时从0开始,一直循环到3。
对示例6-8的程序进行修改。
修改示例6-8
//创建数组classmates
//给数组元素赋值
for(iinclassmates)//classmates是一个数组对象
+(parseInt(i)+1)+"
学生是:
这个例子的执行效果和例6-8是相同的。
但是必须注意的是:
程序使用了parseInt(i)。
这是因为for(iinclassmates)中的i在循环中遍历数组classmates的下标时,i的值其实是字符串类型的下标值。
【示例6-9】在页面上显示当前日期和时间,并显示星期几。
示例6-9显示星期几
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语言不支持多维数组,不过可以将数组的每一个元素再定义为数组,以达到多维数组的目的。
先定义一维数组,然后再定义一维数组赋值给初始一维数组的元素,一维数组的定义方法参见上节。
【示例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在内存中的存储方式
第一列
第二列
第三列
第一行
第二行
先定义一维数组,然后用for循环语句给数组元素赋值,这种方法可以快速定义维数很多的二维数组。
该二维数组在内存中的存储方式为6×
6的矩阵。
【示例6-11】创建6×
6的二维数组array11。
vararray11=newArray(6);
//定义长度为6,数组名为array11的的一维数组
/*创建长度为6的子数组赋值给数组array11的六个元素,没有初始化元素的初值*/
for(vari=0;
6;
i++)
array11[i]=newArray(6);
JavaScript中二维数组定义时,可以不用一开始就赋值。
在定义了6×
6的二维数组后,就可以用array11[i][j]的形式来访问一个二维数组的元素,要遍历一个二维数组则可以通过二重循环来实现。
代码如下:
for(vari=0;
i++){
for(varj=0;
j<
j++){
//处理array11[i][j]的语句
}
更多维的数组可以用类似的方法实现,只需要增加循环的次数即可。
=[[元素一,元素二,元素三],[元素四,元素五,元素六],[元素七,元素八,元素九]]
该方法在方括号中嵌套方括号,直接输入数组元素来定义数组。
【示例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;
=iCityCount-1;
i++)//改变下拉菜单的内容
/*根据所选择的省份得到的城市赋值给数组optCity[i]*/
document.frm.optCity[i]=newOption(aCity[iProvinceIndex][i]);
document.frm.optCity.focus();
//显示城市
}<
bodyONfocus=ChangeCity()>
H3>
选择你所在的省份及城市<
/H3>
formname="
frm"
>
//创建名为frm的表单
<
P>
省份:
/*创建一个下拉菜单用来选择省份*/
SELECTNAME="
optProvince"
SIZE="
ONCHANGE=ChangeCity()>
OPTION>
--请选择--<
/OPTION>
江苏省<
湖南省<
浙江省<
/SELECT>
/P>
城市:
/*创建一个下拉菜单用来选择城市*/
optCity"
/form>
❑先定义二维数组aCity,然后给二维数组赋值;
❑在ChangeCity()函数中,处理用户单击事件并显示不同的效果。
该程序初始运行效果如图6-3所示。
当用户省份选择为