一、 數(shù)組的概念

1.1 什么是數(shù)組

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

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

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

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

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

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

數(shù)組長(zhǎng)度可以動(dòng)態(tài)改變。

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

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

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

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

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

2.1 字面量的方式

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

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

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

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

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

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

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

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

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

注意：

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

使用構(gòu)造函數(shù)如果只傳入了一個(gè)Number值，則這個(gè)值必須 >= 0, 否則會(huì)報(bào)錯(cuò)。

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

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

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

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

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

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

四、數(shù)組的長(zhǎng)度

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

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

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

• 1
• 2

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

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

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

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

通過(guò)設(shè)置length的值直接修改數(shù)組的長(zhǎng)度到指定的數(shù)值。

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

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

通過(guò)給最后一個(gè)元素賦值來(lái)動(dòng)態(tài)修改元素的長(zhǎng)度。

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

• 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ù)組長(zhǎng)度多長(zhǎng)，就遍歷多少次。 循環(huán)變量作為數(shù)組的下標(biāo)console.log(arr[i]); }

• 1
• 2
• 3
• 4

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

for-in 語(yǔ)句是一種精準(zhǔn)的迭代語(yǔ)句，可以用來(lái)枚舉對(duì)象的屬性和數(shù)組的元素。

示例：

var arr = [50, 20, 10, 5, 15, 6]; // 每循環(huán)一輪，都會(huì)把數(shù)組的下標(biāo)賦值給變量index，然后num就拿到了每個(gè)元素的下標(biāo)。 //注意:這里index是元素的下標(biāo),不是與元素 //對(duì)數(shù)組來(lái)說(shuō)，index從從0開(kāi)始順序獲取下標(biāo) for (var index in arr) {console.log(num); //循環(huán)輸出： 0 1 2 3 4 5 } //這里var 關(guān)鍵字也是可以省略的，但是不建議省略。 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為每個(gè)數(shù)組新增了一個(gè)方法 array.forEach(function) ,使用這個(gè)方法，可以自動(dòng)幫我們遍歷數(shù)組中的所有元素

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

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

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

6.1 轉(zhuǎn)換方法

toString()轉(zhuǎn)換方法:

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

<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 當(dāng)把一個(gè)對(duì)象直接給alert，則會(huì)調(diào)用這個(gè)對(duì)象的toString方法，然后再輸出。 </script>

• 1
• 2
• 3
• 4
• 5

join() 方法：

• toString() 方法只能使用逗號(hào)連接，而 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ù)結(jié)構(gòu)。特點(diǎn)：FILO (先進(jìn)后出)

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

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

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

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

說(shuō)明：

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

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

  6.2隊(duì)列方法

隊(duì)列也是一種數(shù)據(jù)結(jié)構(gòu)。 特點(diǎn)：FIFO(先進(jìn)先出)

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

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

向隊(duì)列尾部添加元素、從隊(duì)列尾部移除元素

注意：對(duì)隊(duì)列尾部的操作沒(méi)有提供新的方法，使用push和pop可以完成相應(yīng)的操作。

<script type="text/javascript">//把a(bǔ)rr當(dāng)做隊(duì)列對(duì)待，那么 隊(duì)列頭部元素就是 "張三", 隊(duì)尾元素就是 "王五"var arr = ["張三", "李四", "王五"];var firstItem = arr.shift(); //把隊(duì)首元素從隊(duì)列中移除，并返回移除的這個(gè)元素alert(firstItem); //張三alert(arr); // 李四, 王五var len = arr.unshift("志玲"); //向隊(duì)列頭部添加元素，并返回添加成功后隊(duì)列(數(shù)組)的長(zhǎng)度alert("數(shù)組長(zhǎng)度：" + len); // 數(shù)組長(zhǎng)度：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); //對(duì)數(shù)組元素進(jìn)行倒置。arr.reverse(); alert("數(shù)組倒置后：" + arr); </script>

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

注意：

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

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

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

lastIndexOf(item): 從尾部開(kāi)始向前查找 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): 從第二個(gè)參數(shù)的位置開(kāi)向后始查找 item 第一次出現(xiàn)的位置

lastIndexOf(item, fromForward): 從第二個(gè)參數(shù)的位置開(kāi)始向前查找 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)

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

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

