Array數(shù)組類型詳解

在ECMAScript中除了object類型之外，Array數(shù)組用的是最常用的類型。ECMAScript數(shù)組可以在每一項(xiàng)存儲(chǔ)任何類型的值，無(wú)需指定數(shù)組的長(zhǎng)度，還可以隨著數(shù)據(jù)的增長(zhǎng)來(lái)增加數(shù)組長(zhǎng)度，這些是和其他語(yǔ)言的數(shù)組不同的。

1.數(shù)組的創(chuàng)建方法

數(shù)組字面量方式

var arr = [1,2,3,4,5];// 簡(jiǎn)單直接用中括號(hào)包裹構(gòu)建數(shù)組

數(shù)組構(gòu)造函數(shù)

var arr = new Array(1,2,3,4,5);// 通過(guò)內(nèi)置Array對(duì)象構(gòu)建數(shù)組

2.檢測(cè)數(shù)組

instanceof操作符，在全局環(huán)境下可以檢測(cè)對(duì)象是否為數(shù)組，但是如果頁(yè)面上存在多個(gè)框架時(shí)就會(huì)存在兩種以上的全局環(huán)境，這時(shí)候這種方法就有些問(wèn)題。console.log(arr instanceof Array); // true

Array.isArray()方法就解決了上面的問(wèn)題，可以快速的檢測(cè)對(duì)象是否為數(shù)組。console.log(Array.isArray(arr)); // true

3.轉(zhuǎn)換方法

使用toString()方法可以使數(shù)組返回字符串。

var arr = [1,2,3,4];console.log(arr.toString()); // 1,2,3,4

toLocaleString()方法也可以實(shí)現(xiàn)

var arr = [1,2,3,4];console.log(arr.toLocaleString()); // 1,2,3,4

4.棧方法

ECMAScript為數(shù)組提供了一種類似于其他語(yǔ)言數(shù)組的方法（棧方法），棧是一種數(shù)據(jù)結(jié)構(gòu)，主要講究先進(jìn)后出；

push()方法向數(shù)組末尾添加元素(可以添加多項(xiàng)) pop()方法向末尾刪除最后一項(xiàng)(一次只能刪除一項(xiàng))

var arr = [1,2,3,4]; arr.push(5,6,7); // 向末尾添加5,6,7 console.log(arr); //輸出[1,2,3,4,5,6,7] arr.pop(); // 刪除最后一項(xiàng) console.log(arr); //輸出[1,2,3,4,5,6]

5.隊(duì)列方法

隊(duì)列方法講究先進(jìn)先出，在列表的末尾添加項(xiàng)，開(kāi)頭刪除項(xiàng)。

push()方法上面講到了末尾添加一項(xiàng)或多項(xiàng) shift()方法開(kāi)頭刪除

var arr = [1,2,3,4]; arr.push(5,6,7); // 向末尾添加5,6,7 console.log(arr); //輸出[1,2,3,4,5,6,7] arr.shift(); // 刪除第一項(xiàng) console.log(arr); //輸出[2,3,4,5,6,7] pop()方法刪除末尾最后一項(xiàng) unshift()方法向開(kāi)頭添加一項(xiàng)或多項(xiàng)元素

var arr = [1,2,3,4];arr.unshift(5,6,7); // 向開(kāi)頭添加5,6,7console.log(arr); //輸出[1,2,3,4,5,6,7]arr.pop(); // 刪除最后一項(xiàng)console.log(arr); //輸出[5,6,7,1,2,3]

6.重排序方法

reverse()反轉(zhuǎn)數(shù)組改變順序

var arr = [1,2,3,4,5];arr.reverse();console.log(arr); //輸出[5,4,3,2,1]

sort()方法比較的是字符串，一個(gè)一個(gè)的字符串進(jìn)行比較，數(shù)值小的在前面，

var arr = [1,6,13,40,15];arr.sort();console.log(arr); //輸出[1, 13, 15, 40, 6]

7.操作方法

concat()方法基于當(dāng)前數(shù)組創(chuàng)建一個(gè)副本，向后面添加新的對(duì)象，然后返回新的數(shù)組concat()方法不會(huì)影響原數(shù)組。

var arr = [1,6,13,40,15]; var arr2 = arr.concat(2,2,2); console.log(arr); //輸出[1, 6, 13, 40, 15] console.log(arr2); //輸出[1, 6, 13, 40, 15,2,2,2]

slice()方法可以接受一個(gè)或者兩個(gè)參數(shù)，第一個(gè)參數(shù)表示起始位置，第二個(gè)表示結(jié)束位置，slice()方法返回起始位置到結(jié)束位置的數(shù)組slice()方法不會(huì)影響原數(shù)組。

var arr = [1,6,13,40,15]; var arr2 = arr.slice(2); var arr3 = arr.slice(1,3); console.log(arr); //輸出[1,6,13,40,15] console.log(arr2); //輸出[13, 40, 15] console.log(arr3); //輸出[6, 13]

