JavaScript学习总结(八)——JavaScript数组

　　JavaScript中的Array对象就是数组，首先是一个动态数组，无需预先制定大小，而且是一个像Java中数组、ArrayList、Hashtable等的超强综合体。

一、数组的声明

　　常规方式声明：

　　　　**1、**var arrName = new Array();//创建一个数组

2、var arrName = new Array([size]); //创建一个数组并指定长度，注意不是上限，是长度

3、var arrName =new Array("孤傲苍狼","白虎神皇","灭世魔尊");**//创建一个数组**，并初始化数组的内容

注意：虽然var arrName = new Array([size]);指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为2，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

　　Array的简化声明

　　　 1、普通数组初始化：var arr = [3, 5, 6, 8, 9];

范例1：

1 1 <script type="text/javascript">
2 2   //JavaScript声明数组的四种方式
3 3     var arr1 = new Array();//创建一个空数组
4 4     arr1[0]="xdp";
5 5     arr1[1]="gacl";
6 6     var arr2 = new Array(2);//创建一个数组并指定长度为2
7 7     arr2["name0"]="xdp";//arr2第一个元素
8 8     arr2["name1"]="gacl";//arr2第二个元素
9 9     arr2["name2"]="xtxd";//arr2第三个元素，arr2虽然在声明时指明了长度为2，但是还是可以添加超过其指明长度的元素
1010     var arr3 = new Array("孤傲苍狼","白虎神皇","灭世魔尊");//创建一个数组并初始化数组中的元素
1111     var arr4 = [1,true,"String"];//Array的简化声明
1212 
1313     document.write("遍历arr1中的元素：<br/>");
1414     for(var i in arr1) {
1515         document.write(arr1[i]+"<br/>");
1616     }
1717     document.write("-----------------------------------------------------------------------------<br/>");
1818     document.write("遍历arr2中的元素：<br/>");
1919     for(var i in arr2) {
2020         document.write("arr2[\""+i+"\"]="+arr2[i]+"<br/>");
2121     }
2222     document.write("-----------------------------------------------------------------------------<br/>");
2323     document.write("遍历arr3中的元素：<br/>");
2424     for(var i in arr3) {
2525         document.write(arr3[i]+"<br/>");
2626     }
2727     document.write("-----------------------------------------------------------------------------<br/>");
2828     document.write("遍历arr4中的元素：<br/>");
2929     for(var i in arr4) {
3030         document.write(arr4[i]+"<br/>");
3131     }
3232   </script>

运行结果：

范例2：

1 1 <script type="text/javascript">
2 2         var names = new Array();//普通方式声明数组，不需要指明数组的长度
3 3         names[0] = "孤傲苍狼";
4 4         names[1] = "白虎神皇";
5 5         names[2] = "灭世魔尊";
6 6         for (var i = 0; i < names.length; i++) {
7 7             document.write("names["+i+"] = "+names[i]);
8 8             document.write("<br/>");
9 9         }
1010 
1111         var pinyins = new Array();
1212         pinyins["人"] = "ren";
1313         pinyins["口"] = "kou";
1414         pinyins["手"] = "shou";
1515         document.write("pinyins[\"人\"] = "+pinyins["人"]);
1616         document.write("<br/>");
1717         document.write("pinyins.手 = "+pinyins.手);//像Hashtable、Dictionary那样用，而且像它们一样效率高。
1818         document.write("<br/>");
1919         //Array的简化声明
2020         var arr1 = [3, 5];//普通数组初始化
2121          for (var i = 0; i < arr1.length; i++) {
2222             document.write("arr1["+i+"] = "+arr1[i]);
2323             document.write("<br/>");
2424         }
2525 </script>

运行结果：

二、数组练习

　　Ferris写过一个数组的案例，以下就是他的案例代码，挺全的，思路也挺好！

