JavaScript學習總結(八)——JavaScript數組

時間 2019-11-17

標籤 javascript 學習總結數組欄目 JavaScript 简体版

原文原文鏈接

JavaScript中的Array對象就是數組，首先是一個動態數組，無需預先制定大小，並且是一個像Java中數組、ArrayList、Hashtable等的超強綜合體。javascript

1、數組的聲明

　　常規方式聲明：html

　　　　一、var arrName = new Array();//建立一個數組java

　　　　二、var arrName = new Array([size]);　//建立一個數組並指定長度，注意不是上限，是長度數組

　　　　三、var arrName =new Array("孤傲蒼狼","白虎神皇","滅世魔尊");//建立一個數組，並初始化數組的內容ui

　　注意：雖然var arrName = new Array([size]);指定了長度，但實際上全部狀況下數組都是變長的，也就是說即便指定了長度爲2，仍然能夠將元素存儲在規定長度之外的，注意：這時長度會隨之改變。this

　　Array的簡化聲明spa

　　　　一、普通數組初始化：var arr = [3, 5, 6, 8, 9];code

範例1：xml

 1 <script type="text/javascript">
 2 //JavaScript聲明數組的四種方式  3 var arr1 = new Array();//建立一個空數組  4 arr1[0]="xdp";  5 arr1[1]="gacl";  6 var arr2 = new Array(2);//建立一個數組並指定長度爲2  7 arr2["name0"]="xdp";//arr2第一個元素  8 arr2["name1"]="gacl";//arr2第二個元素  9 arr2["name2"]="xtxd";//arr2第三個元素，arr2雖然在聲明時指明瞭長度爲2，可是仍是能夠添加超過其指明長度的元素 10 var arr3 = new Array("孤傲蒼狼","白虎神皇","滅世魔尊");//建立一個數組並初始化數組中的元素 11 var arr4 = [1,true,"String"];//Array的簡化聲明 12 13 document.write("遍歷arr1中的元素：<br/>"); 14 for(var i in arr1) { 15 document.write(arr1[i]+"<br/>"); 16  } 17 document.write("-----------------------------------------------------------------------------<br/>"); 18 document.write("遍歷arr2中的元素：<br/>"); 19 for(var i in arr2) { 20 document.write("arr2[\""+i+"\"]="+arr2[i]+"<br/>"); 21  } 22 document.write("-----------------------------------------------------------------------------<br/>"); 23 document.write("遍歷arr3中的元素：<br/>"); 24 for(var i in arr3) { 25 document.write(arr3[i]+"<br/>"); 26  } 27 document.write("-----------------------------------------------------------------------------<br/>"); 28 document.write("遍歷arr4中的元素：<br/>"); 29 for(var i in arr4) { 30 document.write(arr4[i]+"<br/>"); 31  } 32 </script>

運行結果：htm

範例2：

 1 <script type="text/javascript">
 2 var names = new Array();//普通方式聲明數組，不須要指明數組的長度  3 names[0] = "孤傲蒼狼";  4 names[1] = "白虎神皇";  5 names[2] = "滅世魔尊";  6 for (var i = 0; i < names.length; i++) {  7 document.write("names["+i+"] = "+names[i]);  8 document.write("<br/>");  9  } 10 11 var pinyins = new Array(); 12 pinyins["人"] = "ren"; 13 pinyins["口"] = "kou"; 14 pinyins["手"] = "shou"; 15 document.write("pinyins[\"人\"] = "+pinyins["人"]); 16 document.write("<br/>"); 17 document.write("pinyins.手 = "+pinyins.手);//像Hashtable、Dictionary那樣用，並且像它們同樣效率高。 18 document.write("<br/>"); 19 //Array的簡化聲明 20 var arr1 = [3, 5];//普通數組初始化 21 for (var i = 0; i < arr1.length; i++) { 22 document.write("arr1["+i+"] = "+arr1[i]); 23 document.write("<br/>"); 24  } 25 </script>

運行結果：

2、數組練習