splice()方法，這個(gè)方法在我認(rèn)為算是數(shù)組里面最強(qiáng)大的方法啦！他可以傳入三個(gè)參數(shù)，第一個(gè)參數(shù)起始位置，第二個(gè)參數(shù)要?jiǎng)h除的項(xiàng)，第三個(gè)參數(shù)添加或者替換的對(duì)象。可以利用splice()方法對(duì)數(shù)組進(jìn)行刪除、添加、替換等操作splice()方法會(huì)影響原數(shù)組。

var arr = [1,2,3,4,5];// 刪除操作var arr2 = arr.splice(1,3); // 從下標(biāo)為1開(kāi)始刪除3項(xiàng)console.log(arr); //輸出[1,5] 原數(shù)組只剩下第一位和最后一位console.log(arr2); //輸出[2,3,4] 被刪除的對(duì)象生成數(shù)組

var arr = [1,2,3,4,5]; // 插入var arr2 = arr.splice(1,0,2,2);// 從下標(biāo)1開(kāi)始插入2,2兩個(gè)對(duì)象console.log(arr); //輸出[1,2,2,2,3,4,5]console.log(arr2); //輸出[] 因?yàn)闆](méi)有刪除對(duì)象所以返回空數(shù)組

var arr = [1,2,3,4,5]; // 替換var arr2 = arr.splice(1,2,2,2); // 從下標(biāo)1開(kāi)始先刪除兩項(xiàng)然后替換為2,2console.log(arr); //輸出[1,2,2,4,5]console.log(arr2); //輸出[2,3] 被刪除的元素

8.位置方法

查找數(shù)組位置方法有兩種，indexOf()和lastIndexOf()方法都可以接收兩個(gè)參數(shù)，要查找的項(xiàng)和（可選）查找起始項(xiàng)位置的索引。indexOf()是從前往后找，lastIndexOf()是從后往前找。

var arr = [1,2,3,4,5]; console.log(arr.indexOf(2)); //1 返回下標(biāo)的位置 console.log(arr.indexOf(2,3)); //-1 從下標(biāo)3位置開(kāi)始往后找，沒(méi)有找到2返回-1 console.log(arr.lastIndexOf(2,3)); //1 從下標(biāo)3位置開(kāi)始往前找

9.迭代方法

ECMAScript5為數(shù)組提供了五種迭代方法，每種方法都有兩個(gè)參數(shù)，要在每一項(xiàng)上運(yùn)行的函數(shù)和（可選）運(yùn)行該函數(shù)的作用域?qū)ο蟆绊憈his的值。傳入這些方法的函數(shù)會(huì)接受三個(gè)形參（item,index,array）：數(shù)組項(xiàng)的值、數(shù)組對(duì)象在數(shù)組中的位置、數(shù)組對(duì)象本身。

every()給定函數(shù)后，如果該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true。

var arr = [1,2,3,4,5];var arr2 = arr.every(function(item,index,array){ return item > 3;});console.log(arr2); // false 必需每項(xiàng)都滿足條件才可以

filter()給定函數(shù)后，返回true的項(xiàng)組成的數(shù)組。

var arr = [1,2,3,4,5]; var arr2 = arr.filter(function(item,index,array){ return item > 3; }); console.log(arr2); // 4,5 只有4,5滿足條件

forEach() 給定函數(shù)后，這個(gè)方法沒(méi)有返回值。本質(zhì)上和for循環(huán)一樣

var arr = [1,2,3,4,5];arr.forEach(function(item,index,array){ console.log(item); // 1,2,3,4,5});console.log(arr); // [1,2,3,4,5] 不會(huì)改變?cè)瓟?shù)組也沒(méi)有返回值

map()給定函數(shù)后，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。

var arr = [1,2,3,4,5];var arr2 = arr.map(function(item,index,array){ return item * 2;});console.log(arr2); // [2,4,6,8,10]

some()給定函數(shù)后，如果該函數(shù)任一項(xiàng)返回true，則返回true。

var arr = [1,2,3,4,5]; var arr2 = arr.some(function(item,index,array){ return item > 4; }); console.log(arr2); // true 5>4返回true

10.縮小方法

ECMAScript5新增了2兩個(gè)縮小數(shù)組的方法，reduce()和reduceRight()。這兩個(gè)方法都會(huì)迭代數(shù)組所有的項(xiàng)，reduce()是從第一項(xiàng)到最后一項(xiàng)迭代，reduceRight()則是相反的。這兩個(gè)方法可以接收兩個(gè)參數(shù)，要執(zhí)行的函數(shù)和（可選）做為縮小基礎(chǔ)的初始值。執(zhí)行函數(shù)可以傳入四個(gè)參數(shù)（prev,cur,index,array）：前一個(gè)值、當(dāng)前值、數(shù)組對(duì)象索引、數(shù)組對(duì)象本身。

var arr = [1,2,3,4,5];var arr2 = arr.reduce(function(prev,cur,index,array){ return prev * cur;});console.log(arr2); // 120 前一項(xiàng)乘后一項(xiàng)

總結(jié)

到此這篇關(guān)于JavaScript數(shù)組類型Array相關(guān)的屬性與方法的文章就介紹到這了,更多相關(guān)js數(shù)組Array的屬性與方法內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！