1  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
3  3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4  4 <title>数组练习：各种数组方法的使用</title>
5  5 <style>
6  6 div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;}
7  7 </style>
8  8 <script type="text/javascript">
9  9 window.onload = function ()
10 10 {
11 11     var aDiv = document.getElementsByTagName("div");
12 12     var aInput = document.getElementsByTagName("input");
13 13     var i = 0;
14 14     var bS1 = bS2 = true;
15 15     var aTmp = [];
16 16     
17 17     //删除/添加第一项
18 18     aInput[0].onclick = function ()
19 19     {
20 20         aTmp = getArray(aDiv[0].innerHTML);
21 21         bS1 ?
22 22         //删除第一项， shift()方法
23 23         (aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) :
24 24         //添加第一项, unshift()方法
25 25         (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true);
26 26         //输出
27 27         aDiv[0].innerHTML = aTmp.join()
28 28     };
29 29     
30 30     
31 31     //删除/添加最后一项
32 32     aInput[1].onclick = function ()
33 33     {
34 34         aTmp = getArray(aDiv[0].innerHTML);
35 35         bS2 ?
36 36         //删除最后一项, pop()方法
37 37         (aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) :
38 38         //添加最后一项, push()方法
39 39         (aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true);
40 40         //输出
41 41         aDiv[0].innerHTML = aTmp.join()
42 42     };
43 43     
44 44     
45 45     //复制, concat()方法
46 46     aInput[2].onclick = function ()
47 47     {
48 48         aTmp = getArray(aDiv[1].innerHTML);
49 49         //输出
50 50         aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/\s/g,"")
51 51     };
52 52     
53 53     
54 54     //还原, 利用数组的 length 特点
55 55     aInput[3].onclick = function ()
56 56     {
57 57         aTmp = getArray(aDiv[1].innerHTML);
58 58         //设置数组长度
59 59         aTmp.length = 10;
60 60         //输出
61 61         aDiv[1].innerHTML = aTmp.join()
62 62     };
63 63     
64 64     
65 65     //第三组数据还原
66 66     aInput[4].onclick = function ()
67 67     {
68 68         aTmp = ["red","green","blue","white","yellow","black","brown"];
69 69         //输出
70 70         aDiv[2].innerHTML = aTmp.join()
71 71     };
72 72     
73 73     
74 74     //删除前三项
75 75     aInput[5].onclick = function ()
76 76     {
77 77         aTmp = getArray(aDiv[2].innerHTML);
78 78         //删除, 0开始, 删除3个
79 79         aTmp.splice(0, 3);    
80 80         //输出
81 81         aDiv[2].innerHTML = aTmp.join()
82 82     };
83 83     
84 84     
85 85     //删除第二至三项
86 86     aInput[6].onclick = function ()
87 87     {
88 88         aTmp = getArray(aDiv[2].innerHTML);
89 89         //删除, 2开始, 删除2个
90 90         aTmp.splice(1, 2);    
91 91         //输出
92 92         aDiv[2].innerHTML = aTmp.join()
93 93     };
94 94     
95 95     
96 96     //在第二顶后插入"orange", "purple"
97 97     aInput[7].onclick = function ()
98 98     {
99 99         aTmp = getArray(aDiv[2].innerHTML);
100100         //插入, 2开始, 插入"orange", "purple"
101101         aTmp.splice(1, 0, "orange", "purple");    
102102         //输出
103103         aDiv[2].innerHTML = aTmp.join()
104104     };
105105     
106106     
107107     //替换第二项和第三项
108108     aInput[8].onclick = function ()
109109     {
110110         aTmp = getArray(aDiv[2].innerHTML);
111111         //插入, 2开始替换
112112         aTmp.splice(1, 2, "#009900", "#0000ff");    
113113         //输出
114114         aDiv[2].innerHTML = aTmp.join()
115115     };
116116     
117117     //将div中的内容转为数组
118118     //str    div对象
119119     function getArray(str)
120120     {
121121         aTmp.length = 0;
122122         str = str.split(",");
123123         for (var i in str)aTmp.push(str[i]);
124124         return aTmp
125125     }
126126 }
127127 </script>
128128 </head>
129129 <body>
130130 <div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>
131131 <input value="删除January(1)" type="button">
132132 <input value="删除December(12)" type="button">
133133 <div>0,1,2,3,4,5,6,7,8,9</div>
134134 <input value="复制" type="button">
135135 <input value="还原" type="button">
136136 <div>red,green,blue,white,yellow,black,brown</div>
137137 <input value="还原" type="button">
138138 <input value="删除前三项" type="button">
139139 <input value="删除第二至三项" type="button">
140140 <input value="在第二项后插入(orange, purple)" type="button">
141141 <input value="替换第二项和第三项" type="button">
142142 
143143 
144144 </body></html>

JavaScript学习总结(八)——JavaScript数组

一、数组的声明

二、数组练习

评论区

相关推荐