一、 數(shù)組的概念

1.1 什么是數(shù)組

數(shù)組是指的數(shù)據(jù)的有序列表。

數(shù)組中每個值稱之為數(shù)組的一個元素。

數(shù)組中的每個元素都有一個位置，這個位置稱之為索引(下標、index)。數(shù)組的索引是從 0 開始的

同一個數(shù)組中，元素的類型不做任何限制。也就是說，同一個數(shù)組中可以方法Number、String、Boolean、Object對象等等。可以同時放入任何的類型。甚至數(shù)組中的元素可以是另外一個數(shù)組(構成多維數(shù)組)。

1.2 JavaScript中數(shù)組的特點

雖然每種語言都有數(shù)組這種數(shù)據(jù)結構，但是JavaScript的數(shù)組相比他們有很大不同。

數(shù)組長度可以動態(tài)改變。

同一個數(shù)組中可以存儲不同的數(shù)據(jù)類型。

數(shù)據(jù)的有序集合

每個數(shù)組都有一個length屬性，表示的是數(shù)組中元素的個數(shù)

二、數(shù)組的創(chuàng)建

數(shù)組有兩種基本創(chuàng)建方式：字面量方式和構造函數(shù)

2.1 字面量的方式

數(shù)組字面量： 所有的元素用方括號括起來，不同的元素之間用逗號分隔。

例如：[“a”, 5, “b”]

//創(chuàng)建一個長度為 3 的數(shù)組，并初始化了3 個元素："abc" "b" "d" var colors = ["abc", "b", "d"]; //創(chuàng)建一個長度為 0 的空數(shù)組數(shù)組。里面一個值都沒有 var colors = []; //不要在最后一個元素的后面添加逗號，添加逗號雖然語法沒有問題，但是在不同的瀏覽器可能得到不同的結果 var colors = [5, 6, 7,]; //這樣數(shù)組的長度可能為 3 也可能為 4。在不同瀏覽器會得到不同的結果應避免這種創(chuàng)建方式。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

2.2 構造函數(shù)的方式

構造函數(shù)在創(chuàng)建對象的時候使用。數(shù)組的構造函數(shù)式 Array()

例如： new Array(數(shù)組長度);

//創(chuàng)建一個長度為 0 的空數(shù)組 var colors = new Array(); //創(chuàng)建一個長度為 5 的數(shù)組。每個數(shù)組的元素的默認值是 undefined。 var colors = new Array(5); //創(chuàng)建一個長度為 3 的數(shù)組，并且3個元素分別是 "blue" "red" "green" var colors = new Array("blue", "red", "green");

• 1
• 2
• 3
• 4
• 5
• 6

注意：

使用構造函數(shù)創(chuàng)建數(shù)組對象的時候，最后一個元素后面不要添加括號，否則報錯。 這樣是錯誤的：new Array("a", )

使用構造函數(shù)如果只傳入了一個Number值，則這個值必須 >= 0, 否則會報錯。

使用構造函數(shù)創(chuàng)建數(shù)組對象的時候，new 關鍵字是可以省略的。 例如：Array(5) 這樣是可以的。

三、訪問和修改數(shù)組中的元素

利用索引訪問數(shù)組中的元素。

如果數(shù)組的長度為 5，那么數(shù)組的索引為 0,1,2,3,4

//創(chuàng)建一個長度為 5 的數(shù)據(jù) var arr = [10, 20, 60, 5, 7]; alert(arr[0]); //獲取下標為 0 的元素， 即：10 alert(arr[2]); //獲取下標為 2 的元素， 即：60// arr[1] = 100; //把下標為 1 的元素賦值為100。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

四、數(shù)組的長度

4.1 獲取數(shù)組的長度

每個數(shù)組都有一個叫 length的屬性，表示數(shù)組的長度(即：元素的個數(shù))。

var arr = [10, 20, 60, 5, 7]; alert(arr.length); //彈出：5