　　Ferris寫過一個數組的案例，如下就是他的案例代碼，挺全的，思路也挺好！

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>  3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  4 <title>數組練習：各類數組方法的使用</title>  5 <style>  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 </style>  8 <script type="text/javascript">  9 window.onload = function ()  10 {  11 var aDiv = document.getElementsByTagName("div");  12 var aInput = document.getElementsByTagName("input");  13 var i = 0;  14 var bS1 = bS2 = true;  15 var aTmp = [];  16  17 //刪除/添加第一項  18 aInput[0].onclick = function ()  19  {  20 aTmp = getArray(aDiv[0].innerHTML);  21 bS1 ?  22 //刪除第一項， shift()方法  23 (aTmp.shift(), this.value = this.value.replace("刪除","添加"), bS1 = false) :  24 //添加第一項, unshift()方法  25 (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","刪除"), bS1 = true);  26 //輸出  27 aDiv[0].innerHTML = aTmp.join()  28  };  29  30  31 //刪除/添加最後一項  32 aInput[1].onclick = function ()  33  {  34 aTmp = getArray(aDiv[0].innerHTML);  35 bS2 ?  36 //刪除最後一項, pop()方法  37 (aTmp.pop(), this.value = this.value.replace("刪除","添加"), bS2 = false) :  38 //添加最後一項, push()方法  39 (aTmp.push("December(12)"), this.value = this.value.replace("添加","刪除"), bS2 = true);  40 //輸出  41 aDiv[0].innerHTML = aTmp.join()  42  };  43  44  45 //複製, concat()方法  46 aInput[2].onclick = function ()  47  {  48 aTmp = getArray(aDiv[1].innerHTML);  49 //輸出  50 aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/\s/g,"")  51  };  52  53  54 //還原, 利用數組的 length 特色  55 aInput[3].onclick = function ()  56  {  57 aTmp = getArray(aDiv[1].innerHTML);  58 //設置數組長度  59 aTmp.length = 10;  60 //輸出  61 aDiv[1].innerHTML = aTmp.join()  62  };  63  64  65 //第三組數據還原  66 aInput[4].onclick = function ()  67  {  68 aTmp = ["red","green","blue","white","yellow","black","brown"];  69 //輸出  70 aDiv[2].innerHTML = aTmp.join()  71  };  72  73  74 //刪除前三項  75 aInput[5].onclick = function ()  76  {  77 aTmp = getArray(aDiv[2].innerHTML);  78 //刪除, 0開始, 刪除3個  79 aTmp.splice(0, 3);  80 //輸出  81 aDiv[2].innerHTML = aTmp.join()  82  };  83  84  85 //刪除第二至三項  86 aInput[6].onclick = function ()  87  {  88 aTmp = getArray(aDiv[2].innerHTML); 89 //刪除, 2開始, 刪除2個 90 aTmp.splice(1, 2); 91 //輸出 92 aDiv[2].innerHTML = aTmp.join() 93 }; 94 95 96 //在第二頂後插入"orange", "purple" 97 aInput[7].onclick = function () 98 { 99 aTmp = getArray(aDiv[2].innerHTML); 100 //插入, 2開始, 插入"orange", "purple" 101 aTmp.splice(1, 0, "orange", "purple"); 102 //輸出 103 aDiv[2].innerHTML = aTmp.join() 104 }; 105 106 107 //替換第二項和第三項 108 aInput[8].onclick = function () 109 { 110 aTmp = getArray(aDiv[2].innerHTML); 111 //插入, 2開始替換 112 aTmp.splice(1, 2, "#009900", "#0000ff"); 113 //輸出 114 aDiv[2].innerHTML = aTmp.join() 115 }; 116 117 //將div中的內容轉爲數組 118 //str div對象 119 function getArray(str) 120 { 121 aTmp.length = 0; 122 str = str.split(","); 123 for (var i in str)aTmp.push(str[i]); 124 return aTmp 125 } 126 } 127 </script> 128 </head> 129 <body> 130 <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> 131 <input value="刪除January(1)" type="button"> 132 <input value="刪除December(12)" type="button"> 133 <div>0,1,2,3,4,5,6,7,8,9</div> 134 <input value="複製" type="button"> 135 <input value="還原" type="button"> 136 <div>red,green,blue,white,yellow,black,brown</div> 137 <input value="還原" type="button"> 138 <input value="刪除前三項" type="button"> 139 <input value="刪除第二至三項" type="button"> 140 <input value="在第二項後插入(orange, purple)" type="button"> 141 <input value="替換第二項和第三項" type="button"> 142 143 144 </body></html>