前言

　Array是Javascript構(gòu)成的一個(gè)重要的部分，它可以用來(lái)存儲(chǔ)字符串、對(duì)象、函數(shù)、Number，它是非常強(qiáng)大的。因此深入了解Array是前端必修的功課。周五啦，博主的心又開始澎湃了，明兒個(gè)周末有木有，又可以愉快的玩耍了。

創(chuàng)建數(shù)組

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

var arr = [1,2,3]; //字面量的形式創(chuàng)建數(shù)組 值與值之間用英文逗號(hào)隔開

var arr = [1,2,3]; //字面量的形式創(chuàng)建數(shù)組 值與值之間用英文逗號(hào)隔開 
var arr1 = new Array(1,2,3);//構(gòu)造函數(shù)創(chuàng)建數(shù)組 通過new操作符創(chuàng)建一個(gè)Array對(duì)象//另外 你也可以省略new操作符 盡管多數(shù)時(shí)候不建議這么做 var arr1 = Array(1,2,3);省略new操作符創(chuàng)建一個(gè)Array對(duì)象 這種語(yǔ)法與php就十分相似 只是它的鍵在javascript中是不可以指定的

　數(shù)組的索引：鍵值對(duì)

以字面量為例，每一個(gè)數(shù)組項(xiàng)都有一個(gè)對(duì)應(yīng)的鍵，也可以稱為【下標(biāo)】、【索引】 javascript里默認(rèn)的鍵從0開始累計(jì)依照數(shù)組項(xiàng)的位置確定它的鍵名，通過鍵名查詢數(shù)組項(xiàng)的值，一般的語(yǔ)法為array[i]：

var sarr = ["hello","java","script"];
//對(duì)應(yīng)的鍵名為 0 ，1 , 2 
console.log(sarr[0]); //hello 

將數(shù)組打印到Firefox控制臺(tái)中，在控制臺(tái)就可以很清晰的看到它們對(duì)應(yīng)的關(guān)系：

控制臺(tái)右側(cè)非常直觀列出了鍵與值的邏輯關(guān)系0對(duì)應(yīng)hello、1對(duì)應(yīng)java 、2對(duì)應(yīng)script，更通俗的講 javascript數(shù)組計(jì)數(shù)是從0開始的 【0-1-2】==【1-2-3】第一個(gè)是hello 第二個(gè)是java 第三個(gè)是script；

每一個(gè)數(shù)組都有一個(gè)長(zhǎng)度，沒有值為0，通過Array.length方法獲取，上圖的長(zhǎng)度為3，在控制臺(tái)右側(cè)也可以清晰的看到，另外介紹一個(gè)小技巧，F(xiàn)irefox控制臺(tái)console列出的屬性列表大部分是可以直接訪問的你可以通過【Array.length】號(hào)訪問 也可以通過鍵的形式訪問【Array['length']】;

數(shù)組的length屬性很有特點(diǎn)------它不是只讀的。所以，可以通過設(shè)置這個(gè)屬性，可以從數(shù)組的末尾移除項(xiàng)或者向數(shù)組中添加新項(xiàng)，栗子：

var colors = ['red','blue','green'];//創(chuàng)建一個(gè)包含3個(gè)字符串的數(shù)組
colors.length = 2;
alert(colors[2]);//undefined不存在

 上栗刪除了數(shù)組的最后一項(xiàng)‘green‘ 還可以添加：

var colors = ['red','blue','green'];//創(chuàng)建一個(gè)包含3個(gè)字符串的數(shù)組
colors[colors.length] = 'black'; //colors的初始length為3 這段代碼等價(jià)于 colors[3] = 'black'；
alert(colors[3]);//black 

小技巧1：

那么問題來(lái)了，小伙伴們有時(shí)候敲著敲著突然忘記了某個(gè)屬性名，怎么搞？

將它打印到Firefox控制臺(tái)啊 看看它的屬性 以location對(duì)象為例 console.log(location)：

console.log(location);

拿到了這個(gè)，我們想拿到某個(gè)值是不是容易很多了呢 比如，拿到當(dāng)前的url地址 【location.href】 拿到域名【location.hostname】等等，或者你要拿到window上的方法，此類同理，非常方便；

數(shù)組棧

　　什么是數(shù)組棧？意思就是數(shù)組可以表現(xiàn)的向棧一樣（屁話） 那什么是棧？

　　代碼中的理解是，棧是一種可以限制插入和刪除項(xiàng)的數(shù)據(jù)結(jié)構(gòu)，棧是一種LIFO（Last-In-FIRST-Out 后進(jìn)先出） ,也就是最新添加的項(xiàng)最早被移除,最早添加的項(xiàng)在棧的底部，看圖：

　　類似于積木，下面的積木總是最后才能拿到的，放在新的地方，就形成了一個(gè)【?！?br />

在數(shù)組棧中 拿出來(lái)叫【彈出】 放進(jìn)去叫【推入】

在javascript數(shù)組中有兩個(gè)方法 【彈出是pop()】【推入是push()】

var sarr = ["hello","java","script"];
sarr.push("black");//推入一個(gè)black
console.log(sarr[3])//black
console.log(sarr.pop())//black //彈出black 
console.log(sarr[3]);//undefined black已經(jīng)被彈出了 所以數(shù)組項(xiàng)3不存在 

隊(duì)列

棧數(shù)據(jù)的訪問規(guī)則是LIFO（先進(jìn)后出），而隊(duì)列數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是FIF0（先進(jìn)先出）。隊(duì)列經(jīng)常被用于循環(huán)操作數(shù)組，不斷的對(duì)數(shù)組進(jìn)行操作 ；隊(duì)列方法使用shift（）從數(shù)組中彈出先進(jìn)的項(xiàng) 也就是下標(biāo)為0的項(xiàng)

