javascript類型系統
前面的話
除了對象之外，數組Array類型可能是javascript中最常用的類型了。而且，javascript中的數組與其他多數語言中的數組有著相當大的區別。本文將介紹javascript中的數組Array類型
創建數組
有兩種創建數組的方法：使用字面量語法和使用Array()構造函數
【字面量】
使用數組字面量是創建數組最簡單的方法，在方括號中將數組元素用逗號隔開即可
var empty = []; //沒有元素的數組 var primes = [2,3,5,7,11]; //有5個數值的數組
雖然javascript數組與其他語言中的數組都是數據的有序列表，但與其他語言不同的是，javascript數組的每一項可以保存任何類型的數據
var misc = [1.1,true, "a"]; //3個不同類型的元素
數組字面量中的值不一定要是常量，它們可以是任意的表達式
var base = 1024; var table = [base,base+1,base+2,base+3];
它可以包含對象字面量或其他數組字面量
var b = [ [1,{x:1,y:2}],[2,{x:3,y:4}] ];
如果數組的元素還是數組，就形成了多維數組
var a = [[1, 2], [3, 4]];
[註意]使用數字字面量表示法時，不會調用Array構造函數
【構造函數】
有三種方式調用構造函數
【1】沒有參數，創建一個空數組
//該方法創建一個沒有任何元素的空數組，等同於數組直接量[] var a = new Array();
【2】有一個數值參數，該參數用於指定數組的長度
var a = new Array(10); console.log(a);//[] console.log(a[0],a.length);//undefined 10
[註意]若存在一個其他類型的參數，則會創建包含那個值的只有一項的數組
var a = new Array(‘10‘); console.log(a);//[‘10‘] console.log(a[0],a.length);//10 1
【3】有多個參數時，參數表示為數組的具體元素
var a = new Array(1,2,3); console.log(a);//[1,2,3] console.log(a[0],a[1],a[2]);//1 2 3
使用Array()構造函數時，可以省略new操作符
var a1 = Array(); var a2 = Array(10); var a3 = Array(1,2,3); console.log(a1,a2,a3);//[] [] [1,2,3]
數組本質
數組是按次序排列的一組值，本質上，數組是一種特殊的對象
typeof [1, 2, 3] // "object"
數組的特殊性體現在，它的鍵名是按次序排列的一組整數(0，1，2…)。由於數組成員的鍵名是固定的，因此數組不用為每個元素指定鍵名，而對象的每個成員都必須指定鍵名
var arr = [‘a‘, ‘b‘, ‘c‘];
console.log(Object.keys(arr));// ["0", "1", "2"]
var obj = {
name1: ‘a‘,
name2: ‘b‘,
name3: ‘c‘
};
數組是對象的特殊形式，使用方括號訪問數組元素就像用方括號訪問對象的屬性一樣
javascript語言規定，對象的鍵名一律為字符串，所以，數組的鍵名其實也是字符串。之所以可以用數值讀取，是因為非字符串的鍵名會被轉為字符串，然後將其作為屬性名來使用
o={}; //創建一個普通的對象
o[1]="one"; //用一個整數來索引它
//數值鍵名被自動轉成字符串
var arr = [‘a‘, ‘b‘, ‘c‘];
arr[‘0‘] // ‘a‘
arr[0] // ‘a‘
但是，一定要區分數組索引和對象的屬性名：所有的索引都是屬性名，但只有在0~232-2(4294967294)之間的整數屬性名才是索引
var a = []; //索引 a[‘1000‘] = ‘abc‘; a[1000] // ‘abc‘ //索引 a[1.00] = 6; a[1] // 6
[註意]單獨的數值不能作為標識符(identifier)。所以，數組成員只能用方括號法表示
var arr = [1, 2, 3]; arr[0];//1 arr.0;//SyntaxError
可以使用負數或非整數來索引數組。但由於其不在0~2的32次方-2的範圍內，所以其只是數組的屬性名，而不是數組的索引，明顯的特征是不改變數組的長度
var a = [1,2,3]; //屬性名 a[-1.23]=true; console.log(a.length);//3 //索引 a[10] = 5; console.log(a.length);//11 //屬性名 a[‘abc‘]=‘testing‘; console.log(a.length);//11
稀疏數組
稀疏數組就是包含從0開始的不連續索引的數組
【1】制造稀疏數組最直接的方法就是使用delete操作符
var a = [1,2,3,4,5]; delete a[1]; console.log(a[1]);//undefined console.log(1 in a);//false
【2】數組的逗號之間可以省略元素值，通過省略元素值也可以制造稀疏數組
var a =[1,,3,4,5]; console.log(a[1]);//undefined console.log(1 in a);//false
[註意]省略的元素值和值為undefined的元素值是有區別的
var a =[1,,3,4,5]; console.log(a[1]);//undefined console.log(1 in a);//false var a =[1,undefined,3,4,5]; console.log(a[1]);//undefined console.log(1 in a);//true
如果在數組的末尾使用逗號時，瀏覽器之間是有差別的。標準瀏覽器會忽略該逗號，而IE8-瀏覽器則會在末尾添加undefined值
//標準瀏覽器輸出[1,2]，而IE8-瀏覽器輸出[1,2,undefined] var a = [1,2,]; console.log(a); //標準瀏覽器輸出2，而IE8-瀏覽器輸出3 var a = [,,]; console.log(a.length);
足夠稀疏的數組通常在實現上比稠密的數組更慢，內存利用率更高，在這樣的數組中查找元素的時間與常規對象屬性的查找時間一樣長
數組長度
每個數組有一個length屬性，就是這個屬性使其區別於常規的javascript對象。針對稠密(也就是非稀疏)數組，length屬性值代表數組中元素的個數，其值比數組中最大的索引大1
[].length //=>0:數組沒有元素 [‘a‘,‘b‘,‘c‘].length //=>3:最大的索引為2，length為3
當數組是稀疏數組時，length屬性值大於元素的個數，同樣地，其值比數組中最大的索引大1
[,,,].length; //3 (Array(10)).length;//10 var a = [1,2,3]; console.log(a.length);//3 delete a[1]; console.log(a.length);//3
數組的特殊性主要體現在數組長度是可以動態調整的：
【1】如果為一個數組元素賦值，索引i大於等於現有數組的長度時，length屬性的值將設置為i+1
var arr = [‘a‘, ‘b‘]; arr.length // 2 arr[2] = ‘c‘; arr.length // 3 arr[9] = ‘d‘; arr.length // 10 arr[1000] = ‘e‘; arr.length // 1001
【2】設置length屬性為小於當前長度的非負整數n時，當前數組索引值大於等於n的元素將從中刪除
a=[1,2,3,4,5]; //從5個元素的數組開始 a.length = 3; //現在a為[1,2,3] a.length = 0; //刪除所有的元素。a為[] a.length = 5; //長度為5，但是沒有元素，就像new Array(5)
[註意]將數組清空的一個有效方法，就是將length屬性設為0
var arr = [ ‘a‘, ‘b‘, ‘c‘ ]; arr.length = 0; arr // []
【3】將數組的length屬性值設置為大於其當前的長度。實際上這不會向數組中添加新的元素，它只是在數組尾部創建一個空的區域
var a = [‘a‘]; a.length = 3; console.log(a[1]);//undefined console.log(1 in a);//false
如果人為設置length為不合法的值(即0——232-2範圍以外的值)，javascript會報錯
// 設置負值 [].length = -1// RangeError: Invalid array length // 數組元素個數大於等於2的32次方 [].length = Math.pow(2,32)// RangeError: Invalid array length // 設置字符串 [].length = ‘abc‘// RangeError: Invalid array length
由於數組本質上是對象，所以可以為數組添加屬性，但是這不影響length屬性的值
var a = []; a[‘p‘] = ‘abc‘; console.log(a.length);// 0 a[2.1] = ‘abc‘; console.log(a.length);// 0
數組遍歷
使用for循環遍歷數組元素是最常見的方法
var a = [1, 2, 3];
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}
當然，也可以使用while循環
var a = [1, 2, 3];
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
var l = a.length;
while (l--) {
console.log(a[l]);
}
但如果數組是稀疏數組時，使用for循環，就需要添加一些條件
//跳過不存在的元素
var a = [1,,,2];
for(var i = 0; i < a.length; i++){
if(!(i in a)) continue;
console.log(a[i]);
}
還可以使用for/in循環處理稀疏數組。循環每次將一個可枚舉的屬性名（包括數組索引）賦值給循環變量。不存在的索引將不會遍歷到
var a = [1,,,2];
for(var i in a){
console.log(a[i]);
}
由於for/in循環能夠枚舉繼承的屬性名，如添加到Array.prototype中的方法。由於這個原因，在數組上不應該使用for/in循環，除非使用額外的檢測方法來過濾不想要的屬性
var a = [1,,,2];
a.b = ‘b‘;
for(var i in a){
console.log(a[i]);//1 2 ‘b‘
}
//跳過不是非負整數的i
var a = [1,,,2];
a.b = ‘b‘;
for(var i in a){
if(String(Math.floor(Math.abs(Number(i)))) !== i) continue;
console.log(a[i]);//1 2
}
javascript規範允許for/in循環以不同的順序遍歷對象的屬性。通常數組元素的遍歷實現是升序的，但不能保證一定是這樣的。特別地，如果數組同時擁有對象屬性和數組元素，返回的屬性名很可能是按照創建的順序而非數值的大小順序。如果算法依賴於遍歷的順序，那麽最好不要使用for/in而用常規的for循環
類數組
擁有length屬性和對應非負整數屬性的對象叫做類數組(array-like object)
//類數組演示
var a = {};
var i = 0;
while(i < 10){
a[i] = i*i;
i++;
}
a.length = i;
var total = 0;
for(var j = 0; j < a.length; j++){
total += a[j];
}
有三個常見的類數組對象：
【1】arguments對象
// arguments對象
function args() { return arguments }
var arrayLike = args(‘a‘, ‘b‘);
arrayLike[0] // ‘a‘
arrayLike.length // 2
arrayLike instanceof Array // false
【2】DOM方法(如document.getElementsByTagName()方法)返回的對象
// DOM元素 var elts = document.getElementsByTagName(‘h3‘); elts.length // 3 elts instanceof Array // false
【3】字符串
// 字符串 ‘abc‘[1] // ‘b‘ ‘abc‘.length // 3 ‘abc‘ instanceof Array // false
[註意]字符串是不可變值，故當把它們作為數組看待時，它們是只讀的。如push()、sort()、reverse()、splice()等數組方法會修改數組，它們在字符串上是無效的，且會報錯
var str = ‘abc‘;
Array.prototype.forEach.call(str, function(chr) {
console.log(chr);//a b c
});
Array.prototype.splice.call(str,1);
console.log(str);//TypeError: Cannot delete property ‘2‘ of [object String]
數組的slice方法將類數組對象變成真正的數組
var arr = Array.prototype.slice.call(arrayLike);
javascript數組方法是特意定義為通用的，因此它們不僅應用在真正的數組而且在類數組對象上都能正確工作。在ECMAScript5中，所有的數組方法都是通用的。在ECMAScript3中，除了toString()和toLocaleString()以外的所有方法也是通用的
var a = {‘0‘:‘a‘,‘1‘:‘b‘,‘2‘:‘c‘,length:3};
Array.prototype.join.call(a,‘+‘);//‘a+b+c‘
Array.prototype.slice.call(a,0);//[‘a‘,‘b‘,‘c‘]
Array.prototype.map.call(a,function(x){return x.toUpperCase();});//[‘A‘,‘B‘,‘C‘]
數組亂序
數組亂序的英文為shuffle，也稱為洗牌。一般地，有如下兩種方法
1、給數組原生的sort()方法傳入一個函數，此函數隨機返回1或-1，達到隨機排列數組元素的目的
var array = [1,2,3,4,5];
console.log(array.sort(function(){return Math.random() - 0.5}));//[2,1,5,4,3]
如果打亂100000個元素的數組，則需要100ms左右
var arr = [];
var NUM = 100000;
for(var i = 0; i < NUM; i++){
arr.push(i);
}
var startTime = +new Date();
arr.sort(function(){return Math.random() - 0.5});
console.log(+new Date() - startTime);//100
2、第二種方法是依次遍歷數組中的每個元素，遍歷到的元素與一個隨機位置的元素交換值
var arr = [1,2,3,4,5];
for(var i = 0 ; i < arr.length; i++){
var randomIndex = Math.floor(Math.random()*arr.length);
[arr[i],arr[randomIndex]] = [arr[randomIndex],arr[i]];
}
console.log(arr);//[2, 3, 1, 4, 5]
如果打亂100000個元素的數組，需要13ms左右，因此第二種方法效率較高
var arr = [];
var NUM = 100000;
for(var i = 0; i < NUM; i++){
arr.push(i);
}
var startTime = +new Date();
for(var i = 0 ; i < arr.length; i++){
var randomIndex = Math.floor(Math.random()*arr.length);
[arr[i],arr[randomIndex]] = [arr[randomIndex],arr[i]];
}
console.log(+new Date() - startTime);//13
參考資料
【1】 ES5/array對象 https://www.w3.org/html/ig/zh/wiki/ES5/builtins#Array_.E5.AF.B9.E8.B1.A1
【2】 阮一峰Javascript標準參考教程——基本語法 http://javascript.ruanyifeng.com/grammar/array.html
【3】《javascript權威指南(第6版)》第7章 數組
【4】《javascript高級程序設計(第3版)》第5章 引用類型
【5】《javascript DOM編程藝術(第2版)》第2章 javascript語法
【6】《javascript語句精粹》第6章 數組
javascript類型系統