• 1
• 2

4.2 修改數(shù)組的長度

在一般的強類型語言中，數(shù)組的長度是固定的，即：數(shù)組一旦創(chuàng)建成功，則不能改變數(shù)組的長度。

但是，JavaScript是一種弱類型的動態(tài)語言，數(shù)組的長度可以在程序運行期間根據(jù)需要進行動態(tài)的更改

==數(shù)組length屬性不是只讀，而是可以修改的。==

通過設置length的值直接修改數(shù)組的長度到指定的數(shù)值。

var arr = ["a", 8, "bc"]; //數(shù)組的長度為 3 arr.length = 6; // 修改數(shù)組的長度為 6 alert(arr.length); //數(shù)組的長度已經被修改為了 6 ，所以此處輸出6. // 下標為 3， 4， 5 的元素的值為undefined的。 alert(arr[3]); //彈出：undefined的。arr.length = 2; // 修改數(shù)組的長度為 2 ，則下標為 >= 的元素被自動從數(shù)組移除。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

通過給最后一個元素賦值來動態(tài)修改元素的長度。

var arr = [4, 6, 8]; // 給下標為 10 的元素賦值為 100. 由于最初長度為 3 ，這個賦值操作完成后，數(shù)組的長度會自動增長為11 arr[10] = 100; alert(arr.length); // 彈出：11 // 沒有賦值的元素默認都為 undefined alert(arr[5]); //彈出：undefinedalert(arr[20]); //彈出： undefined alert(arr.length); // 長度仍然為11. 上一行代碼僅僅去訪問元素，而沒有賦值操作，則不會引起數(shù)組長度的變化

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

五、數(shù)組的遍歷

一般有3種方法遍歷數(shù)組:

for循環(huán)

for… in

for each ( ES5 新增)

5.1 使用普通for循環(huán)遍歷數(shù)組

var arr = [50, 20, 10, 5, 15, 6]; for(var i = 0; i < arr.length; i++){ //數(shù)組長度多長，就遍歷多少次。 循環(huán)變量作為數(shù)組的下標console.log(arr[i]); }

• 1
• 2
• 3
• 4

5.2 使用 for…in 循環(huán)遍歷數(shù)組

for-in 語句是一種精準的迭代語句，可以用來枚舉對象的屬性和數(shù)組的元素。

示例：

var arr = [50, 20, 10, 5, 15, 6]; // 每循環(huán)一輪，都會把數(shù)組的下標賦值給變量index，然后num就拿到了每個元素的下標。 //注意:這里index是元素的下標,不是與元素 //對數(shù)組來說，index從從0開始順序獲取下標 for (var index in arr) {console.log(num); //循環(huán)輸出： 0 1 2 3 4 5 } //這里var 關鍵字也是可以省略的，但是不建議省略。 for(i in arr){console.log(arr[i]); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

5.3 使用for …each遍歷數(shù)組

ES5為每個數(shù)組新增了一個方法 array.forEach(function) ,使用這個方法，可以自動幫我們遍歷數(shù)組中的所有元素

var arr = [50, 20, 10, 5, 15, 6]; //調用數(shù)組的forEach方法，傳入一個匿名函數(shù) //匿名函數(shù)接受兩個參數(shù)： 參數(shù)1--迭代遍歷的那個元素 參數(shù)2：迭代遍歷的那個元素的下標 //可以在匿名函數(shù)內部書需要的代碼 arr.forEach( function(element, index) {alert(element); });

• 1
• 2
• 3
• 4
• 5
• 6
• 7

六、 數(shù)組常用方法

6.1 轉換方法

toString()轉換方法:

• 返回由數(shù)組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串

<script type="text/javascript">var arr = [50, 20, 10, 5, 15, 6];alert(arr.toString()); // 50,20,10,5,15,6alert(arr); // 50,20,10,5,15,6 當把一個對象直接給alert，則會調用這個對象的toString方法，然后再輸出。 </script>

• 1
• 2
• 3
• 4
• 5

join() 方法：

• toString() 方法只能使用逗號連接，而 join() 方法可以使用指定的連接符連接

<script type="text/javascript">var arr = [50, 20, 10, 5, 15, 6];alert(arr.join("=")); // 50=20=10=5=15=6 </script>

• 1
• 2
• 3
• 4

6.2 棧方法

棧：一種數(shù)據(jù)結構。特點：FILO (先進后出)

向棧中存入元素 稱之為 入棧(push)、從棧中移除元素稱之為出棧(pop)。先入棧的元素在棧地下，后入棧的元素在棧頂。這兩個動作都是對棧頂?shù)脑剡M行操作。一般棧提供這兩個操作足矣。

