JavaScript權威指南 - 數組

JavaScript數組是一種特殊類型的對象。
JavaScript數組元素可以為任意類型，最大容納2³²-1個元素。
JavaScript數組是動態的，有新元素添加時，自動更新length屬性。
JavaScript數組元素索引可以是不連續的，它們之間可以有空缺。

1.創建數組

調用構造函數Array()創建數組：

var a = new Array();            //空數組，等同於數組直接量[]
var b = new Array(5);           //創建指定長度的數組
var c = new Array(1, 5, 9, 6);  //指定一個或多個元素的非空數組

數組直接量表示法：

var a = [];                     //空數組
var b = [2, 3, 5, 7];           //常規元素
var c = [5, true, "a"];         //元素不同類型的數組
var d = [{ x: 2 }, { x: 3 }];   //包含對象元素的數組

以上是數組的幾種常見類型，但下麵兩種也符合數組語法。

var e = [1, , 3]; //該數組有3個元素，中間的元素為undefined
var f = [1, 5, ]; //該數組有2個元素，結尾逗號後面沒有元素

如果省略數組直接量中的某個元素值，省略的元素值為undefined；
數組直接量的語法中允許有可選結尾的逗號，故[1,5,]只有兩個元素並非三個。

兩種方法創建的數組無本質區別，但數組直接量表示法簡單，實際使用中更為常見。

2.數組元素

讀寫數組元素最簡單的方法就是通過索引。

var arr = ["one", "two"];
var res = arr[0];  //讀第0的元素
arr[0] = "test";   //寫第0的元素

數組本身就是對象，使用[]方括弧訪問數組元素就像方括弧訪問對象屬性一樣。數組的特別之處在於，當使用小於2³²的非負整數作為屬性時數組會自動維護其length屬性。當然，數組也可以有自定義屬性，但不常見。如下：

var obj = [1, 2, 3];
obj["IsShow"] = false;   //現在obj數組為 [1, 2, 3, IsShow: false]

3.稀疏數組

稀疏數組就是包含從0開始的不連續索引的數組。

var a = new Array(5); //數組沒有元素，但a.length等於5
var b = [];
b[1000] = 1000; //添加一個索引為1000的元素，但b.length等於1001

通過delete操作符刪除數組元素可產生稀疏數組。delete不會改變數組長度，高位置索引元素也不會下移填補刪除索引位置的空白。

註意，省略數組不等同於稀疏數組，省略的元素在數組中是存在的，值為undefined。

4.數組長度

每個數組都有length屬性，代表數組中元素的個數。針對非稀疏數組，其值比最大索引大1。

['a', 'b', 'c'].length; //最大索引為2，length為3

當設置length屬性為一個小於當前數組長度的非負整數n時，當前數組中的那些索引大於或等於n的元素將被刪除。

var a = [1, 2, 3, 4, 5]; //數組初始化5個元素
a.length = 3;  //現在a為[1,2,3]
a.length = 0;  //刪除所有元素，a為[]
a.length = 5;  //數組長度為5，但是沒有元素

在ECMAScript 5中，可以用Object.defineProperty()讓數組的length屬性變成只讀的。

var b = [1, 2, 3];
Object.defineProperty(b, "length", { writable: false }); //讓length變成只讀屬性
b.length = 0; //更改無效

5.數組遍歷

使用for迴圈遍曆數組元素是最常見的方法。如下：

var obj = { height: 175, weight: 60 }; //初始化一個對象
var keys = Object.keys(obj);           //獲取對象obj屬性名組成的數組
var values = [];                       //values用來保存對象obj屬性值
for (var i = 0, len = keys.length; i < len; i++) {
    var key = keys[i];                 //獲取當前索引的鍵值
    values[i] = obj[key];              //在values數組中保存屬性值
}

針對稀疏數組遍歷時，註意過濾掉不滿足條件的元素。

for (var i = 0; i < arr.length; i++) {
    if (!arr[i]) continue;  //跳過null,undefined和不存在的元素
    if (arr[i] === undefined) continue; //跳過undefined和不存在的元素
    if (!(i in arr)) continue; //跳過不存在的元素
    //T0DO 
}

6.多維數組

JavaScript不支持真正的多維數組，一般用數組的數組來近似。下麵是一個具體的例子，使用二維數組作為一個9X9乘法表。

//創建一個多維數組
var table = new Array(10); //表格有10行
for (var i = 0; i < table.length; i++) {
    table[i] = new Array(10); //每行有10列
}
//初始化數組
for (var row = 0; row < table.length; row++) {
    for (var col = 0; col < table[row].length; col++) {
        table[row][col] = row * col;
    }
}
//使用多維數組來計算
var result = table[8][9]; //result = 72

