日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组

發布時間：2024/2/28 javascript 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄

  • 一、數組的創建
    • （一）Array()構造函數
    • （二）字面量方法
  • 二、數組元素的讀寫和遍歷
  • 三、添加和刪除數組元素
    • （一）添加數組元素
    • （二）刪除數組元素
    • （三）splice()方法
  • 四、二維數組及多維數組
  • 五、數組的搜索和排序
    • （一）數組的排序
    • （二）數組的搜索
  • 六、數組的截取和合并
  • 例題

一、數組的創建

JavaScript中數組和其它語言不一樣，它的一個數組中可以存放多種類型的元素，即數組每一項可以是任何一種數據類型的數據，且數組的大小是可以動態調整的，即根據數據的增加而自動增長以容納更多的數據。
有兩種方式可以創建數組，分別是通過Array()構造函數和字面量方法創建，另外在數組中可以通過數組名.length的格式來返回數組的長度。

（一）Array()構造函數

通過Array()構造函數創建數組，這里的new是一個操作符，作用是通過構造函數來創建一個實例對象，如下：

var a1=new Array();//創建一個空數組 var a2=new Array(0);//創建一個空數組 var a3=new Array(5);//創建一個數組長度為5的數組，由于數組的特性，所以數組長度還是可以動態調整的 var a4=new Array(5,6,7);//創建一個數組，傳入多個參數，作為初始化數據加到數組中 var a5=new Array("javascript",123,"語言");//數組每一項可以是任何一種數據類型的數據

例如下列html代碼，在控制臺輸出兩個數組：

<!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[]數組的長度大小以及數組中的每項：

展開后可看到length：0和length：3，即數組number1數組的長度為0，number2數組的長度為3如下：

（二）字面量方法

另一種方法是通過字面量法創建數組，和Array()構造函數一樣，可以使用方括號“[ ]”創建空數組和向數組內傳入初始化數據，但與不同的是無論傳入幾個參數，數組都會把傳入的參數作為初始化內容，如下：

var a1=[];//創建一個空數組 var a2=[0];//創建一個數組，向數組內傳入參數0，數組的長度為1，注意這里并不是空數組 var a3=[3];//創建一個數組，向數組內傳入參數3，數組的長度為1 var a4=[2,3,4,5];//創建一個數組，向數組內傳入參數2，3，4，5，數組的長度為4 var a4=[10, "ada", "數據段"];//傳入不同數據類型的數據

例如下列html代碼，在控制臺中輸出兩個數組的長度和數組內的元素：

<!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>

運行結果如下：

二、數組元素的讀寫和遍歷

JavaScript和c語言、c++以及java一樣，數組的第一個元素的下標是0，例如創建一個數組長度為5的數組，即從第一個元素開始，依次的元素下標為0，1，2，3，4。
例如下列html代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = new Array(3);a1[0] = 0.2;a1[1] = "wdwdwd";a1[2] = "數據結構";console.log(a1)var a2 = ["javascript", 123, "語言", 2.333];console.log(a2[2]); //在控制臺中輸出數組a2的元素下標為2的元素</script></body> </html>

運行結果如下：

例如下列html代碼，在控制臺通過for循環依次遍歷輸出數組a中每個元素，最后輸出該數組的長度：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a = ["javascript", 123, "語言", 2.333];for (var i = 0; i <= a.length; i++)console.log(a[i])console.log(a.length)</script></body> </html>

運行結果如下，由于我們傳入了四個參數，所以在i <= a.length時，進行了四次循環后退出循環，由于數組的第一個元素的下標是0，所以第四個元素為空即不含有值undefined：

所以一般遍歷輸出數組元素時，可以直接將number.length改為number.length-1，如下：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a = ["javascript", 123, "語言", 2.333];for (var i = 0; i <= a.length-1; i++)console.log(a[i])console.log(a.length)</script></body> </html>

輸出結果：

三、添加和刪除數組元素

（一）添加數組元素