JavaScript中，支持像操作棧一樣去操作數(shù)組。

<script type="text/javascript">var arr = ["張三", "李四", "王五"];//向棧中添加元素(最后添加的元素肯定在棧頂) 數(shù)組中的元素："張三", "李四", "王五", "志玲" var len = arr.push("志玲"); //push方法返回添加成功后的數(shù)組的長度alert(len); // 彈出：4arr.push("a", "b"); //也可以向在push方法中傳入多個參數(shù)，這樣每個參數(shù)都會添加到數(shù)組中。 棧頂元素是 "b"//pop出棧，一次只能出棧一個元素var item = arr.pop(); //把棧頂?shù)脑貜臈?數(shù)組)中移除。并返回移除的這個元素alert(item); // 彈出：b </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

說明：

• 入棧其實就是把新的元素添加到數(shù)組的后面

• 出棧其實就是把數(shù)組中的最后一個元素從數(shù)組中移除

  6.2隊列方法

隊列也是一種數(shù)據(jù)結構。 特點：FIFO(先進先出)

JavaScript中，對數(shù)組的操作也提供了模擬隊列的方法。

向隊列頭部添加元素(unshift)、從隊列頭部移除元素(shift)

向隊列尾部添加元素、從隊列尾部移除元素

注意：對隊列尾部的操作沒有提供新的方法，使用push和pop可以完成相應的操作。

<script type="text/javascript">//把arr當做隊列對待，那么 隊列頭部元素就是 "張三", 隊尾元素就是 "王五"var arr = ["張三", "李四", "王五"];var firstItem = arr.shift(); //把隊首元素從隊列中移除，并返回移除的這個元素alert(firstItem); //張三alert(arr); // 李四, 王五var len = arr.unshift("志玲"); //向隊列頭部添加元素，并返回添加成功后隊列(數(shù)組)的長度alert("數(shù)組長度：" + len); // 數(shù)組長度：3alert(arr); // 志玲, 李四, 王五arr.unshift("a", "b");alert(arr); // a, b, 志玲, 李四, 王五 </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

6.3 數(shù)組中元素的倒置

<script type="text/javascript"> var arr = ["張三", "李四", "王五"];alert("數(shù)組倒置前：" + arr); //對數(shù)組元素進行倒置。arr.reverse(); alert("數(shù)組倒置后：" + arr); </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

注意：

• ==倒置操作是對原數(shù)組本身做了操作，返回的也是原數(shù)組對象，并不是一個新創(chuàng)建的數(shù)組。==

6.4 查找指定元素在數(shù)組中的索引

indexOf(item): 從前面開始向后查找 item 第一次出現(xiàn)的位置

lastIndexOf(item): 從尾部開始向前查找 item 第一次出現(xiàn)的位置

• 如果找不到元素，則返回 -1

<script type="text/javascript"> var arr = ["張三", "張三", "李四", "王五", "張三", "李四", "王五"];alert(arr.indexOf("張三")); // 0alert(arr.lastIndexOf("張三")); // 4 </script>

• 1
• 2
• 3
• 4
• 5

