JavaScript動態(tài)網頁設計 課件 2-1 數(shù)組定義及常用方法

項目2數(shù)組及其常用方法主講：***2024年1月2日JavaScript動態(tài)網頁設計1子項目2024年1月2日JavaScript動態(tài)網頁設計2學習任務

任務1數(shù)組的創(chuàng)建及賦值

任務2數(shù)組的訪問與修改

任務3常用數(shù)組操作函數(shù)2024年1月2日JavaScript動態(tài)網頁設計3任務1數(shù)組的創(chuàng)建及賦值

數(shù)組就是某類數(shù)據(jù)的集合，數(shù)組的類型可以是整形、字符串，甚至是對象。JavaScript不支持多維數(shù)組，因為數(shù)組里面可以包含對象。數(shù)組對象的作用是：使用單獨的變量名來存儲一系列的值。數(shù)組有多種創(chuàng)建及賦值的方法，最常用的有以下三種：（1）使用構造函數(shù)（2）對數(shù)組直接賦值（3）當無法提前預知數(shù)組最終元素個數(shù)時，可聲明不知道個數(shù)的數(shù)組2024年1月2日JavaScript動態(tài)網頁設計41、使用構造函數(shù)vararray1=newArray();//空數(shù)組vararray2=newArray(5);//指定數(shù)組長度vararray3=newArray(“a”,“b”,“c”);//定義并賦值2、對數(shù)組直接賦值vararray4=["a","b","c"];3、當無法提前預知數(shù)組最終元素個數(shù)時，可聲明不知道個數(shù)的數(shù)組varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";2024年1月2日JavaScript動態(tài)網頁設計5任務2數(shù)組的訪問與修改1、通過指定數(shù)組名以及索引號碼，可以訪問某個特定的元素document.write(fruit[1]);即可輸出：Orange2、如需修改已有數(shù)組中的值，只要向指定下標號添加一個新值即可fruit[1]="Cherry";此刻上面的語句：document.write(fruit[1]);將輸出：Cherry3、獲取數(shù)組長度Javascript的數(shù)組不需要預先設定長度，會自己進行擴展，“數(shù)組名.length”會返回元素個數(shù)。2024年1月2日JavaScript動態(tài)網頁設計61、push():將一個或多個新元素添加到數(shù)組未尾，并返回數(shù)組新長度: arrayObj.push([item1[,item2[,...[,itemN]]]]);push()方法可以把它的參數(shù)順序添加到ayyayObj的尾部。它直接修改arrayObj,而不是創(chuàng)建一個新的數(shù)組。范例2-1：程序代碼如下：<script>vararrayNum=[1,2];varlen=arrayNum.push(3,4);alert("長度為："+len+"--"+arrayNum);</script>運行效果：任務3常用數(shù)組操作函數(shù)對數(shù)組操作的常用函數(shù)包括對數(shù)組元素的增加、刪除、截取和合并等操作。2024年1月2日JavaScript動態(tài)網頁設計72、unshift():將一個或多個新元素添加到數(shù)組開始，數(shù)組中的元素自動后移，返回數(shù)組新長度: arrayObj.unshift([item1[,item2[,...[,itemN]]]]);范例2-2：程序代碼如下：<script>vararrayNum=[1,2];varlen=arrayNum.unshift(3,4);alert("長度為："+len+"--"+arrayNum);</script>運行效果：2024年1月2日JavaScript動態(tài)網頁設計83、shift():用于把數(shù)組的第一個元素從數(shù)組中刪除，并返回該元素的值： arrayObj.shift();如果數(shù)組是空的，那么shift()方法將不進行任何操作，返回Undefined值。范例2-3：程序代碼如下：<script>varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";alert(fruit+"\n"+fruit.shift()+"\n"+fruit);</script>運行效果：2024年1月2日JavaScript動態(tài)網頁設計94、pop():用于把數(shù)組的最后一個元素從數(shù)組中刪除，并返回該元素的值： arrayObj.pop();范例2-4：程序代碼如下：<script>varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";alert(fruit+"\n"+fruit.pop()+"\n"+fruit);</script>運行效果：2024年1月2日JavaScript動態(tài)網頁設計10返回5、slice():以數(shù)組的形式返回數(shù)組的一部分，即截取數(shù)組的一部分：arrayObj.slice(start,[end]);

注意：數(shù)組截取時不包括end對應的元素，如果省略end將復制start之后的所有元素。范例2-5：程序代碼如下：<script>vararr1=newArray();arr1[0]="one";arr1[1]="two";arr1[2]="three";arr1[3]="four";arr1[4]="five";vartemp=arr1.slice(1,2);alert(temp);</script>運行效果：2024年1月2日JavaScript動態(tài)網頁設計116、concat():將多個數(shù)組（也可以是字符串，或者是數(shù)組和字符串的混合）連接為一個數(shù)組，返回連接好的新的數(shù)組:arrayObj.concat([item1[,item2[,...[,itemN]]]]);

該方法不會改變現(xiàn)有的數(shù)組，返回被連接數(shù)組的副本。該副本數(shù)組將所有item參數(shù)添加到arrayObj中，如果要進行concat()操作的參數(shù)是數(shù)組，那么添加的是數(shù)組中的元素，而不是數(shù)組。范例2-6：程序代碼如下：<script>vararr1=newArray(3);arr1[0]="one";arr1[1]="two";arr1[2]="three";vararr2=newArray(3);arr2[0]="four";arr2[1]="five";arr2[2]="six";vartemp=arr1.concat(arr2);alert(temp);</script>2024年1月2日JavaScript動態(tài)網頁設計12運行效果：2024年1月2日JavaScript動態(tài)網頁設計137、sort():字面上對數(shù)組元素排序： sort(item1,item2[,...[,itemN]]]]);范例2-7：程序代碼如下：<script>vararr=newArray(6);arr[0]="George";arr[1]="Jo