<script type="text/javascript"> var arr1 = ["a", "b", "c"];//把參數(shù)數(shù)組與arr1連接起來(lái)，并返回連接后的新數(shù)組var newArr = arr1.concat(["c", "d"]);//新數(shù)組的長(zhǎng)度是 5alert(newArr.length);//原數(shù)組的長(zhǎng)度還是 3 。原數(shù)組中的元素沒(méi)有做任何變化alert(arr1.length);//把兩個(gè)元素和一個(gè)數(shù)組與原數(shù)組arr1連接起來(lái)，并返回新的數(shù)組var newArr2 = arr1.concat("e", "f", ["g", "h"]);//新數(shù)組長(zhǎng)度為：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位置開(kāi)始截取==(包括下標(biāo)為start的元素)==。 如果是負(fù)數(shù)表示從尾部開(kāi)始截取： -1表示最后一個(gè)元素
• end: 可選。截取到指定位置==(不包括下標(biāo)為end的元素)==。如果沒(méi)指定，則指的是截取到最后一個(gè)元素
• end要大于start，否則截取不到元素

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

<script type="text/javascript"> var arr1 = ["a", "b", "c", "d", "e", "f"];// 從下標(biāo)為0的位置開(kāi)始截取，截取到下標(biāo)2，但是不包括下標(biāo)為2的元素. 原數(shù)組沒(méi)有任何的變化var newArr = arr1.slice(0, 2);alert(newArr);// a, balert(arr1.slice(1, 4)); // b,c,d//從下標(biāo)為2的元素開(kāi)始截取，一直到最后一個(gè)元素alert(arr1.slice(2)); //c,d,e,f//從倒數(shù)第5個(gè)元素，截取到倒數(shù)第2個(gè)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ī)定添加/刪除元素的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
• 必需。要?jiǎng)h除的元素?cái)?shù)量。如果設(shè)置為 0，則不會(huì)刪除元素。 如果添加元素這里應(yīng)該是0
• 可選。向數(shù)組添加的新項(xiàng)目。

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

• 刪除元素

<script type="text/javascript"> var arr1 = ["a", "b", "c", "d", "e", "f"];//因?yàn)榈?個(gè)參數(shù)不為0，所以表示刪除元素：從小標(biāo)為1的位置開(kāi)始刪除，共刪除2個(gè)元素。(2個(gè)中包括下標(biāo)為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"];//因?yàn)榈?參數(shù)為0，所以表示添加元素：從下標(biāo)為1的位置插入元素。其余的元素會(huì)自動(dòng)向后移動(dòng)var v = arr1.splice(1, 0, "m", "n"); // 因?yàn)槭翘砑釉?#xff0c;所以返回的數(shù)組長(zhǎng)度為 0alert(v.length); // 0alert(arr1); // a,m,n,b,c,d,e,f </script>

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

七、 數(shù)組排序

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

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

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

不傳入?yún)?shù)的時(shí)候，是默認(rèn)的升序排列。但是做升序排列的時(shí)候，是把每個(gè)元素轉(zhuǎn)換成string之后，按照編碼表中的順序排序的。

<script type="text/javascript"> var arr1 = ["a", "ab", "fca", "cd", "eb", "f"];arr1.sort(); //默認(rèn)情況按照編碼表中的順序排列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

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

<script type="text/javascript">/*sort方法進(jìn)行排序的時(shí)候，會(huì)調(diào)用這個(gè)函數(shù)，來(lái)確定誰(shuí)大誰(shuí)小，從而來(lái)確定他們的位置。排序函數(shù)的規(guī)則：1、比較函數(shù)必須具有兩個(gè)參數(shù) num1, num22、若返回值 > 0, 則認(rèn)為num1 > num2, 排序的時(shí)候num1在num2之后3、若返回值 == 0,則認(rèn)為num1== num2，排序的時(shí)候兩個(gè)數(shù)的順序就保持不變4、若返回值 < 0, 則認(rèn)為num < num2, 排序的時(shí)候num1在num2之前。總結(jié)：1、若num1 > num2 返回 正數(shù)， num1 < num2 返回 負(fù)數(shù)，則是升序2、若num1 > num2 返回 負(fù)數(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ù)組，還有一種更簡(jiǎn)潔的排序函數(shù)。

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

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

八、 數(shù)組檢測(cè)

如何檢測(cè)一個(gè)對(duì)象是不是一個(gè)Array。

使用instanceof運(yùn)算符。

使用Array.isArray(arr) 方法。

8.1 instanceof運(yùn)算符

JavaScript中instanceof運(yùn)算符會(huì)返回一個(gè) Boolean 值，指出對(duì)象是否是特定構(gòu)造函數(shù)的一個(gè)實(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ù)組中的元素存儲(chǔ)的是數(shù)組，則就構(gòu)成了二維數(shù)組。

//數(shù)組中的每個(gè)元素都是數(shù)組，則就是一個(gè)二維數(shù)組 var towDimArr = [[4, 5], [7, 8],[50, 9, 10],[5]]; alert(towDimArr.length); //數(shù)組的長(zhǎng)度為 4//使用嵌套循環(huán)來(lái)遍歷二維數(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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。