7.數組方法

ECMAScript 3在Array.prototype中定義了一些很有用的操作數組的方法，下麵介紹這些方法的基本用法。

join()
Array.join(separator)該方法可以將數組元素按照指定字元連接起來，返回最終生成的字元串。如果不指定字元separator，預設用逗號分隔。

var arr = [1, 2, 3];
arr.join();     //=>"1,2,3" 預設使用逗號作為元素連接符
arr.join(' ');  //=>"1 2 3" 以空格作為連接符
arr.join('|');  //=>"1|2|3" 以‘|’作為連接符

reverse()
Array.reverse()該方法將數組中的的元素顛倒順序，在原數組上進行操作。方法返回值為對原來數組的引用。

var arr = [1, 2, 3];
arr.reverse().join(); //=>"3,2,1" ,並且現在arr為[3,2,1]

sort()
Array.sort([compareFunction])該方法將數組中的元素排序並返回對原來數組的引用。不傳遞參數調用時，預設按照字母順序排序。

var fruits = ['banana', 'cherry', 'apple'];
fruits.sort().join();  //=>apple,banana,cherry

當按照其他方式排序時，就要提供一個比較函數compareFunction。該函數要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：

• 若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
• 若 a 等於 b，則返回 0。
• 若 a 大於 b，則返回一個大於 0 的值。

var s = [33, 666, 12, 5];
s.sort();                 //字母順序：12,33,5,666
s.sort(function (a, b) {  //數字順序：5,12,33,666
    return a - b;
});

如果要排序的數組元素包含undefined，它們會被排到數組尾部。

concat()
Array.concat(arr1[,arr2,...])該方法用於連接兩個或多個數組並返回一個新數組，不會改變現有數組本身。

var a = [1, 2];
a.concat(4, 5);           //=>[1,2,4,5]     連接每一個參數值 
a.concat([4, 5]);         //=>[1,2,4,5]     連接一個數組 
a.concat([4, 5], [6, 7]); //=>[1,2,4,5,6,7] 連接多個數組 

slice()
Array.slice(start[,end])該方法用來從已有的數組返回選定的元素，返回一個新的數組。兩個參數分別指定要選定元素的開始位置和結束位置。

• start參數表示從什麼位置開始取。如果是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
• end是一個可選參數。規定從何處結束選取，但不包括該下標元素。如果沒有指定該參數，那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那麼它規定的是從數組尾部開始算起的元素。

var a = [1, 2, 3, 4, 5];
a.slice(0, 3);     //返回[1,2,3]
a.slice(3);        //返回[4,5]
a.slice(1, -1);    //返回[2,3,4]
a.slice(-3, -2);   //返回[3]

splice()
Array.splice(index,count[, item1[, item2[, ...]]])該方法用來向數組中添加或刪除元素，並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。返回被刪除的元素。該方法會改變原始數組。

• index參數代表要添加或刪除元素的索引。
• count參數代表要從數組中刪除的元素個數。如果省略，從index起點到數組結尾的元素全刪除。
• item1,item2,...從第三個參數開始是可選參數。代表向數組添加的新元素。

var names = ["George", "Thomas"];
names.splice(1, 0, "John");  //在索引為1的地方插入一個新元素
names.splice(0, 1, "Tom");   //將第一個元素'George'替換成'Tom'

splice()與slice()方法，一個字母之差但是功能完全不同，註意區別使用。

push()和pop()
Array.push(element1,element2,...)該方法用來向數組的末尾添加一個或多個元素，並返回新的長度。
Array.pop()方法用來刪除數組的最後一個元素，減小數組長度，返回刪除的元素值。

組合push()和pop()能夠讓JavaScript數組實現先進後出的棧功能：push()入棧、pop()出棧。

var stack = [];      //空棧
stack.push(1, 2);    //stack：[1,2]      
stack.pop();         //stack：[1]        
stack.push(3);       //stack：[1,3]
stack.pop();         //stack：[1]
stack.push([4, 5]);  //stack：[1,[4, 5]]
stack.pop();         //stack：[1]
stack.pop();         //stack：[]

unshift()和shift()
Array.unshift(element1,element2,...)該方法可向數組的開頭添加一個或更多元素，並返回新的長度。
Array.shift()方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。如果數組為空，shift()不進行任何操作，返回undefined。

這兩個方法行為非常類似於push()和pop()。不一樣的是，這兩個方法是在數組頭部操作。

var arr = [3, 4];
arr.unshift(1,2);   // arr：[1,2,3,4]
arr.shift();        // arr：[2,3,4] 

