JavaScript:Array類型全面解析

JavaScript中的數組類型與其他語言中的數組有著很大的區別。 JavaScript中的每一項可以保存任何類型的數據。而且，JavaScript數組的大小是可以動態調整的，可以隨著數據的添加自動增長以容納新增數據。

創建數組的基本形式有兩種。

1.Array構造函數

var cities = new Array();

如果預先知道要保存的項目數量，也可以給構造函數傳遞該數量，該數量會自動變成length屬性的值。

 var cities = new Array(3);

也可以向Array構造函數傳遞數組中應該包含的項。

 var cities = new Array("shanghai", "beijing", "shenzhen");

在創建數組時可以省略new操作符：

 var cities = Array(3); //創建一個包含3個元素的數組

2.數組字面量表示法

數組字面量表示法由一對包含數組項的方括號表示，多個數組項之間以逗號隔開，如下：

 var cities = ["shanghai", "beijing", "shenzhen"];var cities = []; // 創建一個空字符串

在讀取和設置數組的值時，要使用方括號並提供相應值的基於0(基於0就是從0開始計數，第一項為0，第二項為1，以此類推)的數字索引，如下所示：

 var cities = ["shanghai", "beijing", "shenzhen"];alert(cities[0]); // "shanghai"cities[1] = "hongkong"; // 修改第二項"beijing"為"hongkong"cities[3] = "taiwan" // 新增一項

數組的項數保存在length屬性中，它不是只讀的。因此，可以通過設置length屬性，可以從數組的末尾移除項或者向數組中添加新項。

 var cities = ["shanghai", "beijing", "shenzhen"];cities.length = 2;alert(cities[2]); // undefined

利用length的這一屬性可以在數組末尾添加新項：

 var cities = ["shanghai", "beijing", "shenzhen"];cities[cities.length] = "hongkong";

1. 檢測數組

ECMAScript5新增了Array.isArray()方法，作用就是確定某個值到底是不是數組，而不管它是哪個全局執行環境中創建的。用法如下：

 if (Array.isArray(value)) { // 對數組執行某些操作}

2. 轉換方法

所有對像都具有toLocaleString()、toString()和valueOf()方法。其中調用數組的toString()方法會返回由數組中的每個值的字符串形式拼接而成的一個以逗號分隔的字符串。例如：

 var cities = ["shanghai", "beijing", "shenzhen"];alert(cities.toString()); // shanghai,beijing,shenzhenalert(cities.valueOf()); // shanghai,beijing,shenzhenalert(cities); // shanghai,beijing,shenzhen

說明：由於alert()需要接收字符串參數，它會在後台調用toString()方法，因此會得到直接調用toString()方法相同的結果。

另外，toLocaleString()方法經常也會返回與toString()和valueOf()相同的值，不同的是，為了取得每一項的值，調用的是每一項的toLocaleString()方法，而不是toString()方法。例如：

 var p1 = { toLocaleString: function () { return "p1 toLocaleString"; }, toString: function () { return "p1 toString"; } }; var p2 = { toLocaleString: function () { return "p2 toLocaleString"; }, toString: function () { return "p2 toString"; } }; var p = [p1, p2]; alert(p); alert(p.toString()); alert(p.toLocaleString());

結果顯示第一行和第二行調用的是toString方法，第三行調用的是toLocaleString方法。

數組繼承的toLocaleString()、toString()和valueOf()方法，在默認情況下，都會以逗號分隔字符串的形式返回數組項。通過join()方法，則可以使用不同的字符來分割字符串，然後返回包含所有數組項的字符串。

 var cities = ["shanghai", "beijing", "shenzhen"];alert(cities); // shanghai,beijing,shenzhenalert(cities.join(","));// shanghai,beijing,shenzhenalert(cities.join("|"));// shanghai|beijing|shenzhen

3. 棧方法

棧是一種後進先出(LIFO)的數據結構,棧中數據項的插入和移除只能發生在棧的頂部。 JavaScript數組提供了push()和pop()方法用於實現類似於棧的行為。

push()方法

可以接收任意數量的參數，把它們添加到數組的末尾，並修改數組的長度。

 var params = new Array();var count = params.push("a", "b");alert(params); // a,balert(count); // 2

從上面的例子可以看出，push()方法返回的插入的項數。

pop()方法

從數組的末尾移除最後一項，減少數組的長度，返回移除的項。

 var params = new Array();var count = params.push("a", "b", "c");var item = params.pop();alert(item); // calert(params.length); // 2

4. 隊列方法

隊列的數據結構的訪問規則是先進先出(FIFO),即從隊列的末端添加項，從隊列的前端移除項。

shift()方法

JavaScript中提供了shift()方法，移除數組中的第一項並返回該項，同時修改數組的length屬性。

 var params = new Array();var count = params.push("a", "b", "c"); var item = params.shift(); // 取得第一項alert(item); // aalert(params.length); // 2

unshift()方法

JavaScript 還提供了unshift()方法，能在數組前端添加任意個項並返回新數組的長度。

 var params = new Array();var count1 = params.unshift("a");alert(count1); // 1alert(params); // avar count2 = params.unshift("b");alert(count2); // 2alert(params); // b,avar count3 = params.unshift("c", "d");alert(params); // c,d,b,a

觀察發現，如果一次unshift()中有多項，它會將這些項按照順序插入到數組中，即第一個參數插入最前面。像上面的例子中那樣，第一次插入“a”,第二次在數組的最前面插入“b”,第三次時有多項，但是順序是c在前，d在後。

5. 重排序方法

數組中提供了兩個直接用來重排序的方法。

reverse()方法

reverse()方法會反轉數組項的順序。

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

sort()方法

在默認情況下，sort()方法按升序排列數組項。為了實現排序， sort()方法會調用每個數組項的toString()轉型方法，然後比較得到的字符串。因此， sort()方法比較的是字符串。

 var values = [3,5,53,2,34];values.sort();alert(values); // 2,3,34,5,53

然而，我們可以說這種排序基本是毫無意義的，我們需要的是對數值進行排序。 sort()方法可以接收一個比較函數作為參數，以便指定排序規則。

比較函數接收兩個參數，如果第一個參數應該位於第二個參數之前則返回一個負數，如果兩個參數相等則返回0，如果第一個參數位於第二個參數之後則返回一個正數。

 function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; }}var values = [3,5,53,2,34];values.sort(compare);alert(values); // 2,3,4,34,53