indexOf(item, fromBack): 從第二個參數(shù)的位置開向后始查找 item 第一次出現(xiàn)的位置

lastIndexOf(item, fromForward): 從第二個參數(shù)的位置開始向前查找 item 第一次出現(xiàn)的位置

<script type="text/javascript"> var arr = ["張三", "張三", "李四", "王五", "張三", "李四", "王五"];alert(arr.indexOf("張三", 2)); // 4alert(arr.lastIndexOf("張三", 3)); // 1 </script>

• 1
• 2
• 3
• 4
• 5

6.4 獲取新的數(shù)組

arr.contact(arrayX,arrayX,……,arrayX)

該方法用于連接兩個或多個數(shù)組。至少傳入一個參數(shù)，參數(shù)可以是數(shù)組也可以是元素。

==注意：該方法是返回的一個新的數(shù)組，原數(shù)組沒有做任何改變==

<script type="text/javascript"> var arr1 = ["a", "b", "c"];//把參數(shù)數(shù)組與arr1連接起來，并返回連接后的新數(shù)組var newArr = arr1.concat(["c", "d"]);//新數(shù)組的長度是 5alert(newArr.length);//原數(shù)組的長度還是 3 。原數(shù)組中的元素沒有做任何變化alert(arr1.length);//把兩個元素和一個數(shù)組與原數(shù)組arr1連接起來，并返回新的數(shù)組var newArr2 = arr1.concat("e", "f", ["g", "h"]);//新數(shù)組長度為：7alert(newArr2.length); </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

arr.slice(start,end) : 截取數(shù)組，并返回截取到的新數(shù)組

• start:必須。從原數(shù)組中的start位置開始截取==(包括下標為start的元素)==。 如果是負數(shù)表示從尾部開始截取： -1表示最后一個元素
• end: 可選。截取到指定位置==(不包括下標為end的元素)==。如果沒指定，則指的是截取到最后一個元素
• end要大于start，否則截取不到元素

==注意：該方法是返回的一個新的數(shù)組，原數(shù)組沒有做任何改變==

<script type="text/javascript"> var arr1 = ["a", "b", "c", "d", "e", "f"];// 從下標為0的位置開始截取，截取到下標2，但是不包括下標為2的元素. 原數(shù)組沒有任何的變化var newArr = arr1.slice(0, 2);alert(newArr);// a, balert(arr1.slice(1, 4)); // b,c,d//從下標為2的元素開始截取，一直到最后一個元素alert(arr1.slice(2)); //c,d,e,f//從倒數(shù)第5個元素，截取到倒數(shù)第2個alert(arr1.slice(-5, -2)); // b c d </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

arr.splice(index,howmany,item1,…..,itemX) 方法向/從數(shù)組中添加/刪除元素，然后==返回被刪除的元素組成的數(shù)組。==

• 必需。整數(shù)，規(guī)定添加/刪除元素的位置，使用負數(shù)可從數(shù)組結尾處規(guī)定位置。
• 必需。要刪除的元素數(shù)量。如果設置為 0，則不會刪除元素。 如果添加元素這里應該是0
• 可選。向數(shù)組添加的新項目。

==注意：這個方法會對原數(shù)組做出修改。==

• 刪除元素

<script type="text/javascript"> var arr1 = ["a", "b", "c", "d", "e", "f"];//因為第2個參數(shù)不為0，所以表示刪除元素：從小標為1的位置開始刪除，共刪除2個元素。(2個中包括下標為1的元素)var deleted = arr1.splice(1, 2); //返回值為刪除的元素組成的數(shù)組//原數(shù)組alert(arr1); // a,d,e,falert(deleted); // b,c </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 添加元素

<script type="text/javascript"> var arr1 = ["a", "b", "c", "d", "e", "f"];//因為第2參數(shù)為0，所以表示添加元素：從下標為1的位置插入元素。其余的元素會自動向后移動var v = arr1.splice(1, 0, "m", "n"); // 因為是添加元素，所以返回的數(shù)組長度為 0alert(v.length); // 0alert(arr1); // a,m,n,b,c,d,e,f </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