toString()和toLocalString()
數組對象和普通對象一樣擁有toString()方法。該方法會將數組元素轉化為字元串，用逗號把生成的字元串連接起來，形成一個字元串。返回值與沒有參數的join()方法返回的字元串相同。

[1, 2, 3].toString();        //"1,2,3"
["a", "b", "c"].toString();  //"a,b,c"
[1, [2, 'c']].toString();    //"1,2,c"

toLocalString()是toString()的本地化方法。

ECMAScript 5中定義了9個新的數組方法來遍歷，映射，過濾，檢測，簡化和搜索數組。有了這些方法就不用利用for迴圈來遍曆數組了。

forEach()
Array.forEach(callback[, thisArg])方法用來從頭致尾遍曆數組，為每個元素調用回調方法。對於稀疏數組，不存在的元素不調用回調方法。

• callback參數就是在數組每一項上執行的函數，接收三個參數：數組元素、元素索引和數組本身。
• thisArg是可選參數，用來當作callback函數內this的值的對象。如果省略了thisArg參數,或者賦值為null或 undefined，則 this 在非嚴格模式下將是全局對象，嚴格模式下為 undefined。

下麵看個綜合例子：以數組元素為半徑，計算所有圓的面積。

var numbers = [5, 6];  // Define an array.
var obj = {
    showResults: function(value, index,array) {
        var squared = this.calcSquare(value);
        document.write("value: " + value);
        document.write(" index: " + index);
        document.write(" squared: " + squared);
        document.write("<br />");
    },
    calcSquare: function(x) { return x * x }
};
numbers.forEach(function(value, index) { this.showResults(value, index) }, obj);
// Output:
//  value: 5 index: 0 squared: 25
//  value: 6 index: 1 squared: 36

註意：沒有辦法中止或者跳出forEach迴圈，除了拋出一個異常。它總是返回undefined，即沒有返回值。

map()
Array.map(callback[, thisArg])方法和forEach()同樣是用來遍曆數組，為每個元素執行回調方法。該方法參數與forEach()方法參數一致，不再贅述。但是傳給map()的函數應該有返回值。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt); //求數組中每個元素的平方根
/* roots的值為[1, 2, 3], numbers的值仍為[1, 4, 9] */

filter()
Array.filter(callback[, thisArg])方法用來過濾數組元素，將符合規則的元素組成一個新數組返回，不會改變原數組。callback參數就是用來測試數組中元素的方法，返回true表示通過測試。

var arr = [1, 2, 3, 4, 5];
var res = arr.filter(function (value, index, array) {
    return value > 3;  //過濾掉小於等於3的元素
});
alert(res.toString()); //=> 4,5

對其非稠密數組，壓縮刪除undefined和null元素，可以這樣使用filter()：

arr.filter(function (value) { return value != undefined && value != null; });

every()和some()
Array.every(callback[, thisArg])該方法用來測試數組元素是否都通過了指定函數的測試。
Array.some(callback[, thisArg])該方法用來測試數組某些元素是否通過了指定函數的測試。
這兩個方法就是數組的邏輯判斷。它們對數組元素調用指定方法，返回true或false。

var arr = [1, 2, 3, 4, 5];
arr.every(function (value) { return value < 10; }); //=>true 所有元素值<10
arr.every(function (value) { return value % 2 == 0; }); //false 並非所有元素都為偶數
arr.some(function (value) { return value % 2 == 0; }); //=>true 數組元素包含偶數
arr.some(isNaN); //=>false 數組不包含非數值元素

註意：當every()和some()已確認該返回什麼值的時候就會停止遍曆數組。

reduce()和reduceRight()
Array.reduce(callback[, initialValue])該方法會針對數組中每個元素調用指定回調函數，將回調函數的返回值作為累積，然後以參數的形式傳遞到下個元素的回調方法中。

• callback參數是數組元素要執行的回調函數。最多可接收4個參數：之前元素累積值、當前元素值、元素索引、數組本身。
• initialValue是可選參數，表示元素最開始調用回調函數傳入的初始值。如果預設該參數，它會使用數組第一個元素作為初始值，這樣數組就會少迭代一次。

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (previous, current, index, array) {
    return previous + current;
}, 5);
var max = arr.reduce(function (previous, current, index, array) {
    return previous > current ? previous : current;
});
console.log(sum); //=>15  求和
console.log(max); //=>4   求最大值

利用reduce()可以輕鬆實現二維數組的扁平化：