6. 操作方法

concat()方法

可以基於當前數組中的所有項創建一個新數組。這個方法會創建一個當前數組的副本，然後將參數添加到副本的末尾，然後返回新構建的數組。如果傳遞給concat()方法的是一個或多個數組，則會將該數組中的每一項添加到數組中。

 var arrays = ["a", "b", "c"];var arrays2 = arrays.concat("d", ["e", "fe"]);alert(arrays); // a,b,calert(arrays2); // a,b,c,d,e,f

slice()方法

基於當前數組中的一或多個項創建一個新數組。 slice()方法可以接收一個或兩個參數，即要返回項的起始和結束位置。當只要一個參數，返回從起始項到數組末尾的所有項，當有兩個參數時，返回起始位置和結束位置之間的項(不包括結束項)。 slice()方法不會影響原數組。

 var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];var cities2 = cities.slice(1);var cities3 = cities.slice(1,3);alert(cities2); // shanghai,shenzhen,guangzhou alert(cities3); // shanghai,shenzhen

splice()方法

splice()方法主要用於向數組的中部插入項，使用方式有3種：

• 刪除可以刪除任意數量的項，指定2個參數：要刪除的第一項和刪除的項數，如：splice(1,3)會刪除數組中的第2、3、4項

var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];cities.splice(1,3);alert(cities); // beijing

• 插入可以向指定位置插入任意數量的項。指定3個參數：起始位置、0(要刪除的項數)、要插入的項

var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];cities.splice(1,0,"hongkong");alert(cities); // beijing,hongkong,shanghai,shenzhen,guangzhou

• 替換可以替換指定位置的項。指定3個參數：起始位置、要刪除的項、要插入的任意項。

 var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];cities.splice(1,2,"hongkong");alert(cities); // beijing,hongkong,guangzhou

7. 位置方法

JavaScript中有兩個位置方法：indexOf()方法和lastIndexOf()方法。這兩個方法都接收兩個參數：要查找的項和(可選)表示查找起點位置的索引。

indexOf()方法表示從數組的開頭向後查找，lastIndexOf()則從數組的末尾開始向前查找。它們都返回查找的項在數組中的位置，如果沒有找到則返回-1。在第一個參數與數組中的每一項比較時使用的是全等。

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

8. 迭代方法

JavaScript為數組提供了5個迭代方法。每個方法接收兩個參數：要在每一項上運行的函數和(可選)運行該函數的作用域對象――影響this的值。需要傳入的參數：數組項的值、該項在數組中的位置和數組對象本身。

•every(): 對數組中的每一項運行給定函數，如果該行數對每一項都返回true，則返回true

•filter(): 對數組中的每一項運行給定函數，返回會返回true的項組成的數組

•foreEach(): 對數組中的每一項運行給定函數，沒有返回值

•map(): 對數組中的每一項運行給定函數，返回每次函數調用的結果組成的函數。

•some(): 對數組中的每一項運行給定函數，如果任一項返回true，則函數返回true

以上方法都不會修改數組中包含的值。

9. 歸併方法

JavaScript中有兩個歸併數組的方法：reduce()和reduceRight()。這兩個方法都會迭代數組的所有項，然後構建一個最終返回的值。其中，reduce()方法從數組第一項開始，而reduceRight()則從數組的最後一項開始。

它們都可以接收兩個參數：一個在每一項上調用的函數和(可選)作為歸併基礎的初始值。傳遞給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

第一次執行回調函數，prev是1，cur是2。第二次，prev是3(1+2),cur是3(數組第三項的值)，知道每一項都訪問到。

reduceRight()的作用類似，只不過方向相反而已。

以上這篇JavaScript:Array類型全面解析就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。