1、若要在數組的首位添加元素，可通過設置一個變量等于數組的長度，即數組名稱.length，然后通過數組賦值變量的方法將數組的第一個元素空出，將數組中的所有元素先后移一位。
例如下列html代碼，循環遍歷后將所有元素向后移一位，然后向數組的首位添加新的元素，并在控制臺中輸出添加后的數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];for (var i = a1.length; i >= 0; i--)a1[i] = a1[i - 1];a1[0] = "第一個";console.log(a1);</script></body> </html>

運行結果如下：

另外還可以通過unshift()方法直接將元素插入數組的首位，可以一次插入一至多個元素。
例如下列html代碼，通過unshift()方法向數組a1內一次性插入三個元素，然后輸出添加后的數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];a1.unshift(3, "sdd", "IWDJ");console.log(a1);</script></body> </html>

運行結果如下：

2、通過數組長度，即數組名稱[數組名稱.length]在數組的末尾添加新的元素。
例如下列html代碼，向數組a2末尾添加一個元素，并在控制臺中輸出添加后的該數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a2 = ["javascript", 123, "語言", 2.333];a2[a2.length] = 122;console.log(a1)</script></body> </html>

運行結果如下：

另外還可以通過使用push()方法添加元素至數組末尾，該方法可在數組末尾添加一至多個元素。
例如下列html代碼，通過push()方法在數組末尾添加兩個元素，并在控制臺中輸出添加后的數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a2 = ["javascript", 123, "語言", 2.333];a2.push(0, "1+1");console.log(a2);</script></body> </html>

運行結果如下：

（二）刪除數組元素

1、刪除數組的首位元素和在首位添加一個元素一樣，也是通過for循環，其中第二位元素把第一位的值覆蓋，整體向前移動一位，但最后一位移動后為undefined，總的來說并沒有真正的刪除。
例如下列html代碼，通過循環將數組的所有元素向前移動一位，并在控制臺中輸出數組，可見第一位元素被覆蓋：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];for (var i = 0; i < a1.length; i++)a1[i] = a1[i + 1];console.log(a1);</script></body> </html>

運行結果如下：

而通過shift()方法可以真正地刪除數組的首位元素。
例如下列html代碼，調用shift()方法，然后在控制臺中輸出刪除后的數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];a1.shift();console.log(a1);</script></body> </html>

運行結果如下：
2、通過pop()方法可以刪除數組的最后一個元素。
例如下列html代碼，調用pop()方法，然后在控制臺中輸出刪除后的數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];a1.pop();console.log(a1);</script></body> </html>

運行結果如下：

（三）splice()方法

當需要在數組的指定位置添加和刪除元素時就要使用splice()方法，該方法格式如下：

splice(刪除元素的開始位置,刪除元素的個數,在刪除元素的位置上所要插入的新元素)

例如下列html代碼，刪除從數組a1的下標1開始的2個元素，然后在控制臺輸出該數組：

<!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>

運行結果如下，刪除了元素123、“語言”：

例如下列html代碼，從數組a1的下標3開始刪除0個元素，添加3個元素，然后在控制臺輸出該數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];a1.splice(3, 0, "wd", 6, "java");console.log(a1);</script></body> </html>

運行結果如下：

例如下列html代碼，從數組a1的下標3開始刪除3個元素，添加3個元素，然后在控制臺輸出該數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a1 = ["javascript", 123, "語言", 2.333];a1.splice(3, 3, "wd", 6, "java");console.log(a1);</script></body> </html>

運行結果如下：

四、二維數組及多維數組

在JavaScript中不能直接定義二維數組及多維數組，只能通過數組套數組的方式來實現矩陣、二維數組及多維數組。
例如下列html代碼，創建了一個三維數組，一個數組內包含三個數組，通過其下標訪問其元素并在控制臺中輸出：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var student = [["xiaoming", 1, "男", 20],["xiaohong", 2, "女", 19],["xiaoxia", 3, "女", 18]];console.log(student);console.log(student[0][0]);console.log(student[1][1]);console.log(student[2][2]);</script></body> </html>

運行結果如下：

五、數組的搜索和排序

（一）數組的排序

在JavaScript中，可以通過reverse()方法和sort()方法對數組進行排序，它們的返回值都是經過排序后的數組。
reverse()方法用于反轉數組的所有元素，例如下列html代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a = [1, 10, 0, -9, 2, 96, 4, 3, -6, 8];a.reverse();console.log(a);</script></body> </html>

