前言

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

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

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

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

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

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

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

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

將數(shù)組打印到Firefox控制臺中，在控制臺就可以很清晰的看到它們對應的關系：

控制臺右側非常直觀列出了鍵與值的邏輯關系0對應hello、1對應java 、2對應script，更通俗的講 javascript數(shù)組計數(shù)是從0開始的 【0-1-2】==【1-2-3】第一個是hello 第二個是java 第三個是script；

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

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

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

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

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

小技巧1：

那么問題來了，小伙伴們有時候敲著敲著突然忘記了某個屬性名，怎么搞？

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

console.log(location);

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

數(shù)組棧

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

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

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

在數(shù)組棧中 拿出來叫【彈出】 放進去叫【推入】

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

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

隊列

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

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

利用shift方法可形成一個隊列：

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

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

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

上栗會不斷的打印hello java script

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

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();//取出第一項
sarr.push(alf);
alf();//執(zhí)行方法
},1000); 

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

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

1.排序

javascript數(shù)組中已經存在兩個可以直接用來重排序的方法：reverse() 和sort()。

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

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

還有一個更強大的方法 sort()

默認sort()按照升序重排數(shù)組，需要注意的是sort會調用每個項的toString()方法，因此sort實際比較大小的根據(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

上栗，因為sort實際比較大小的根據(jù)是字符串而字符串的比較方法一般是取字符中的第一個字符來進行比較的 所以'11'<2 'a'<'b'

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

function compare(val1,val2){ //sort傳遞兩個參數(shù) 值1和值2
if(val1<val2){ //當值1小于值2 返回-1表示將值1向前移動一個位置 
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 ] 我們在函數(shù)中進行比較 最后結果正常 

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

2.操作數(shù)組

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

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

② slice() 它能夠基于當前數(shù)組中的一個或多個項創(chuàng)建一個新的數(shù)組，它可以接受1或者兩個參數(shù)，即要復制項的開始和結束位置，只有一個參數(shù)默認結束位置為數(shù)組末尾，因此它也可以克隆一個數(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" ] 

總結

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

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

最新評論