前言
之前本菜打算在寫完基本類型后寫引用類型Object的,因為Object是引用類型的基礎,其他的引用類型也是以Object為根本。只是關於對象的基本認識與簡單操作確實可寫的不多,打算之后與原型、原型鏈一起寫。本博將介紹引用類型Array,即JavaScript中的數組。
Array
首先數組到底是什么呢?數組是一段線性分配的內存,它能通過整數計算偏移並訪問其中的元素。遺憾的是這個定義是指其他語言中的數組,JavaScript中並沒有此類數據結構。作為替代,JavaScript中基於對象創建了一種類數組的結構,它把數組的下標轉換成字符串當作屬性。這種結構雖然效率不如真正的數組,但它更加方便、靈活、強大。同時JavaScript的Array類型也是除了Object以外使用最多的。
申明
JavaScript的數組有兩種申明方式:
1.Array()構造函數
2.數組字面量
Array() 構造函數
使用new操作符調用Array構造函數,完成數組的實例化。
var myArr = new Array();
在使用Array()構造函數創建新數組時也可以傳入參數,具體有以下幾種方式:
1).一個參數
當傳入的參數是數值時,生成一個length屬性為該值的數組。
當傳入的參數不是數值時,則生成一個包含該值且length為1的數組。
2).多個參數
生成一個包含全部參數值的數組。
var arr1 = new Array(3), //[] arr2 = new Array("3"), //["3"] arr3 = new Array('red','green','blue'); //["red","green","blue"] alert(arr1.length); //3 alert(arr1.length); //1 alert(arr1.length); //3
這里要特別注意一點,我之所以沒有簡單的把length簡單的說成是"長度",因為JavaScript數組的length屬性嚴格上來說不應該完全理解為"長度",這一點之后我會解釋的。
數組字面量
var arr = [1,3,5,7,9];
這種申明方式也是最常用的,它的書寫方式更加簡潔、直觀。
特點
JavaScript的數組有什么特點呢,或者說它其他語言的數組有什么不同呢?
1.最特別的一點,JavaScript數組的每一項都可以保存不同的數據類型。
var myArr = [1,"hello",null,undefined,{"age":"Lily"},false];
如此看來JavaScript數組確實強大,它不僅可以保存不同類型的值,並且同一個數組中每一項的類型都可以不同。
同時,也可以通過下標索引修改數組中的項
myArr[3] = "xxx"; //[1,"hello",null,"xxx",Object,false]
2.JavaScript數組的length屬性是動態可變的,包括隱式與顯式的改變方式。
隱式是指通過向數組中添加值來"撐大"數組,而顯式即為直接設置數組的length屬性。由於length屬性的特別,接下來詳細介紹下。
length屬性
由於JavaScript中數組是基於對象創建的,所以length並不完全代表其長度,應該理解為Array這個對象的一個屬性。怎么理解呢,例子如下。
我將之前申明的數組myArr在控制台打印出來:
從圖中我們可以很清楚地看出數組即對象這個道理,所謂的索引下標實際為對象中的屬性,只是這些屬性是以連續的數值命名的。接着往下看,我們看到了與索引屬性並列的length屬性,以及對象特有的_proto_屬性(該屬性和對象的原型密切相關,以后我們會討論)。
該數組我們甚至可以簡單的理解為創建了如下對象:
var myArr = { "0": 1, "1": "hello", "2": null, "3": undefined, "4": {"age":"Lily"}, "5": false, "length": 6 . . }
有人會說討論這個有意義嗎?length值確實代表數組長度啊。那我們通過了解如何顯式地改變length值來討論這個問題。
JavaScript數組的length屬性並不是只讀的,當我們將length變小時,多出的項會被自動截掉。
myArr.length = 3; console.log(myArr); //[1,"hello",null]
當我們將length值設大時,而之前問題的答案就呼之欲出了。
myArr.length = 100;
從結果圖中我們可以看出,雖然我們將length值增大到100,但顯示出來的數組依然只有初始化時的6項,改變的僅僅是數組這個“對象”的某一個屬性值。
再看一個例子,如果我們初始化一個空數組,然后增大其屬性值:
var myArr1 = new Array(); myArr1.length = 100;
可以看到即使增大了length屬性,它依然是個空數組。
《JavaScript高級程序》中曾說過,當我們將數組的值變大時,未初始化的項會自動用undefined值來填充。它的意思是什么呢?
var myArr2 = [1,2,3]; myArr2.length = 5; console.log(myArr2); //偽[1,2,3,undefined,undefined] console.log(myArr2[3]); //undefined
它意為當length屬性增大時,數組的項數也會同時增加,只是增加項的內容為undefined值。但從上面兩個例子我們可以看出事實並不如此,索引下標沒有增加,改變的只是length屬性的值。
當執行上例中第四行代碼打印myArr2數組中第四項時,結果為undefined。這並不意味着第四項保存着undefined值,而是根本沒有第四項。回想一下,當我們檢索一個對象中不存在的屬性時,返回的不也是undefined嗎?就是這個道理!
那么我們認證了這么多為的是什么?
1.數組的下標不隨length屬性的變大而自增
2.因為下標即屬性這個道理,當有人為干預時它們很可能是不連續的!
明白以上兩點,為的就是在運用之后數組內置方法時減少錯誤的發生。這個問題我也是在看某位大神博客中的例子發現的,理解之后我便提醒自己數組的length和長度並不完全是一回事。
常用方法
由於JavaScript數組的方法很多,這里盡量用最精練的語言一一介紹。
檢測
檢測一個變量是不是數組有以下兩種方法:
1.instanceof操作符,用來檢測值究竟是哪種引用類型的實例。
var arr = [1,2,3], value = arr instanceof Array; alert(value); //true
2.Array.isArray()方法。由於instanceof操作符假定單一的全局環境,為了滿足多個窗口的情況ECMAScript5新增了該方法。
var arr = [1,2,3], value = Array.isArray(arr); alert(value); //true
join()方法
以指定字符做連接字符,依次連接數組中的項並返回構成的字符串。在不傳入參數或者傳入參數為undefined時以","拼接。
var colorArr = ["red","green","blue"]; alert(colorArr.join()); //red,green,blue alert(colorArr.join(undefined)); //red,green,blue alert(colorArr.join("*")); //red*green*blue
棧與隊列方法
首先說棧方法,“后進先出”。push()方法為數組末尾添加若干項並返回新數組長度,pop()方法從數組末尾取出一項,並返回取出的項。
var colorArr = ["yellow","orange"], count = colorArr.push("white","black"); alert(count); //4 var item = colorArr.pop(); alert(item); //black
隊列方法,“先進先出”。shift()方法從數組開頭取出一項,並返回該項。配合push()方法可以實現數組的隊列操作。
var colorArr = ["yellow","orange"], count = colorArr.push("white","black"); alert(count); //4 var item = colorArr.shift(); alert(item); //yellow
unshift()方法,與push()方法類似。只不過是從數組開頭添加若干項,並返回新數組長度。搭配pop()方法可以實現數組的反向隊列操作。所說unshift()方法效率較數組其他方法不高,所以實際中還是慎用。
var colorArr = ["yellow","orange"], count = colorArr.unshift("red","green","blue"); alert(count); //5 var item = colorArr.pop(); alert(item); //orange
棧與隊列方法中這些方法的返回值該怎么記呢?有個小技巧,如果是往數組中添加項的操作,返回的就是新數組的長度。如果是從數組中取出項的操作,那返回的就是被取出的項。是不是很好記呢?
排序方法
reverse()方法,將數組反轉排序。直觀但不夠奶靈活。
var numArr = [1,2,3,4,5,6]; numArr.reverse(); alert(numArr); //6,5,4,3,2,1
sort()方法,用於將數組按照某種順序排列,比如遞增或遞減。
var numArr = [1,22,3,2,26]; numArr.sort(); alert(numArr); //1,2,22,26,3
從上例看出sort()方法並沒有按照我們預想的進行排序,這是由於sort()方法在默認情況下是調用數組中每一項的toString()方法,也就是說實際比較的並不是數字而是字符串,所以才會得不到想要的結果。
為了使其能按照預想的方式進行排序需要傳入比較函數:
function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } }
比較函數接收兩個參數。比較規則大概如下:當希望value1位於value2之前則返回一個負數,希望value1位於value2之后則返回一個正數,相等返回0。
var numArr = [1,22,3,2,26]; numArr.sort(compare); alert(numArr); //1,2,3,22,26
上面的比較函數可以比較大多數數據類型,如果要比較的只是數值的話可以使用簡化版的比較函數。
function compareS(value1, value2) { return value1 - value2; }
當然以上例子均是升序排列,降序只需調換函數中兩個參數的位置即可。
操作方法
數組的操作類方法主要有三個,splice()、concat()以及slice()方法。我們首先來介紹下splice()方法,因為它應該算是最強大的數組方法了。
splice(a,b,c)接收三個參數,a代表執行操作的位置,b代表在操作位置執行刪除操作的次數,c代表需要插入操作位置的值,可以是多個,返回值為刪除的數組項。根據a,b,c三個參數傳入的情況不同可以衍生出三種對數組的操作。
刪除:
var nameArr = ["Tom","Lily","Sam","Bill"], item = nameArr.splice(1,2); alert(nameArr); //Tom,Bill alert(item); //Lily,Sam
省略參數c即為對數組的刪除操作。但是這里要注意刪除這個過程是怎么樣進行的,首先找到數組中位置1即"Lily",當執行一次刪除操作后原本位於位置2的"Sam"上前補位到位置1,之后執行第二次刪除操作。理解這個過程后理解插入與替換方法變得更加容易。
插入:
item = nameArr.splice(1,0,"Kobe","James"); alert(nameArr); //Tom,Kobe,James,Bill console.log(item); //空數組
令參數b為0,即對位置1不執行刪除操作,只插入"Kobe","James"兩項。
替換:
item = nameArr.splice(2,2,"Fanfan"); alert(nameArr); //Tom,Kobe,Fanfan alert(item); //James,Bill
先對位置2進行兩次刪除操作,移除並返回"James","Bill"兩項,然后在位置2添加"Fanfan"。
當完全理解了splice()方法后,就可以把它當成一種操作。分成三種只是方便理解。
concat()方法,用於基於當前數組創建一個新數組。簡單來說就是首先創建原數組的一個副本,然后將接收的參數添加到數組末尾,返回新數組。
var arr = [1,2,3], arr2 = arr.concat([4,5]), arr3 = arr.concat(6,7), arr4 = arr.concat(8,[9,10]); alert(arr); //1,2,3 alert(arr2); //1,2,3,4,5 alert(arr3); //1,2,3,6,7 alert(arr4); //1,2,3,8,9,10
從上例可以看出,傳入的參數不論是單獨的值還是數組或者二者混合,都可以拼接成新數組。
slice()方法,基於當前數組中的若干項創建一個新的子數組。接收兩個參數,第一個參數為起始位置,第二個參數為結束位置。返回從起始位置到結束位置前一項組成的數組,如果不指定結束位則到數組末尾。
var arr = [1,2,3,4,5,6,7,8,9,10], arr2 = arr.slice(3), arr3 = arr.slice(3,8); alert(arr); //1,2,3,4,5,6,7,8,9,10 alert(arr2); //4,5,6,7,8,9,10 alert(arr3); //4,5,6,7,8