JavaScript中的Array類型詳解

與其餘語言中的數組的區別:javascript

1.JavaScript數組的每一項均可以保存任何類型的數據,一個數組的數組元素能夠是不一樣類型的數據。
2.數組的大小是動態調整的,能夠隨着數據的添加自動的增加。前端

1.兩種方法構建數組

JavaScript中的數組有兩種構建方式:
第一種是使用Array構造函數:java

var colors = new Array(3); //建立一個包含3項的數組,參數3表示建立的數組大小
    var names = new Array("Greg","Bobi"); //建立數組

第二種是使用數組字面量表示法,數組字面量由一對包含數組項的方括號表示,多個數組項之間以逗號隔開。數組

var colors = ["red","blue","green"]; //建立一個包含3個字符串的數組
    var names = []; //建立一個空數組

無論用什麼方式建立的數組都有下面要講的一些方法.
查看數組的長度,檢查數組的長度可使用length屬性。經過length屬性能夠獲得數組的長度,由於數組的長度永遠比數組的索引座標大1,全部,還能夠經過length往數組最後一位添加元素,甚至減小數組長度函數

//使用length查看數組長度
        var colors = ["red","blue","green"];
        var count = colors.length;
        alert(count);//3

        //使用length捨去數組元素
        colors.length = 2; //設置數組長度爲2,最後一個元素被捨去
        alert(colors); //red,blue
        alert(colors.length); //2

        //使用length向數組添加元素
        colors[colors.length] = "yello"; //項數組中增長元素
        alert(colors);  //red,blue,yello
        alert(colors.length); //3

2.檢測數組

檢查一個值究竟是不是數組,使用Array.isArray()方法code

var colors = ["red","blue","green"];
if (Array.isArray(colors)){
    alert(true);  //true
}

3.轉換方法

Array也是一個對象,因此也擁有toLocaleString(),toString()和valueOf()方法。
toString():方法會返回由數組中每一個元素字符串形式拼接成的一個由逗號分隔的字符串
valueOf():方法返回的仍是數組,可是若是使用alert(colors.valusOf())返回的跟toString()返回的徹底同樣,由於alert()接收到valueOf()傳送來的數組,會再次調用toString()方法
toLocaleString():方法要而常常會返回與上面兩個方法返回的值相同對象

4.棧方法

數組能夠模擬棧的方法,具體就是先進後出,提供push()方法接收不定的參數,從數組後面壓入數組,提供pop()方法從數組末尾移除最後一項。
須要注意的是:push()方法返回值時修改後數組的長度,pop()返回值是移除的項。排序

var colors = ["red","blue","green"];
var count = colors.push("yello","black");//壓入
alert(count); //5

var item = colors.pop(); //取得最後一項
alert(item); //black

5.列隊方法

列隊方法區別於棧方法,棧方法是先進後出,列隊方法是先進先出。
列隊方法提供push()函數向數組末尾添加元素,返回值時修改後數組的長度。提供shift()方法移除數組中的第一個項.
列隊方法還提供unshift()方法在數組的前端添加任意個項並返回新數組的長度,以此構成了雙向列隊。索引

//建立新數組,長度爲3
var colors = ["red","blue","green"];

//使用push()向末尾添加兩個元素,長度爲5
var count = colors.push("yello","black");//壓入
alert(count); //5

//移除數組前端的元素,長度爲4
var item = colors.shift();
alert(item);  //red

//使用unshift()方法在前端添加一個元素,長度爲5
var unCount = colors.unshift("white");
alert(unCount); //5

6.重排序方法

數組的從新排序主要有兩種方法:
reserve():方法會反轉數組的排血順序。
sort():會按照升序排列數組,因爲這個升序是按照字典順序來的,因此可接收一個參數來指定排列順序,這個參數是函數,函數接收兩個值進行比較,若是第一個參數應該位於第二個以前則返回一個負數。
注意:reserve()和sort()方法的返回值是通過排序以後的數組ip

7.操做方法

操做方法有幾個經常使用的方法:
contact():方法能夠基於當前數組中的全部項建立一個新數組
slice():方法是切片操做,接收兩個參數,起始和結束爲止,只有一個參數時,表示這個參數開始到結束。
splice():方法是切片方法的升級,主要用途是向數組的中部插入元素,接收三個參數,第一個參數是起始位置,第二個參數是要刪除的元素項數,第三個參數能夠是任意數量的,若是有的話就插入到前面兩個參數的位置