運行結果如下：

sort()方法用于升序排列數組，它會調用每個元素的toString()轉型方法，即將元素轉為字符串然后比較，但該方法不是最佳的方案，它可能會得到錯誤的排序結果，所以就需要定義一個函數來作為參數傳遞給sort()方法。
例如下列html代碼，定義了兩個函數作為參數傳遞給sort()方法，然后進行升序或降序排列后在控制臺輸出該數組：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">function asc(x, y) { //升序if (x < y)return -1;else if (x > y)return 1;elsereturn 0;}function desc(x, y) { //降序if (x < y)return 1;else if (x > y)return -1;elsereturn 0;}var a = [1, 10, 0, -9, 2, 96, 4, 3, -6, 8];a.sort(asc);console.log(a);a.sort(desc);console.log(a);</script></body> </html>

運行結果如下：

（二）數組的搜索

數組的搜索通過indexOf()和lastIndexOf()兩個方法實現，indexOf()返回與參數匹配的第一個元素的索引，lastIndexOf()返回與參數匹配的最后一個元素的索引。
例如下列html代碼，通過indexOf()和lastIndexOf()兩個方法查找數組中元素為96的索引值：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a = [0, 96, 1, 4, 96, -6, 8];console.log(a.indexOf(96));console.log(a.lastIndexOf(96));</script></body> </html>

運行結果如下：

六、數組的截取和合并

（一）數組的合并通過slice()方法實現，slice()方法在無參時只是復制當前數組并返回，若傳遞的是元素，則元素會被添加到數組的末尾，而若傳遞的是數組時，則該方法會將該數組中的元素添加到結果數組中。
例如下列html代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a = [0, 96, 1, 2];var b = a.concat();console.log(b);var c = a.concat(2, 3, 4);console.log(a);console.log(c);var d = a.concat([1, 2, 3], [4, 5, 6]);console.log(d);</script></body> </html>

運行結果如下：

（二）通過concat()方法實現截取數組，要注意它不會影響原數組的值，它可以接收一個或多個參數，當為一個參數時，該方法截取返回從該參數開始到數組末尾的所有項；當為兩個參數時，截取索引位置開始和結束之間的所有元素。
例如下列html代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a = [0, 96, 1, 2];var b = a.slice(2);console.log(b);var c = a.slice(0, 2);console.log(c);</script></body> </html>

運行結果如下：

例題

例1、通過HTML語言和JavaScript程序編寫一個一維數組長度為8，通過輸入框輸入文本或數字，實現整個數組的倒轉和文本排序及數值排序。
代碼如下：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="txtNumbers" value="" /><input type="button" value="數組倒轉" onclick="operateArray(1);" /><input type="button" value="數組排序(文本)" onclick="operateArray(2);" /><input type="button" value="數組排序(數值)" onclick="operateArray(3);" /><script>function operateArray(t) {var array = new Array(8);var array = document.getElementById("txtNumbers").value.split(",");switch (t) {case 1:array.reverse();break;case 2:array.sort();break;case 3:array.sort(sortFunc);break;}alert(array.toString());}function sortFunc(a, b) {return a - b;}</script></body> </html>

運行結果如下：

實現數組長度為8的數組內的文本倒轉和排序：


實現數組長度為8的數組內的數字倒轉和排序：


例2、用HTML語言和JavaScript程序編寫一個一維數字數組，數組長度為7，通過輸入框輸入數組內的元素從而實現數組中所有數字的和與平均數。
代碼如下：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="Numbers" value="" /><input type="button" value="數組所有數字的和" onclick="operateArray(1);" /><input type="button" value="數組的平均數" onclick="operateArray(2);" /><script>function operateArray(t) {var sum = 0;var array = new Array(7);var array = document.getElementById("Numbers").value.split(",");switch (t) {case 1:for (var i = 0; i < 8; i++) {sum = sum + i;}alert(sum);break;case 2:for (var i = 0; i < 8; i++) {sum = sum + i;}alert(sum / 7);break;}}</script></body> </html>

運行結果如下：

總結

以上是生活随笔為你收集整理的Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。