var matrix = [ [1, 2], [3, 4], [5, 6] ];
var flatten = matrix.reduce(function (previous, current) {
  return previous.concat(current);
});
console.log(flatten); //=> [1, 2, 3, 4, 5, 6]

Array.reduceRight(callback[, initialvalue])方法的用法與reduce()方法一致，唯一區別是該方法按元素索引降序處理元素。

indexOf()和lastIndexOf()
Array.indexOf(searchvalue[, fromIndex])方法用來搜索數組中給定值的元素，並返回該元素的索引，如果找不到指定的元素則返回-1。indexOf()從數組頭至尾開始搜，Array.lastIndexOf(searchvalue[, fromIndex])則相反，從數組尾部為起點開始搜。

• searchvalue參數代表要搜索的元素值。
• fromindex是可選參數，表示檢索的起始位置。其值可以為字元串數值；填入字元自動忽略，預設為0。

var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "x")); //=> 1 "x"被忽略,用0代替
console.log(data.indexOf(5, "3")); //=> 4  從3號位開始搜索

大多數瀏覽器都支持以上方法。針對低版本IE6-IE8瀏覽器相容性問題，可通過Array原型擴展實現以上方法。例如forEach方法：

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (callback, thisArg) {
      //TODO
    };
}

8.數組類型

數組是具有特殊行為的對象。開發中可能會遇到這樣的情況：給定一個未知對象，判斷它是否為數組對象。ECMAScript 5版本中可以用Array.isArray()方法鑒別。

console.log(Array.isArray([])); //=> true
console.log(Array.isArray({})); //=> false

在ECMAScript 5版本以前沒有Array.isArray()這個方法，typeof可解決大部分的數據類型判斷但是在這卻幫不上忙。

instanceof操作符可以檢測，但有局限性，只能作用於單頁面的情形。

console.log([] instanceof Array);  //=> true
console.log({} instanceof Array);  //=> false

當頁面中存在子頁面iframe時，在子頁面中聲明一個數組object，並將其賦值給父頁面的一個變數，這時判斷該變數：object instanceof Array會返回false。原因是數組是引用類型，在賦值過程中，傳遞的是引用地址。但是每個頁面都有自己的一套全局對象，並且每個全局對象有自己的構造函數。object是子頁面Array對象，傳遞到父頁面，在父頁面判斷時卻是以父頁面的Array對象為標準。

ECMAScript 3版本中，檢測對象是否為數組的isArray()可以這樣寫：

var isArray = Array.isArray() || function isArray(arg) {
    return typeof arg === 'object' &&  //是否為對象
        object.length === 'number' &&  //驗證length屬性
    Object.prototype.toString.call(arg) === '[object Array]'; //判斷基本類型*
}

根據數組的一些特性來判斷，上面一段代碼也正是ES5中Array.isArray()方法的實現形式。

9.類數組對象

通常把一個具有與數組相仿屬性的常規對象叫做“類數組”對象，即具有length屬性和對應非負正整數屬性。類數組對象不能直接調用數組的方法，但可以數組的形式遍歷。

//定義一個類數組對象
var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
//當作數組遍歷
for (var i = 0; i < obj.length; i++) {
    console.log(obj[i]);
}

JavaScript函數體中Arguments對象是一個類數組對象。一些DOM方法也返回類數組對象，比如
document.getElementsByTagName()。

可以用下麵的方法檢查對象是否為類數組：

function isArrayLike(o) {
    if (o &&                                //判斷o非null，undefined等
        typeof o === 'object' &&            //o是對象
        isFinite(o.length) &&               //o.length是有限數
        o.length > 0 &&                     //o.length是非負數
        o.length < 4294967296 &&            //o.length小於2^32
        o.length === Math.floor(o.length))  //o.length是整數
        return true;
    else
        return false;
}

ES5版本中，所有Array數組方法都是通用的，類數組對象上同樣適用。類數組對象沒有繼承至Array.prototype不能直接調用，但可以通過Function.call方法調用：

var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
console.log(Array.prototype.join.call(obj, '|'));  //=> a|b|c
var arr = Array.prototype.map.call(obj, function (value) {
    return value.toUpperCase();
});
console.log(arr.join); //=> A,B,C   此時arr已是真正的數組

10.參考與擴展

本篇內容源自我對《JavaScript權威指南》第7章 數組 章節的閱讀總結和代碼實踐。總結的比較粗糙，你也可通過原著或MDN更深入瞭解數組。

[1] David Flanagan，JavaScript權威指南(第6版)
[2] MDN，JavaScript 參考文檔 - Array - JavaScript | MDN

作者：gao-yang

出處：http://www.cnblogs.com/gao-yang/p/5829460.html

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。