javascript
Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组
目錄
- 一、數(shù)組的創(chuàng)建
- （一）Array()構(gòu)造函數(shù)
- （二）字面量方法
- 二、數(shù)組元素的讀寫和遍歷
- 三、添加和刪除數(shù)組元素
- （一）添加數(shù)組元素
- （二）刪除數(shù)組元素
- （三）splice()方法
- 四、二維數(shù)組及多維數(shù)組
- 五、數(shù)組的搜索和排序
- （一）數(shù)組的排序
- （二）數(shù)組的搜索
- 六、數(shù)組的截取和合并
- 例題
一、數(shù)組的創(chuàng)建
JavaScript中數(shù)組和其它語言不一樣，它的一個數(shù)組中可以存放多種類型的元素，即數(shù)組每一項可以是任何一種數(shù)據(jù)類型的數(shù)據(jù)，且數(shù)組的大小是可以動態(tài)調(diào)整的，即根據(jù)數(shù)據(jù)的增加而自動增長以容納更多的數(shù)據(jù)。
有兩種方式可以創(chuàng)建數(shù)組，分別是通過Array()構(gòu)造函數(shù)和字面量方法創(chuàng)建，另外在數(shù)組中可以通過數(shù)組名.length的格式來返回數(shù)組的長度。
（一）Array()構(gòu)造函數(shù)
通過Array()構(gòu)造函數(shù)創(chuàng)建數(shù)組，這里的new是一個操作符，作用是通過構(gòu)造函數(shù)來創(chuàng)建一個實例對象，如下：
var a1=new Array();//創(chuàng)建一個空數(shù)組 var a2=new Array(0);//創(chuàng)建一個空數(shù)組 var a3=new Array(5);//創(chuàng)建一個數(shù)組長度為5的數(shù)組，由于數(shù)組的特性，所以數(shù)組長度還是可以動態(tài)調(diào)整的 var a4=new Array(5,6,7);//創(chuàng)建一個數(shù)組，傳入多個參數(shù)，作為初始化數(shù)據(jù)加到數(shù)組中 var a5=new Array("javascript",123,"語言");//數(shù)組每一項可以是任何一種數(shù)據(jù)類型的數(shù)據(jù)例如下列html代碼，在控制臺輸出兩個數(shù)組：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>text1</title></head><body><script>var number1 = new Array();console.log(number1);var number2 = new Array(10, "ada", 1.233);console.log(number2);</script></body> </html>控制臺中顯示了number1[]和number2[]數(shù)組的長度大小以及數(shù)組中的每項：
展開后可看到length：0和length：3，即數(shù)組number1數(shù)組的長度為0，number2數(shù)組的長度為3如下：
（二）字面量方法
另一種方法是通過字面量法創(chuàng)建數(shù)組，和Array()構(gòu)造函數(shù)一樣，可以使用方括號“[ ]”創(chuàng)建空數(shù)組和向數(shù)組內(nèi)傳入初始化數(shù)據(jù)，但與不同的是無論傳入幾個參數(shù)，數(shù)組都會把傳入的參數(shù)作為初始化內(nèi)容，如下：
var a1=[];//創(chuàng)建一個空數(shù)組 var a2=[0];//創(chuàng)建一個數(shù)組，向數(shù)組內(nèi)傳入?yún)?shù)0，數(shù)組的長度為1，注意這里并不是空數(shù)組 var a3=[3];//創(chuàng)建一個數(shù)組，向數(shù)組內(nèi)傳入?yún)?shù)3，數(shù)組的長度為1 var a4=[2,3,4,5];//創(chuàng)建一個數(shù)組，向數(shù)組內(nèi)傳入?yún)?shù)2，3，4，5，數(shù)組的長度為4 var a4=[10, "ada", "數(shù)據(jù)段"];//傳入不同數(shù)據(jù)類型的數(shù)據(jù)例如下列html代碼，在控制臺中輸出兩個數(shù)組的長度和數(shù)組內(nèi)的元素：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = []var a2 = [100, "wwddw"]console.log(a1.length)console.log(a2.length)console.log(a1)console.log(a2)</script></body> </html>運行結(jié)果如下：
二、數(shù)組元素的讀寫和遍歷
JavaScript和c語言、c++以及java一樣，數(shù)組的第一個元素的下標(biāo)是0，例如創(chuàng)建一個數(shù)組長度為5的數(shù)組，即從第一個元素開始，依次的元素下標(biāo)為0，1，2，3，4。
例如下列html代碼：
運行結(jié)果如下：
例如下列html代碼，在控制臺通過for循環(huán)依次遍歷輸出數(shù)組a中每個元素，最后輸出該數(shù)組的長度：
運行結(jié)果如下，由于我們傳入了四個參數(shù)，所以在i <= a.length時，進(jìn)行了四次循環(huán)后退出循環(huán)，由于數(shù)組的第一個元素的下標(biāo)是0，所以第四個元素為空即不含有值undefined：
所以一般遍歷輸出數(shù)組元素時，可以直接將number.length改為number.length-1，如下：
輸出結(jié)果：
三、添加和刪除數(shù)組元素
（一）添加數(shù)組元素
1、若要在數(shù)組的首位添加元素，可通過設(shè)置一個變量等于數(shù)組的長度，即數(shù)組名稱.length，然后通過數(shù)組賦值變量的方法將數(shù)組的第一個元素空出，將數(shù)組中的所有元素先后移一位。
例如下列html代碼，循環(huán)遍歷后將所有元素向后移一位，然后向數(shù)組的首位添加新的元素，并在控制臺中輸出添加后的數(shù)組：
運行結(jié)果如下：
另外還可以通過unshift()方法直接將元素插入數(shù)組的首位，可以一次插入一至多個元素。
例如下列html代碼，通過unshift()方法向數(shù)組a1內(nèi)一次性插入三個元素，然后輸出添加后的數(shù)組：
運行結(jié)果如下：
2、通過數(shù)組長度，即數(shù)組名稱[數(shù)組名稱.length]在數(shù)組的末尾添加新的元素。
例如下列html代碼，向數(shù)組a2末尾添加一個元素，并在控制臺中輸出添加后的該數(shù)組：
運行結(jié)果如下：
另外還可以通過使用push()方法添加元素至數(shù)組末尾，該方法可在數(shù)組末尾添加一至多個元素。
例如下列html代碼，通過push()方法在數(shù)組末尾添加兩個元素，并在控制臺中輸出添加后的數(shù)組：
運行結(jié)果如下：
（二）刪除數(shù)組元素
1、刪除數(shù)組的首位元素和在首位添加一個元素一樣，也是通過for循環(huán)，其中第二位元素把第一位的值覆蓋，整體向前移動一位，但最后一位移動后為undefined，總的來說并沒有真正的刪除。
例如下列html代碼，通過循環(huán)將數(shù)組的所有元素向前移動一位，并在控制臺中輸出數(shù)組，可見第一位元素被覆蓋：
運行結(jié)果如下：
而通過shift()方法可以真正地刪除數(shù)組的首位元素。
例如下列html代碼，調(diào)用shift()方法，然后在控制臺中輸出刪除后的數(shù)組：
運行結(jié)果如下：
2、通過pop()方法可以刪除數(shù)組的最后一個元素。
例如下列html代碼，調(diào)用pop()方法，然后在控制臺中輸出刪除后的數(shù)組：
運行結(jié)果如下：
（三）splice()方法
當(dāng)需要在數(shù)組的指定位置添加和刪除元素時就要使用splice()方法，該方法格式如下：
splice(刪除元素的開始位置,刪除元素的個數(shù),在刪除元素的位置上所要插入的新元素)例如下列html代碼，刪除從數(shù)組a1的下標(biāo)1開始的2個元素，然后在控制臺輸出該數(shù)組：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];a1.splice(1,2);console.log(a1);</script></body> </html>運行結(jié)果如下，刪除了元素123、“語言”：
例如下列html代碼，從數(shù)組a1的下標(biāo)3開始刪除0個元素，添加3個元素，然后在控制臺輸出該數(shù)組：
運行結(jié)果如下：
例如下列html代碼，從數(shù)組a1的下標(biāo)3開始刪除3個元素，添加3個元素，然后在控制臺輸出該數(shù)組：
運行結(jié)果如下：
四、二維數(shù)組及多維數(shù)組
在JavaScript中不能直接定義二維數(shù)組及多維數(shù)組，只能通過數(shù)組套數(shù)組的方式來實現(xiàn)矩陣、二維數(shù)組及多維數(shù)組。
例如下列html代碼，創(chuàng)建了一個三維數(shù)組，一個數(shù)組內(nèi)包含三個數(shù)組，通過其下標(biāo)訪問其元素并在控制臺中輸出：
運行結(jié)果如下：
五、數(shù)組的搜索和排序
（一）數(shù)組的排序
在JavaScript中，可以通過reverse()方法和sort()方法對數(shù)組進(jìn)行排序，它們的返回值都是經(jīng)過排序后的數(shù)組。
reverse()方法用于反轉(zhuǎn)數(shù)組的所有元素，例如下列html代碼：
運行結(jié)果如下：
sort()方法用于升序排列數(shù)組，它會調(diào)用每個元素的toString()轉(zhuǎn)型方法，即將元素轉(zhuǎn)為字符串然后比較，但該方法不是最佳的方案，它可能會得到錯誤的排序結(jié)果，所以就需要定義一個函數(shù)來作為參數(shù)傳遞給sort()方法。
例如下列html代碼，定義了兩個函數(shù)作為參數(shù)傳遞給sort()方法，然后進(jìn)行升序或降序排列后在控制臺輸出該數(shù)組：
運行結(jié)果如下：
（二）數(shù)組的搜索
數(shù)組的搜索通過indexOf()和lastIndexOf()兩個方法實現(xiàn)，indexOf()返回與參數(shù)匹配的第一個元素的索引，lastIndexOf()返回與參數(shù)匹配的最后一個元素的索引。
例如下列html代碼，通過indexOf()和lastIndexOf()兩個方法查找數(shù)組中元素為96的索引值：
運行結(jié)果如下：
六、數(shù)組的截取和合并
（一）數(shù)組的合并通過slice()方法實現(xiàn)，slice()方法在無參時只是復(fù)制當(dāng)前數(shù)組并返回，若傳遞的是元素，則元素會被添加到數(shù)組的末尾，而若傳遞的是數(shù)組時，則該方法會將該數(shù)組中的元素添加到結(jié)果數(shù)組中。
例如下列html代碼：
運行結(jié)果如下：
（二）通過concat()方法實現(xiàn)截取數(shù)組，要注意它不會影響原數(shù)組的值，它可以接收一個或多個參數(shù)，當(dāng)為一個參數(shù)時，該方法截取返回從該參數(shù)開始到數(shù)組末尾的所有項；當(dāng)為兩個參數(shù)時，截取索引位置開始和結(jié)束之間的所有元素。
例如下列html代碼：
運行結(jié)果如下：
例題
例1、通過HTML語言和JavaScript程序編寫一個一維數(shù)組長度為8，通過輸入框輸入文本或數(shù)字，實現(xiàn)整個數(shù)組的倒轉(zhuǎn)和文本排序及數(shù)值排序。
代碼如下：
運行結(jié)果如下：
實現(xiàn)數(shù)組長度為8的數(shù)組內(nèi)的文本倒轉(zhuǎn)和排序：
實現(xiàn)數(shù)組長度為8的數(shù)組內(nèi)的數(shù)字倒轉(zhuǎn)和排序：
例2、用HTML語言和JavaScript程序編寫一個一維數(shù)字?jǐn)?shù)組，數(shù)組長度為7，通過輸入框輸入數(shù)組內(nèi)的元素從而實現(xiàn)數(shù)組中所有數(shù)字的和與平均數(shù)。
代碼如下：
運行結(jié)果如下：
總結(jié)
以上是生活随笔為你收集整理的Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第四章 JavaS
- 下一篇： C语言程序设计——设计一个学生管理系统（