七、 數(shù)組排序

JavaScript中，所有的數(shù)組對象都提供了一個排序函數(shù)。

arr.sort(sortby) 方法用于對數(shù)組的元素進行排序。

• sortby?可選。規(guī)定排序順序。必須是函數(shù)。

不傳入參數(shù)的時候，是默認的升序排列。但是做升序排列的時候，是把每個元素轉換成string之后，按照編碼表中的順序排序的。

<script type="text/javascript"> var arr1 = ["a", "ab", "fca", "cd", "eb", "f"];arr1.sort(); //默認情況按照編碼表中的順序排列alert(arr1); // a, ab, cd, eb, f, fcavar arr2 = [10, 8, 6, 20, 30, 15];arr2.sort();console.alert(arr2); // 10,15,20,30,6,8 </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

從上面可以看出來，當數(shù)組中的元素是Number的時候，按照編碼表排序并不太符合我們的預期，我們更想按照數(shù)字的大小排序。這時，我們可以傳遞一個 “比較函數(shù)”。

<script type="text/javascript">/*sort方法進行排序的時候，會調用這個函數(shù)，來確定誰大誰小，從而來確定他們的位置。排序函數(shù)的規(guī)則：1、比較函數(shù)必須具有兩個參數(shù) num1, num22、若返回值 > 0, 則認為num1 > num2, 排序的時候num1在num2之后3、若返回值 == 0,則認為num1== num2，排序的時候兩個數(shù)的順序就保持不變4、若返回值 < 0, 則認為num < num2, 排序的時候num1在num2之前。總結：1、若num1 > num2 返回 正數(shù)， num1 < num2 返回 負數(shù)，則是升序2、若num1 > num2 返回 負數(shù)， num1 < num2 返回 正數(shù)，則是降序*/function sortNumber (num1, num2) {//升序if(num1 > num2){return 1;}else if(num1 == num2){return 0;}else {return -1;}}var arr2 = [10, 8, 6, 20, 30, 15];arr2.sort(sortNumber);console.log(arr2.toString()); </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

• 純數(shù)字的數(shù)組，還有一種更簡潔的排序函數(shù)。

//升序函數(shù) function sortAsc(num1, num2){return num1 - num2; //num1 > num2 就返回正數(shù) } // 降序函數(shù) function sortDesc(num1, num2){return num2 - num1; //num1 > num2 就返回負數(shù) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

八、 數(shù)組檢測

如何檢測一個對象是不是一個Array。

使用instanceof運算符。

使用Array.isArray(arr) 方法。

8.1 instanceof運算符

JavaScript中instanceof運算符會返回一個 Boolean 值，指出對象是否是特定構造函數(shù)的一個實例。

var arr = []; alert(arr instanceof Array); //true

• 1
• 2

8.2 Array.isArray(arr) 方法

Array.isArray(arr) , 如果arr是數(shù)組，則返回true，否則返回false

var arr = []; alert(Array.isArray(arr)); //true alert(Array.isArray("abc")); // false

• 1
• 2
• 3

九、 二維數(shù)組

如果數(shù)組中的元素存儲的是數(shù)組，則就構成了二維數(shù)組。

//數(shù)組中的每個元素都是數(shù)組，則就是一個二維數(shù)組 var towDimArr = [[4, 5], [7, 8],[50, 9, 10],[5]]; alert(towDimArr.length); //數(shù)組的長度為 4//使用嵌套循環(huán)來遍歷二維數(shù)組。 for (var i = 0; i < towDimArr.length; i++) {for (var j = 0; j < towDimArr[i].length; j++) {alert(towDimArr[i][j]);} } from: https://blog.csdn.net/u012468376/article/details/53147098

總結

以上是生活随笔為你收集整理的JavaScript中数组使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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