JavaScript數組和循環詳解_javascript技巧-js教程-PHP中文網

陣列是元素的一個有序組合。在JavaScript中，陣列可以使用正式的物件表示法來創建，或者可以使用直接量表示法來初始化。

var arrObject = new Array("val1", "val2"); // 作為物件的陣列

var arrLiteral = ["val1", "val2"]; // 陣列直接量

　　對於開發者來說，這沒有差別：在直接量和物件上都可以呼叫一個Array方法。對於JavaScript引擎來說，每次存取陣列直接量的時候，必須重新解釋它，特別是在一個函數中使用它的時候。

　　使用new運算子來建立一個新的Array物件：

複製程式碼程式碼如下:

var arrObject = new Array();

　　也可以建立一個帶有某些值的一個新數組：

複製程式碼程式碼如下:

var arrObject = new Array("val1", "val2");

　　JavaScript中的陣列是從0開始索引的，這意味著，第一個元素的索引是0，最後一個元素是陣列的長度減去1。

1、循環遍歷數組

　　問題：想要輕鬆存取陣列的所有元素。

　　解：

　　要存取一個數組，最常用的方法是使用for迴圈：

複製程式碼程式碼如下:

　討論：

　　for迴圈可以用來存取陣列的每一個元素。陣列從0開始，而且陣列屬性length用來設定迴圈結束。

2、依序儲存與存取值

　　問題：想要以這樣一種方式來儲存值，可以按照儲存它們的方式來順序存取值；

　　解：

　　要依照接受值的順序來儲存和存取值，建立一個先進先出（FIFO）的佇列。使用JavaScript Array物件的push方法，為佇列新增項，並且用shift來取得項：

複製程式碼程式碼如下:

討論：

　　Array push方法建立一個新的陣列元素，並將其新增至陣列的末端：

複製程式碼程式碼如下:

queue.push("first");

　　每次壓入一個元素，數組元素的計數自增。

　　Array shift方法從數組前面提取數組元素，將其從數組中刪除，並且傳回該元素：

複製程式碼程式碼如下:

var elem = queue.shift();

　　對於每一個shift操作的元素，數組元素會自減，因為shift除了傳回該項，還會修改數組。

3、以相反的順序儲存和存取值

　　問題：想要以一種方式來儲存值，也就是以相反的順序存取值，先存取最近儲存的值，也就是一個後進先出（LIFO）的堆疊。

　　解：

　　要以相反的順序儲存值，建立一個LIFO棧。使用JavaScript Array物件的push方法來想堆疊新增項，使用pop方法來取得項目：

複製程式碼程式碼如下:

討論：

　　棧也是一個數組，其中每個新添加的元素位於棧的頂部，並且按照後進先出的順序獲取。

　　Array push方法建立一個新的元素，並將其加入到陣列的尾部：

複製程式碼程式碼如下:

stack.push("first");

每次壓入元素的時候，數組元素的計數都會自增。

　　Array pop方法從數組的尾部提取數組元素，將其從數組中移走，並返回元素：

複製程式碼程式碼如下:

var elem = stack.pop();

每次彈出一個元素的時候，陣列元素計數會自減，因為彈出也修改了陣列。

4、在陣列中搜尋

　　問題：想要在陣列中搜尋一個特定值，如果找到的話，取得該陣列元素的索引。

　　解：

　　使用新的（ECMAScript 5）Array物件方法indeOf和lastIndexOf：

複製程式碼程式碼如下:

儘管瀏覽器中有時候對indexOf和lastIndexOf都是支援的，但是，這只是ECMAScript 5的版本中正式化了。這兩個方法都接受一個搜尋值，然後，將其與數組中的每個元素進行比較。如果找到了該值，兩個方法都會傳回該陣列元素的一個索引。如果沒有找到值，則傳回-1.indexOf傳回找到的第一個元素，lastIndexOf傳回找到的最後一個元素。

　　參見：

　　並非所有的瀏覽器都支援indexOf和lastindexOf，針對此函數的解決方案：

複製程式碼程式碼如下:

    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (elt/*, from*/) {
            var len = this.length>>>> 0;
            var from = Number(參數[1]) || 0;
            從=（從

若（來自從 = len;
}

            for (; from                 if (from in this && this[from] === elt) {
                    自者所受；
                }
            }

            回 -1;
        }
    }
腳本>

5、對每個數字元素應用一個函數

問題：想要使用一個函數來檢查一個資料庫值，如果滿足給定的條件，就取代它。

解決方案：

使用新的ECMAScript 5 Array物件的forEach方法，來針對每個陣列元素都綁定一個回呼函數：

複製程式碼以下程式碼：

    函數replaceElement（元素，索引，陣列）{
        if (element == "ab") {
            陣列[索引] = "**";
        }
    }

    var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");
    //對每個倉庫元素套用函數
    charSets.forEach(replaceElement)
    警報（字元集）； // 印出**,bb,cd,**,cc,**,dd,**
腳本>

討論：

forEach方法接受一個參數，這個參數是一個函數。函數本身有3個參數：資料庫元素，索引元素和資料庫元素。

大多數瀏覽器都支援forEach。然而，對於那些不支援的瀏覽器，可以使用Array.prototype屬性來模擬forEach行為。

複製程式碼以下程式碼：

    if (!Array.prototype.forEach) {
        Array.prototype.forEach = function (fun/*, thisp*/) {
            var len = this.length>>>> 0;
            if (typeof fun != "函數") {
                以新的 TypeError();
            }

            var thisp = 參數[1];
            for (var i = 0; i                 若（我在此）{
                    fun.call(thisp, this[i], i, this);
                }
            }
        };
    }
腳本>

6、建立一個過濾後的陣列

　　問題：想要過濾一個陣列中的元素的值，並且把結果賦給一個新的陣列。

　　解：

　　使用Array物件的filter方法：

複製程式碼程式碼如下:

討論：

　　filter方法是ECMAScript 5新加入的方法，該方法將一個回呼函數應用於每個陣列元素。作為參數傳遞給filter方法的函數傳回一個布林值，true或false，根據測試數組元素的結果來傳回。這個回傳值決定了該數組元素是否加入到一個新的數組中，如果函數傳回true，將會被加；否則，將不會被添加。

　　參見：

　　對於不支援filter方法的瀏覽器的模擬實作：

複製程式碼程式碼如下:

7、驗證陣列內容

　　問題：想要確保一個陣列滿足某個條件。

　　解：

　　使用Array物件的every方法來檢查給定條件的每個元素。

複製程式碼程式碼如下:

　　討論：

　　Array物件的every和some方法都是最新的ECMAScript 5 Array方法，不同之處在於當使用every方法的時候，只要該函數傳回一個false值，處理就會結束，並且該方法傳回false。而some方法將繼續測試每一個數組元素，並知道回調函數回傳true。此時不再驗證其他的元素，該方法傳回true。如果回呼函數測試了所有的元素，並且任何時候不會回傳true，some方法回傳false。

　　參見：

　　對於不支援every和some的瀏覽器的實作方式：

複製程式碼程式碼如下: