首頁 > web前端 > js教程 > JavaScript之數組(Array)詳解_基礎知識

JavaScript之數組(Array)詳解_基礎知識

WBOY
發布: 2016-05-16 16:06:29
原創
1271 人瀏覽過

ECMAScript的陣列與其他語言中的陣列有著相當大的差異。雖然ECMAScript中的數組也是有序列表,但是它數組你的每一項可以保存任何類型的資料。 ECMAScript數組的大小是可以動態調整的。
    建立陣列的基本方式有兩種。第一種是使用Array建構函數,如下所示:

複製程式碼 程式碼如下:

var colors = new Array();

    若知道陣列要保存的項目數量,也可以傳遞給建構函數參數,而此參數會自動變成length屬性的值,如下:
複製程式碼 程式碼如下:

var colors = new Array(20);

    也可以傳遞陣列中應包含在Array建構函數中的項,如下程式碼所示:
複製程式碼 程式碼如下:

var colors = new Array("red","blue");

    另外,使用Array建構函數時也可以省略new運算符,如下圖所示:
複製程式碼 程式碼如下:

var colors = Array(20);

    建立陣列的第二種方式是使用陣列字面量表示法。數組字面量由一對包含數組項的方括號表示,多個數組項之間用逗號隔開,如下所示:
複製程式碼 程式碼如下:

var color = ["red","blue"];
var names = [];
var values = [1,2,]//IE8及之前3項,其他2項,不建議使用

    與物件一樣,在使用數字字面量表示法時,也不會呼叫Array的建構子。
   在讀取和設定陣列的值時,要使用方括號並提供對應值的基於0的數字索引,如下所示:
複製程式碼 程式碼如下:

var colors = ["red","blue"]; //定義陣列
alert(colors[0]); //red
colors[1] = "black" //修改第2項
colors[2] = "brown" //新增第3

    陣列的項數保存在其length屬性中,這個屬性總是會傳回0或更大的數字,如下所示:
複製程式碼 程式碼如下:

var colors = ["red","blue"]; //定義陣列
var names=[];
alert(colors.length);        //3
alert(names.length)          //0

    值得注意的是,陣列的length值不是唯讀的。因此,透過設定此值,可以從數組的末尾移出項或向數組添加項,如下:
複製程式碼 程式碼如下:

var colors = ["red","blue"];
colors.length = 1;
alert(colors[1]); //undefined

    利用length屬性也可以方便的新增資料至陣列末端:
複製程式碼 程式碼如下:

var colors = ["red","blue"];
colors[colors.length] = "black"; //在位置2新增
colors[colors.length] = "brown"; //在位置3新增

1、偵測陣列

    對於一個網頁或一個全域作用域而言,使用instanceof運算子可以做到:

複製程式碼 程式碼如下:

if(value instanceof Array){
  // 執行操作
}

    instanceof運算子限制在全域作用域,如果網頁包含多個框架,就存在兩個以上的全域執行環境。為了解決這個問題,ECMAScript5新增了Array.isArray()方法,使用如下:
複製程式碼 程式碼如下:

if(Array.isArray(value)){
    // 執行操作
}

2、轉換方法
    呼叫陣列的toString()方法會傳回由陣列中每個值的字串形式拼接而成的一個以逗號分隔的字串。而呼叫valueOf()返回還是數組。如下圖所示:

複製程式碼 程式碼如下:

var colors = ['red', 'blue', 'green'];
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors)            //red,blue,green

    陣列繼承的toLocalString()、tiString()和valueOf()方法,預設都會以逗號分隔符號的字串形式傳回陣列項目。而如果使用join()方法,則可以使用不同的分隔符號來建構這個字串。 join()方法只接受一個參數,即用作分隔符號的字串,如下所示:
複製程式碼 程式碼如下:

var colors = ['red', 'blue', 'green'];
alert(colors.join(',')); //red,blue,green
alert(colors.join('|')); //red|blue|green

    如果陣列中的某一項值為null或undefied,則數值在join()、toLocalString()、tiString()和valueOf()方法傳回結果以空字串表示。

3、堆疊方法

Javascript專門為陣列提供了push()和pop()操作,以便實現類似堆疊的行為。

push()方法可以接收任意數量的參數,把他們逐一加到數組末尾,並返回修改後數組的長度。 pop()方法則從陣列結尾溢出最後一項,減少陣列的length值,然後傳回移出的項。

複製程式碼 程式碼如下:

var colors = new Array(); //定義陣列
var count = colors.push("red", "blue"); //壓入兩項
alert(count); //2
count = colors.push("black"); //壓入另一項
alert(count); //3
var item = colors.pop(); //彈出最後一項
alert(item); //"black"
alert(colors.length); //2

4、隊列方法

堆疊資料結構的存取規則是LIFO(後進先出),而佇列的存取規則是FIFO(先進先出)。隊列在清單末端添加項,在前端移出項。

shift()方法能夠移除數組中的第一項,並傳回該項,數組的length-1。結合push()和shift()方法,可以像使用隊列一樣使用數組,如下所示:

複製程式碼 程式碼如下:

var colors = new Array();
var count = colors.push("red", "blue");
count = colors.push("black");
alert(count);
var item = colors.shift(); //取得第一項
alert(item); //"red"
alert(color.length); //2

 ECMAScript也為陣列提供了unshift()方法。 unshift()和shift()方法用途相反:它在陣列前端添加任意個項目並傳回新陣列的長度。因此,同時使用unshift()和shift()方法,可以從相反方向來模擬隊列,即在數組前端添加新項,從數組末端移出項,如下所示:
 

複製程式碼 程式碼如下:

 var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.unshift("black"); //推入另一個
alert(count); //3
var item = colors.pop(); //取得最後一項
alert(item) //green
alert(colors.length) //2
 

 5、重新排序方法
    陣列中已經存在兩個可以直接用來重新排序的方法:reverse()和sort()。 reverse()方法會依照反轉數組項的排序。

複製程式碼 程式碼如下:

var values = [2, 1, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

    預設情況下,sort()方法依升序排列數組項,呼叫每一項的toString()方法,比較字串,以決定如何排序。即使數組中的每一項都是數值,sort()方法比較的都是字串。
 
複製程式碼 程式碼如下:

var values = [12, 11, 3, 4, 5];
values.sort();
alert(values); //12,11,3,4,5

    我們可以透過一個比較函數當作參數傳遞給sort()方法。如下:
複製程式碼 程式碼如下:

function compare(value1, value2) {
    if (value1         return -1
    } else if (value1 > value2) {
        return 1
    } else {
        return 0
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    //0,1,5,10,15 

6、操作方法
    ECMAScript為運算在陣列中提供了許多方法。其中,concat()方法可以基於目前數組中的所有項目來建立一個新數組。

複製程式碼 程式碼如下:

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

    slice()方法,它能夠基於目前陣列的一個項目或多個項目建立新數組,它可以接收一個或兩個參數,即要傳回項目的起始和結束位置。一個參數時,傳回該參數指定位置開始到目前陣列末端的所有項目。兩個參數則傳回起始到指定位置的所有項目-不包括結束位置的項。請注意,slipe()方法不影響原始陣列。
複製程式碼 程式碼如下:

var colors=["red","green","blue","black","brown"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2); //green,blue,black,brown
alert(colors3); //green,blue,black

    slice()方法刪除:任意數量的項,只需指定2個參數:要刪除的第一項的位置和要刪除的項數。
    slice()方法插入:可在指定位置插入任意數量的項,只需提供3個參數:起始位置、0(要刪除的項數)和要插入的項。
    slipe()方法替換:可以項指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個參數:起始位置、要刪除的項數和要插入的任意數量的項。
複製程式碼 程式碼如下:

var colors = ["red", "green", "blue"];
//刪除
var removed = colors.slice(0, 1); //刪除第1項
var colors3 = colors.slice(1, 4);
alert(colors); //green,blue
alert(removed); //red
//插入
removed = colors.slice(1, 0,"yellow","orange"); //從位置1開始插入
alert(colors); //green,yellow,orange,blue
alert(removed); //空數組
//替換
removed = colors.slice(1, 1,"red","purple"); //從位置1開始插入
alert(colors); //green,"red","purple",orange,blue
alert(removed); //"yellow"

7、位置方法
    ECMAScript5為陣列提供了兩個位置方法:indexOf()和lastIndexOf()。這兩個方法都會接收兩個參數:要尋找的項目和表示查找起點位置的索引(可選)。其中indexOf()方法從陣列的開頭開始先後查找,lastIndexOf()方法則從陣列的末端開始向前查找。
    這兩個方法都會傳回要尋找的項目在陣列中的位置,在沒有找到的情況下回傳-1。

複製程式碼 程式碼如下:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)) //3
alert(numbers.lastIndexOf(4)) //5
alert(numbers.indexOf(4, 4)) //5
alert(numbers.lastIndexOf(4, 4)) //3

8、迭代方法

ECMAScript5為陣列定義了5個迭代方法。每個方法都接受兩個參數,第一個是進行迭代的函數,第二個是該函數的作用域物件【可選】。

進行迭代的函數接受三個參數,第一個是數組中要進行迭代的元素的值,第二個是數組候總要進行迭代的元素的位置,第三個是迭代數組本身。

    1. every()      對陣列中的每項執行給定的函數,如果函數對每一項都回傳true,則傳回true    
 2. filter()       對陣列中的每一項執行給定的函數,傳回該函數傳回true的項所組成的陣列。    
3. forEach()  對數組中的每一項運行給定的函數,這個方法沒有返回值    4. map()       對數組中的每一項運行給定的函數,返回每次函數調用的結果組成的數組
    5. some()     對陣列中的每一個執行給定的函數,如果函數對任一項傳回true,則傳回true
    這些迭代方法支援的瀏覽器有,IE9 ,Firefox2 ,Safari3 ,Opera 9.5 ,chrome
    在這些方法中,最相似的是every()和some(),它們都是用來查詢數組中的項目是否滿足某個條件。對every()來說,傳入的函數必須對每一項都回傳true,這個方法才會回傳true;否則,他就回傳false。而some()方法則是只要傳入的函數對數組中某一項回傳true,就回傳true。

複製程式碼 程式碼如下:

var num = [1,2,3,4,5,6,7,8,9];
var everyResult = num.every(function(item, index, array) {
    if(item > 2) {
        return true;
    }
});
alert(everyResult); //false
var someResult = num.some(function(item) {
    if(item > 2) {
        return true;
    }
});
alert(someResult); //true

    filter()是利用指定的函數來決定是否在傳回的陣列中包含某一項。

複製程式碼 程式碼如下:

var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
    if(item > 2) {
        return true;
    }
});
alert(filterResult);  //[3,4,5,4,3]

  map()也傳回一個數組,而這個數組的每一項都是在原始數組中的對應項上運行傳入函數的結果。
 

複製程式碼 程式碼如下:

  var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
    if(item > 2) {
        return true;
    }
}); //[2,3,6,8,10,8,6,4,2]
 

   forEach()是對陣列中的每一項運算傳入的函數。這個方法沒有傳回值,本質上與使用for迴圈迭代數組一樣。

複製程式碼 程式碼如下:

var num = [1,2,3,4,5,4,3,2,1];
num.forEach(function(item) {
  // 執行操作
});

9、歸併方法

ECMAScript5新增了兩個方法:reduceRight() 和 reduce()。這兩個方法都接受兩個參數:第一個是用來迭代的數組的函數,這個函數有四個參數分別是,前一個值,當前值,項的索引,數組物件。然而這個函數的任何值都會作為第一個參數自動傳給下一項。第二個是作為第一個函數中第一個參數的初始值 。

複製程式碼 程式碼如下:

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
    return prev cur;
});
alert(sum);//15
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板