- JavaScript從入門到精通（微視頻精編版）
- 明日科技
- 1286字
- 2020-09-01 15:02:29
7.3 操作數組元素
視頻講解
數組是數組元素的集合，在對數組進行操作時，實際上是對數組元素進行輸入或輸出、添加或刪除的操作。
7.3.1 數組元素的輸入和輸出
數組元素的輸入即為數組中的元素進行賦值，數組元素的輸出即獲取數組中元素的值并輸出，下面分別進行介紹。
1．數組元素的輸入
向數組對象中輸入數組元素有3種方法。
（1）在定義數組對象時直接輸入數組元素
這種方法只能在數組元素確定的情況下才可以使用。
例如，在創建數組對象的同時存入字符串數組。代碼如下：
var arr = new Array("a","b","c","d"); //定義一個包含4個元素的數組
（2）利用數組對象的元素下標向其輸入數組元素
該方法可以隨意地向數組對象中的各元素賦值，或是修改數組中的任意元素值。
例如，在創建一個長度為7的數組對象后，向下標為3和4的元素中賦值。
01 var arr = new Array(7); //定義一個長度為7的數組
02 arr[3] = "a"; //為下標為3的數組元素賦值
03 arr[4] = "b"; //為下標為4的數組元素賦值
（3）利用for語句向數組對象中輸入數組元素
該方法主要用于批量向數組對象中輸入數組元素，一般用于向數組對象中賦初值。
例如，可以通過改變變量n的值（必須是數值型），給數組對象賦指定個數的數值元素。代碼如下：
01 var n=7; //定義變量并對其賦值
02 var arr = new Array(); //定義一個空數組
03 for (var i=0;i<n;i++){ //應用for循環語句為數組元素賦值
04 arr[i]=i;
05 }
2．數組元素的輸出
將數組對象中的元素值進行輸出有3種方法。
（1）用下標獲取指定元素值
該方法通過數組對象的下標，獲取指定的元素值。
例如，獲取數組對象中的第3個元素的值。代碼如下：
01 var arr = new Array("a","b","c","d"); //定義數組
02 var third = arr[2]; //獲取下標為2的數組元素
03 document.write(third); //輸出變量的值
運行結果為：
c
注意
數組對象的元素下標是從0開始的。
（2）用for語句獲取數組中的元素值
該方法是利用for語句獲取數組對象中的所有元素值。
例如，獲取數組對象中的所有元素值。代碼如下：
01 var str = ""; //定義變量并進行初始化
02 var arr = new Array("a","b","c","d"); //定義數組
03 for (var i=0;i<4;i++){ //定義for循環語句
04 str=str+arr[i]; //將各個數組元素連接在一起
05 }
06 document.write(str); //輸出變量的值
運行結果為：
abcd
（3）用數組對象名輸出所有元素值
該方法是用創建的數組對象本身顯示數組中的所有元素值。
例如，顯示數組中的所有元素值。代碼如下：
01 var arr = new Array("a","b","c","d"); //定義數組
02 document.write(arr); //輸出數組中所有元素的值
運行結果為：
a,b,c,d
【例7.01】某班級里有3個學霸，創建一個存儲3個學霸姓名（張三、李四、王五）的數組，然后輸出這3個數組元素。首先創建一個包含3個元素的數組，并為每個數組元素賦值，然后使用for循環語句遍歷輸出數組中的所有元素。代碼如下：（實例位置：資源包\源碼\07\7.01）
01 <script type="text/javascript">
02 var students = new Array(3); //定義數組
03 students[0] = "張三"; //為下標為0的數組元素賦值
04 students[1] = "李四"; //為下標為1的數組元素賦值
05 students[2] = "王五"; //為下標為2的數組元素賦值
06 for(var i=0;i<3;i++){
07 document.write("第"+(i+1)+"個學霸姓名是："+students[i]+"<br>"); //循環輸出數組元素
08 }
09 </script>
運行結果如圖7.3所示。
圖7.3 使用數組存儲學霸姓名
7.3.2 數組元素的添加
在定義數組時雖然已經設置了數組元素的個數，但是該數組的元素個數并不是固定的。可以通過添加數組元素的方法來增加數組元素的個數。添加數組元素的方法非常簡單，只要對新的數組元素進行賦值即可。
例如，定義一個包含兩個元素的數組，然后為數組添加3個元素，最后輸出數組中的所有元素值，代碼如下：
01 var arr = new Array("零基礎學JavaScript","零基礎學PHP"); //定義數組
02 arr[2] = "零基礎學Java"; //添加新的數組元素
03 arr[3] = "零基礎學C#"; //添加新的數組元素
04 arr[4] = "零基礎學Oracle"; //添加新的數組元素
05 document.write(arr); //輸出添加元素后的數組
運行結果為：
零基礎學JavaScript,零基礎學PHP,零基礎學Java,零基礎學C#,零基礎學Oracle
另外，還可以對已經存在的數組元素進行重新賦值。例如，定義一個包含兩個元素的數組，將第二個數組元素進行重新賦值并輸出數組中的所有元素值，代碼如下：
01 var arr = new Array("零基礎學JavaScript","零基礎學PHP"); //定義數組
02 arr[1] = "零基礎學Java"; //為下標為1的數組元素重新賦值
03 document.write(arr); //輸出重新賦值后的新數組
運行結果為：
零基礎學JavaScript,零基礎學Java
7.3.3 數組元素的刪除
使用delete運算符可以刪除數組元素的值，但是只能將該元素恢復為未賦值的狀態，即undefined，而不能真正地刪除一個數組元素，數組中的元素個數也不會減少。
例如，定義一個包含3個元素的數組，然后應用delete運算符刪除下標為1的數組元素，最后輸出數組中的所有元素值。代碼如下：
01 var arr = new Array("零基礎學JavaScript","零基礎學PHP","零基礎學Java");//定義數組
02 delete arr[1]; //刪除下標為1的數組元素
03 document.write(arr); //輸出刪除元素后的數組
運行結果為：
零基礎學JavaScript,,零基礎學Java
注意
應用delete運算符刪除數組元素之前和刪除數組元素之后，元素個數并沒有改變，改變的只是被刪除的數組元素的值，該值變為undefined。
- HTML5+CSS3王者歸來
- AngularJS入門與進階
- 解構產品經理：互聯網產品策劃入門寶典
- Microsoft Dynamics 365 Extensions Cookbook
- Three.js開發指南：基于WebGL和HTML5在網頁上渲染3D圖形和動畫（原書第3版）
- Python算法從菜鳥到達人
- Angular開發入門與實戰
- MySQL從入門到精通（軟件開發視頻大講堂）
- RealSenseTM互動開發實戰
- Java程序設計實用教程（第2版）
- ASP.NET開發寶典
- Java EE程序設計與開發實踐教程
- Processing開發實戰
- 響應式編程實戰：構建彈性、可伸縮、事件驅動的分布式系統
- 商業銀行經營管理（第2版）