//建立新數組
var colors = ["red","blue","green","red","black"];

//concat()方法
var colors1 = colors.concat();
var colors2 = colors.concat("1","2");

alert(colors1); //red,blue,green,red,black
alert(colors2); //red,blue,green,red,black,1,2

//slice()方法
var colors3 = colors.slice(1,3);
alert(colors3); //blue,green

//splice()方法
//使用splice()方法刪除
var removed = colors.splice(0,1);//刪除第一項
alert(removed);//red 返回的數組中只包含一項

使用splice()方法插入
removed = colors.splice(1,0,"1","2");//從位置1開始插入兩項
alert(colors); //red,1,2,blue,green,red,black
alert(removed); //返回一個空數組

//使用splice()方法替換
removed = colors.splice(1,2,"Rocco","Bobi");//插入兩項,刪除兩項項
alert(colors);//red,Rocco,Bobi,red,black
alert(removed);//blue,green 返回的數組包含兩項

8.位置方法

位置方法主要有兩個,全都接收兩個參數,要查找的項和可選的表示查找起點位置的索引。若是查找到就返回要查找的項在數組中的下標,若是沒有找到就返回-1

indexOf():從數組的開頭開始向後查找
lastIndexOf():從數組的末尾開始向前查找

//建立新數組
var colors = ["red","blue","green","red","black"];
//從前日後查找
alert(colors.indexOf("red"));//0
//從後往前查找
alert(colors.lastIndexOf("red"));//3

9.迭代方法

數組的迭代方式比較多,可使用for循環的兩種不一樣使用方法,還可使用屬於數組的5個迭代方法
首先看for循環迭代數組

//建立新數組
var colors = ["red","blue","green","red","black"];
//第一種for循環
for (var i=0; i<colors.length; i++){
    alert(colors[i]);
}
//第二種for循環
for (var i in colors){
    alert(colors[i]);//此處的i也是索引,不是數組的元素
}

數組定義的5個迭代方法
every():對數組中的每一項運行給定的函數,若是數組中的每個元素在該函數中都返回true,則返回true。
some():對數組中的每一項運行給定函數,若是該函數對任一項返回true,就會返回true。
filter():對數組中的每一項運行給定的函數,返回該函數會返回true的元素項組成的新數組。
forEach():對數組中的每一項運行給定的函數,這個方法沒有返回值。
map():對數組中的每一項運行給定函數,返回每次函數調用的劫奪組成的數組。

var numbers = [1,2,3,4,5,4,3,2,1];

//every()
var everyResult = numbers.every(function (item,index,array) {
    return (item > 2);//只有每個元素都大於2,結果纔會返回true
});
alert(everyResult);//false

//some()
var someResult = numbers.some(function (item,index,array) {
    return (item >2);//只要有一個元素大於2,結果就返回true
});
alert(someResult);//true

//filter()
var filterResult = numbers.filter(function (item,index,array) {
    return (item > 3);//收集知足大於3的元素,組成一個新數組
});
alert(filterResult);//[4,5,4]

//map()
var mapResult = numbers.map(function (item,index,array) {
    return item*2;
});
alert(mapResult);//[2,4,6,8,10,8,6,4,2]

//forEach()
var forEachResult = numbers.forEach(function (item,index,array) {
//            alert(item);
    //對數組的每一項執行該函數,沒有返回值
})

10.歸併方法

數組的歸併有兩種兩個函數,使用方法是同樣的,不一樣之處在於一個是從前向後,一個是從後向前。
reduce():從數組第一個開始,逐個遍歷到最後
reduceRight():從數組的最後一個開始,逐個遍歷到第一項
以上兩個方法都接收4個參數,分別是:前一個值,當前值,項的索引,數組對象。每一次的遍歷都會把結果傳遞到下次操做的前一個值上

var values = [1,2,3,4,5];
var sum = values.reduce(function (prev,cur,index,array) {
    return prev+cur;
});
alert(sum);//15

以上是reduce()的使用方法,reduceRight()使用方法相同,只是從後向前迭代。

相關文章
相關標籤/搜索