- JavaScript從入門到精通（微視頻精編版）
- 明日科技
- 3947字
- 2020-09-01 15:02:29
7.5 數組的方法
視頻講解
數組是JavaScript中的一個內置對象，使用數組對象的方法可以更加方便地操作數組中的數據。數組對象的方法如表7.1所示。
表7.1 數組對象的方法
7.5.1 數組的添加和刪除
數組的添加和刪除可以使用concat()、push()、unshift()、pop()、shift()和splice()方法實現。
1．concat()方法
concat()方法用于將其他數組連接到當前數組的末尾。
語法如下：
arrayObject.concat(arrayX,arrayX,...,arrayX)
參數說明。
arrayObject：必選項。數組名稱。
arrayX：必選項。該參數可以是具體的值，也可以是數組對象。
返回值：返回一個新的數組，而原數組中的元素和數組長度不變。
例如，在數組的尾部添加數組元素。代碼如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
02 document.write(arr.concat(9,10)); //輸出添加元素后的新數組
運行結果為：
1,2,3,4,5,6,7,8,9,10
例如，在數組的尾部添加其他數組。代碼如下：
01 var arr1=new Array('a','b','c'); //定義數組arr1
02 var arr2=new Array('d','e','f'); //定義數組arr2
03 document.write(arr1.concat(arr2)); //輸出連接后的數組
運行結果為：
a,b,c,d,e,f
2．push()方法
push()方法向數組的末尾添加一個或多個元素，并返回添加后的數組長度。
語法如下：
arrayObject.push(newelement1,newelement2,...,newelementX)
參數說明。
arrayObject：必選項。數組名稱。
newelement1：必選項。要添加到數組的第一個元素。
newelement2：可選項。要添加到數組的第二個元素。
newelementX：可選項。可添加的多個元素。
返回值：把指定的值添加到數組后的新長度。
例如，向數組的末尾添加兩個數組元素，并輸出原數組、添加元素后的數組長度和新數組。代碼如下：
01 var arr=new Array("JavaScript","HTML","CSS"); //定義數組
02 document.write('原數組：'+arr+'<br>'); //輸出原數組
03 //向數組末尾添加兩個元素并輸出數組長度
04 document.write('添加元素后的數組長度：'+arr.push("PHP","Java")+'<br>');
05 document.write('新數組：'+arr); //輸出添加元素后的新數組
運行結果如圖7.7所示。
圖7.7 向數組的末尾添加元素
3．unshift()方法
unshift()方法向數組的開頭添加一個或多個元素。
語法如下：
arrayObject.unshift(newelement1,newelement2,...,newelementX)
參數說明。
arrayObject：必選項。數組名稱。
newelement1：必選項。向數組添加的第一個元素。
newelement2：可選項。向數組添加的第二個元素。
newelementX：可選項。可添加的多個元素。
返回值：把指定的值添加到數組后的新長度。
例如，向數組的開頭添加兩個數組元素，并輸出原數組、添加元素后的數組長度和新數組。代碼如下：
01 var arr=new Array("JavaScript","HTML","CSS"); //定義數組
02 document.write('原數組：'+arr+'<br>'); //輸出原數組
03 //向數組開頭添加兩個元素并輸出數組長度
04 document.write('添加元素后的數組長度：'+arr.unshift("PHP","Java")+'<br>');
05 document.write('新數組：'+arr); //輸出添加元素后的新數組
運行程序，會將原數組和新數組中的內容顯示在頁面中，如圖7.8所示。
圖7.8 向數組的開頭添加元素
4．pop()方法
pop()方法用于把數組中的最后一個元素從數組中刪除，并返回刪除元素的值。
語法如下：
arrayObject.pop()
參數說明。
arrayObject：必選項。數組名稱。
返回值：在數組中刪除的最后一個元素的值。
例如，刪除數組中的最后一個元素，并輸出原數組、刪除的元素和刪除元素后的數組。代碼如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
02 document.write('原數組：'+arr+'<br>'); //輸出原數組
03 var del=arr.pop(); //刪除數組中最后一個元素
04 document.write('刪除元素為：'+del+'<br>'); //輸出刪除的元素
05 document.write('刪除后的數組為：'+arr); //輸出刪除后的數組
運行結果如圖7.9所示。
圖7.9 刪除數組中最后一個元素
5．shift()方法
shift()方法用于把數組中的第一個元素從數組中刪除，并返回刪除元素的值。
語法如下：
arrayObject.shift()
參數說明。
arrayObject：必選項。數組名稱。
返回值：在數組中刪除的第一個元素的值。
例如，刪除數組中的第一個元素，并輸出原數組、刪除的元素和刪除元素后的數組。代碼如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定義數組
02 document.write('原數組：'+arr+'<br>'); //輸出原數組
03 var del=arr.shift(); //刪除數組中第一個元素
04 document.write('刪除元素為：'+del+'<br>'); //輸出刪除的元素
05 document.write('刪除后的數組為：'+arr); //輸出刪除后的數組
運行結果如圖7.10所示。
圖7.10 刪除數組中第一個元素
6．splice()方法
pop()方法的作用是刪除數組的最后一個元素，shift()方法的作用是刪除數組的第一個元素，而要想更靈活地刪除數組中的元素，可以使用splice()方法。通過splice()方法可以刪除數組中指定位置的元素，還可以向數組中的指定位置添加新元素。
語法如下：
arrayObject.splice(start,length,element1,element2,…)
參數說明。
arrayObject：必選項。數組名稱。
start：必選項。指定要刪除數組元素的開始位置，即數組的下標。
length：可選項。指定刪除數組元素的個數。如果未設置該參數，則刪除從start開始到原數組末尾的所有元素。
element：可選項。要添加到數組的新元素。
例如，在splice()方法中應用不同的參數，對相同的數組中的元素進行刪除操作。代碼如下：
01 var arr1 = new Array("a","b","c","d"); //定義數組
02 arr1.splice(1); //刪除第二個元素和之后的所有元素
03 document.write(arr1+"<br>"); //輸出刪除后的數組
04 var arr2 = new Array("a","b","c","d"); //定義數組
05 arr2.splice(1,2); //刪除數組中的第二個和第三個元素
06 document.write(arr2+"<br>"); //輸出刪除后的數組
07 var arr3 = new Array("a","b","c","d"); //定義數組
08 arr3.splice(1,2,"e","f"); //刪除數組中的第二個和第三個元素，并添加新元素
09 document.write(arr3+"<br>"); //輸出刪除后的數組
10 var arr4 = new Array("a","b","c","d"); //定義數組
11 arr4.splice(1,0,"e","f"); //在第二個元素前添加新元素
12 document.write(arr4+"<br>"); //輸出刪除后的數組
運行結果如圖7.11所示。
圖7.11 刪除數組中指定位置的元素
7.5.2 設置數組的排列順序
將數組中的元素按照指定的順序進行排列可以通過reverse()和sort()方法實現。
1．reverse()方法
reverse()方法用于顛倒數組中元素的順序。
語法如下：
arrayObject.reverse()
參數說明。
arrayObject：必選項。數組名稱。
注意
該方法會改變原來的數組，而不創建新數組。
例如，將數組中的元素順序顛倒后顯示。代碼如下：
01 var arr=new Array("JavaScript","HTML","CSS"); //定義數組
02 document.write('原數組：'+arr+'<br>'); //輸出原數組
03 arr.reverse(); //對數組元素順序進行顛倒
04 document.write('顛倒后的數組：'+arr); //輸出顛倒后的數組
運行結果如圖7.12所示。
圖7.12 將數組顛倒輸出
2．sort()方法
sort()方法用于對數組的元素進行排序。
語法如下：
arrayObject.sort(sortby)
參數說明。
arrayObject：必選項。數組名稱。
sortby：可選項。規定排序的順序，必須是函數。
說明
如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，也就是按照字符的編碼順序進行排序。如果想按照其他標準進行排序，就需要提供比較函數。
例如，將數組中的元素按字符的編碼順序進行顯示。代碼如下：
01 var arr=new Array("PHP","HTML","JavaScript"); //定義數組
02 document.write('原數組:'+arr+'<br>'); //輸出原數組
03 arr.sort(); //對數組進行排序
04 document.write('排序后的數組:'+arr); //輸出排序后的數組
運行程序，將原數組和排序后的數組輸出，結果如圖7.13所示。
圖7.13 輸出排序前與排序后的數組
如果想要將數組元素按照其他方法進行排序，就需要指定sort()方法的參數。該參數通常是一個比較函數，該函數應該有兩個參數（假設為a和b）。在對元素進行排序時，每次比較兩個元素都會執行比較函數，并將這兩個元素作為參數傳遞給比較函數。其返回值有以下兩種情況。
如果返回值大于0，則交換兩個元素的位置。
如果返回值小于等于0，則不進行任何操作。
例如，定義一個包含4個元素的數組，將數組中的元素按從小到大的順序進行輸出。代碼如下：
01 var arr=new Array(9,6,10,5); //定義數組
02 document.write('原數組：'+arr+'<br>'); //輸出原數組
03 function ascOrder(x,y){ //定義比較函數
04 if(x>y){ //如果第一個參數值大于第二個參數值
05 return 1; //返回1
06 }else{
07 return -1; //返回-1
08 }
09 }
10 arr.sort(ascOrder); //對數組進行排序
11 document.write('排序后的數組：'+arr); //輸出排序后的數組
運行結果如圖7.14所示。
圖7.14 輸出排序前與排序后的數組元素
【例7.04】將2016年電影票房排行榜前五名的影片名稱和對應的影片票房分別定義在數組中，對影片票房進行降序排序，將排序后的影片排名、影片名稱和票房輸出在表格中。代碼如下：（實例位置：資源包\源碼\07\7.04）
01 <table cellspacing="1" bgcolor="#CC00FF">
02 <tr height="30" bgcolor="#FFFFFF">
03 <td align="center" width="50">排名</td>
04 <td align="center" width="210">影片</td>
05 <td align="center" width="100">票房</td>
06 </tr>
07 <script type="text/javascript">
08 //定義影片數組movieArr
09 var movieArr=new Array("魔獸","美人魚","西游記之孫悟空三打白骨精","瘋狂動物城","美國隊長3");
10 var boxofficeArr=new Array(14.7,33.9,12,15.3,12.5); //定義票房數組boxofficeArr
11 var sortArr=new Array(14.7,33.9,12,15.3,12.5); //定義票房數組sortArr
12 function ascOrder(x,y){ //定義比較函數
13 if(x<y){ //如果第一個參數值小于第二個參數值
14 return 1; //返回1
15 }else{
16 return -1; //返回-1
17 }
18 }
19 sortArr.sort(ascOrder); //為票房進行降序排序
20 for(var i=0; i<sortArr.length; i++){ //定義外層for循環語句
21 for(var j=0; j<sortArr.length; j++){ //定義內層for循環語句
22 if(sortArr[i]==boxofficeArr[j]){ //分別獲取排序后的票房在原票房數組中的索引
23 document.write("<tr height=26 bgcolor='#FFFFFF'>"); //輸出<tr>標記
24 document.write("<td align='center'>"+(i+1)+"</td>"); //輸出影片排名
25 //輸出票房對應的影片名稱
26 document.write("<td class='left'>"+movieArr[j]+"</td>");
27 document.write("<td align='center'>"+sortArr[i]+"億元</td>"); //輸出票房
28 document.write("</tr>"); //輸出</tr>標記
29 }
30 }
31 }
32 </script>
33 </table>
運行結果如圖7.15所示。
圖7.15 輸出2016電影票房排行榜前五名
7.5.3 獲取某段數組元素
獲取數組中的某段數組元素主要用slice()方法實現。slice()方法可從已有的數組中返回選定的元素。
語法如下：
arrayObject.slice(start,end)
參數說明。
start：必選項。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。也就是說，-1指最后一個元素，-2指倒數第二個元素，以此類推。
end：可選項。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從start到數組結束的所有元素。如果這個參數是負數，那么它將從數組尾部開始算起。
返回值：返回截取后的數組元素，該方法返回的數據中不包括end索引所對應的數據。
例如，獲取指定數組中某段數組元素。代碼如下：
01 var arr=new Array("a","b","c","d","e","f"); //定義數組
02 document.write("原數組："+arr+"<br>"); //輸出原數組
03 //輸出截取后的數組
04 document.write("獲取數組中第3個元素后的所有元素："+arr.slice(2)+"<br>");
05 document.write("獲取數組中第2個到第5個元素："+arr.slice(1,5)+"<br>"); //輸出截取后的數組
06 document.write("獲取數組中倒數第2個元素后的所有元素："+arr.slice(-2)); //輸出截取后的數組
運行程序，會將原數組以及截取數組中元素后的數據輸出，運行結果如圖7.16所示。
圖7.16 獲取數組中某段數組元素
【例7.05】某歌手參加歌唱比賽，5位評委分別給出的分數是95、90、89、91、96，要獲得最終的得分需要去掉一個最高分和一個最低分，并計算剩余3個分數的平均分。試著計算出該選手的最終得分。代碼如下：（實例位置：資源包\源碼\07\7.05）
01 <script type="text/javascript">
02 var scoreArr=new Array(95,90,89,91,96); //定義分數數組
03 var scoreStr=""; //定義分數字符串變量
04 for(var i=0; i<scoreArr.length; i++){
05 scoreStr+=scoreArr[i]+"分 "; //對所有分數進行連接
06 }
07 function ascOrder(x,y){ //定義比較函數
08 if(x<y){ //如果第一個參數值小于第二個參數值
09 return 1; //返回1
10 }else{
11 return -1; //返回-1
12 }
13 }
14 scoreArr.sort(ascOrder); //為分數進行降序排序
15 var newArr=scoreArr.slice(1,scoreArr.length-1); //去除最高分和最低分
16 var totalScore=0; //定義總分變量
17 for(var i=0; i<newArr.length; i++){
18 totalScore+=newArr[i]; //計算總分
19 }
20 document.write("五位評委打分："+scoreStr); //輸出5位評委的打分
21 document.write("<br>去掉一個最高分："+scoreArr[0]+"分"); //輸出去掉的最高分
22 //輸出去掉的最低分
23 document.write("<br>去掉一個最低分："+scoreArr[scoreArr.length-1]+"分");
24 document.write("<br>選手最終得分："+totalScore/newArr.length+"分"); //輸出選手最終得分
25 </script>
運行程序，結果如圖7.17所示。
圖7.17 計算選手的最終得分
7.5.4 數組轉換成字符串
將數組轉換成字符串主要通過toString()、toLocaleString()和join()方法實現。
1．toString()方法
toString()方法可把數組轉換為字符串，并返回結果。
語法如下：
arrayObject.toString()
參數說明。
arrayObject：必選項。數組名稱。
返回值：以字符串顯示數組對象。返回值與沒有參數的join()方法返回的字符串相同。
注意
在轉換成字符串后，數組中的各元素以逗號分隔。
例如，將數組轉換成字符串。代碼如下：
01 var arr=new Array("a","b","c","d","e","f"); //定義數組
02 document.write(arr.toString()); //輸出轉換后的字符串
運行結果為：
a,b,c,d,e,f
2．toLocaleString()方法
toLocaleString()方法將數組轉換成本地字符串。
語法如下：
arrayObject.toLocaleString()
參數說明。
arrayObject：必選項。數組名稱。
返回值：以本地格式的字符串顯示的數組對象。
說明
該方法首先調用每個數組元素的toLocaleString()方法，然后使用地區特定的分隔符把生成的字符串連接起來，形成一個字符串。
例如，將數組轉換成用“,”號分隔的字符串。代碼如下：
01 var arr=new Array("a","b","c","d","e","f"); //定義數組
02 document.write(arr.toLocaleString()); //輸出轉換后的字符串
運行結果為：
a, b, c, d, e, f
3．join()方法
join()方法將數組中的所有元素放入一個字符串中。
語法如下：
arrayObject.join(separator)
參數說明。
arrayObject：必選項。數組名稱。
separator：可選項。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。
返回值：返回一個字符串。該字符串是把arrayObject的每個元素轉換為字符串，然后把這些字符串用指定的分隔符連接起來。
例如，以指定的分隔符將數組中的元素轉換成字符串。代碼如下：
01 var arr=new Array("a","b","c","d","e","f"); //定義數組
02 document.write(arr.join("#")); //輸出轉換后的字符串
運行結果為：
a#b#c#d#e#f
- Learning Cython Programming（Second Edition）
- Docker進階與實戰
- Cocos2d-x游戲開發：手把手教你Lua語言的編程方法
- Unity 2020 Mobile Game Development
- HBase從入門到實戰
- Swift語言實戰精講
- Working with Odoo
- Unity 5.X從入門到精通
- 零基礎看圖學ScratchJr：少兒趣味編程（全彩大字版）
- Building Business Websites with Squarespace 7（Second Edition）
- 超好玩的Scratch 3.5少兒編程
- PHP+MySQL Web應用開發教程
- Laravel Design Patterns and Best Practices
- WCF全面解析
- Raspberry Pi Robotic Projects