var sarr = ["hello","java","script"];
console.log(sarr.shift()); //hello //shift類似于pop方法 不同的是pop從數(shù)組的末尾彈出 而shift是從數(shù)組的開頭
console.log(sarr[0]); //java hello已被彈出 

利用shift方法可形成一個(gè)隊(duì)列：

var sarr = ["hello","java","script"];
var alf = sarr.shift();//取出第一項(xiàng)
sarr.push(alf);//插入到數(shù)組末尾
console.log(sarr); //['java','script','hello'] 

通過定時(shí)器 setInterval 我們就可以不斷的循環(huán)打印每一個(gè)數(shù)組項(xiàng) setInterval之前的博文已經(jīng)經(jīng)過講解》》傳送門 setTimeout與setInterval 定時(shí)器與異步循環(huán)數(shù)組

setInterval(function(){
console.log(sarr[0]);//打印第一項(xiàng)
var alf = sarr.shift();//取出第一項(xiàng)
sarr.push(alf);//插入到數(shù)組末尾
},1000); 

上栗會(huì)不斷的打印hello java script

我們知道數(shù)組可以存儲(chǔ)任意類型的值 那么我們將需要循環(huán)執(zhí)行的函數(shù)放在數(shù)組中 然后利用隊(duì)列方法不斷的執(zhí)行，就可以循環(huán)執(zhí)行隊(duì)列中的方法：

function hello(){
console.log("hello");
}
function java(){
console.log("java");
}
function script(){
console.log("script");
}
var sarr = [hello,java,script];
setInterval(function(){
var alf = sarr.shift();//取出第一項(xiàng)
sarr.push(alf);
alf();//執(zhí)行方法
},1000); 

它同樣可以循環(huán)打印 hello java script 只是更加強(qiáng)大了

數(shù)組常用方法匯總

1.排序

javascript數(shù)組中已經(jīng)存在兩個(gè)可以直接用來(lái)重排序的方法：reverse() 和sort()。

reverse()將數(shù)組倒敘重排：

var sarr = [1,2,3,4,5,6];
console.log(sarr.reverse()); //6,5,4,3,2,1 

還有一個(gè)更強(qiáng)大的方法 sort()

默認(rèn)sort()按照升序重排數(shù)組，需要注意的是sort會(huì)調(diào)用每個(gè)項(xiàng)的toString()方法，因此sort實(shí)際比較大小的根據(jù)是字符串 ：

var sarr = [6,2,2,4,5,6];
console.log(sarr.sort()); //2,2,4,5,6,6 升序排列var sarr = [6,2,2,11,4,5,6]; console.log(sarr.sort()); //11,2,2,4,5,6,6

上栗，因?yàn)閟ort實(shí)際比較大小的根據(jù)是字符串而字符串的比較方法一般是取字符中的第一個(gè)字符來(lái)進(jìn)行比較的 所以'11'<2 'a'<'b'

而sort也可以傳遞一個(gè)函數(shù)作為參數(shù)，它可以重規(guī)定數(shù)組的排序方式：

function compare(val1,val2){ //sort傳遞兩個(gè)參數(shù) 值1和值2
if(val1<val2){ //當(dāng)值1小于值2 返回-1表示將值1向前移動(dòng)一個(gè)位置 
return -1; 
}else if(val1>val2){
return 1;
}else{
return 0;
}
}
var sarr = [6,2,2,11,4,5,6];
console.log(sarr.sort(compare)); //[ 2, 2, 4, 5, 6, 6, 11 ] 我們?cè)诤瘮?shù)中進(jìn)行比較 最后結(jié)果正常 

上栗 如果【val1<val2】返回1的大于返回-1的話就可以倒敘排列；我們也可以自己規(guī)定它的排序方式；

2.操作數(shù)組

① 將一個(gè)數(shù)組復(fù)制一份副本保存（克隆） concat()方法可以基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個(gè)新的數(shù)組，傳遞參數(shù)的情況下，它會(huì)將參數(shù)一并添加到數(shù)組末尾

var sarr = ["hello","java","script"];
var farr = sarr.concat("!");
console.log(farr);//[ "hello", "java", "script", "!" ] 

② slice() 它能夠基于當(dāng)前數(shù)組中的一個(gè)或多個(gè)項(xiàng)創(chuàng)建一個(gè)新的數(shù)組，它可以接受1或者兩個(gè)參數(shù)，即要復(fù)制項(xiàng)的開始和結(jié)束位置，只有一個(gè)參數(shù)默認(rèn)結(jié)束位置為數(shù)組末尾，因此它也可以克隆一個(gè)數(shù)組；

var sarr = ["hello","java","script"];
var farr = sarr.slice(0);
console.log(farr);//[ "hello", "java", "script" ]
var farr = sarr.slice(0,1)
console.log(farr);//取出0-1 創(chuàng)建副本 //[ "hello" ] 

總結(jié)

javascript中數(shù)組是非常重要的組成部分，學(xué)好它可以簡(jiǎn)化工作中的代碼，很多時(shí)候你的一長(zhǎng)串操作可以試一試將他們放在數(shù)組里 通過數(shù)組方法進(jìn)行一系列操作；博文長(zhǎng)度有限，學(xué)習(xí)卻沒有界限，希望大家能夠愉快的學(xué)習(xí)，更快掌握屬于你的前端開發(fā)！

以上所述是小編給大家介紹的Javascript中的數(shù)組常用方法解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論