JavaScript數(shù)組和循環(huán)詳解

更新時(shí)間：2015年04月27日 11:57:03 投稿：junjie

這篇文章主要介紹了JavaScript數(shù)組和循環(huán)詳解,本文講解了循環(huán)遍歷數(shù)組、按順序存儲和訪問值、以相反的順序存儲和訪問值、在數(shù)組中搜索等內(nèi)容,需要的朋友可以參考下

數(shù)組是元素的一個(gè)有序組合。在JavaScript中，數(shù)組可以使用正式的對象表示法來創(chuàng)建，或者可以使用直接量表示法來初始化。

var arrObject = new Array("val1", "val2"); // 作為對象的數(shù)組

var arrLiteral = ["val1", "val2"]; // 數(shù)組直接量

　　對于開發(fā)者來說，這沒有區(qū)別：在直接量和對象上都可以調(diào)用一個(gè)Array方法。對于JavaScript引擎來說，每次訪問數(shù)組直接量的時(shí)候，必須重新解釋它，特別是在一個(gè)函數(shù)中使用它的時(shí)候。

　　使用new運(yùn)算符來創(chuàng)建一個(gè)新的Array對象：

復(fù)制代碼代碼如下:

var arrObject = new Array();

　　也可以創(chuàng)建帶有某些值的一個(gè)新數(shù)組：

復(fù)制代碼代碼如下:

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

　　JavaScript中的數(shù)組是從0開始索引的，這意味著，第一個(gè)元素的索引是0，最后一個(gè)元素是數(shù)組的長度減去1。

1、循環(huán)遍歷數(shù)組

　　問題：想要很容易地訪問數(shù)組的所有元素。

　　解決方案：

　　要訪問一個(gè)數(shù)組，最常用的方法是使用for循環(huán)：

復(fù)制代碼代碼如下:

<script type="text/javascript">

    var animals = new Array("cat", "dog", "whale", "seal");

    var animalString = "";

    for (var i = 0; i < animals.length - 1; i++) {

        animalString += animals[i] + " ";

    }

    alert(animalString);

</script>

　討論：

　　for循環(huán)可以用來訪問數(shù)組的每一個(gè)元素。數(shù)組從0開始，而且數(shù)組屬性length用來設(shè)定循環(huán)結(jié)束。

2、按順序存儲和訪問值

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

　　解決方案：

　　要按照接受值的順序來存儲和訪問值，創(chuàng)建一個(gè)先進(jìn)先出（FIFO）的隊(duì)列。使用JavaScript Array對象的push方法，向隊(duì)列添加項(xiàng)，并且用shift來獲取項(xiàng)：

復(fù)制代碼代碼如下:

    // 壓入3個(gè)條目
    queue.push("first");
    queue.push("second");
    queue.push("third");

    // 獲取兩個(gè)條目
    alert(queue.shift());
    alert(queue.shift());
    alert(queue);
</script>

討論：

　　Array push方法創(chuàng)建一個(gè)新的數(shù)組元素，并且將其添加到數(shù)組的末尾：

復(fù)制代碼代碼如下:

queue.push("first");

　　每次壓入一個(gè)元素，數(shù)組元素的計(jì)數(shù)自增。

　　Array shift方法從數(shù)組前面提取數(shù)組元素，將其從數(shù)組中刪除，并且返回該元素：

復(fù)制代碼代碼如下:

var elem = queue.shift();

　　對于每一個(gè)shift操作的元素，數(shù)組元素會(huì)自減，因?yàn)閟hift除了返回該項(xiàng)，還會(huì)修改數(shù)組。

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

　　問題：想要以一種方式來存儲值，即以相反的順序訪問值，先訪問最近存儲的值，也就是一個(gè)后進(jìn)先出（LIFO）的棧。

　　解決方案：

　　要以相反的順序存儲值，創(chuàng)建一個(gè)LIFO棧。使用JavaScript Array對象的push方法來想棧添加項(xiàng)，使用pop方法來獲取項(xiàng)：

復(fù)制代碼代碼如下:

    // 壓入3個(gè)條目
    stack.push("first");
    stack.push("second");
    stack.push("third");

    // 彈出兩個(gè)條目
    alert(stack.pop()); // 返回第三個(gè)條目
    alert(stack.pop()); // 返回第二個(gè)條目
    alert(stack); // 返回第一個(gè)條目
</script>

討論：

　　棧也是一個(gè)數(shù)組，其中每個(gè)新添加的元素位于棧的頂部，并且按照后進(jìn)先出的順序獲取。

　　Array push方法創(chuàng)建一個(gè)新的元素，并將其添加到數(shù)組的尾部：

復(fù)制代碼代碼如下:

stack.push("first");

每次壓入元素的時(shí)候，數(shù)組元素的計(jì)數(shù)都會(huì)自增。

　　Array pop方法從數(shù)組的尾部提取數(shù)組元素，將其從數(shù)組中移走，并返回元素：

復(fù)制代碼代碼如下:

var elem = stack.pop();

每次彈出一個(gè)元素的時(shí)候，數(shù)組元素計(jì)數(shù)會(huì)自減，因?yàn)閺棾鲆残薷牧藬?shù)組。

4、在數(shù)組中搜索

　　問題：想要在數(shù)組中搜索一個(gè)特定值，如果找到的話，獲取該數(shù)組元素的索引。

　　解決方案：

　　使用新的（ECMAScript 5）Array對象方法indeOf和lastIndexOf：

復(fù)制代碼代碼如下:

<script type="text/javascript">

    var animals = new Array("dog", "cat", "seal", "elephant", "lion");

    alert(animals.indexOf("elephant")); // 打印出 3

    alert(animals.indexOf("seal", 2)); // 打印出 2

</script>

盡管瀏覽器中有時(shí)候?qū)ndexOf和lastIndexOf都是支持的，但是，這只是ECMAScript 5的版本中正式化了。這兩個(gè)方法都接受一個(gè)搜索值，然后，將其與數(shù)組中的每個(gè)元素比較。如果找到了該值，兩個(gè)方法都返回該數(shù)組元素的一個(gè)索引。如果沒有找到值，返回-1.indexOf返回找到的第一個(gè)元素，lastIndexOf返回找到的最后一個(gè)元素。

　　參見：

　　并非所有的瀏覽器都支持indexOf和lastindexOf，針對這一函數(shù)的解決方案：

復(fù)制代碼代碼如下:

            if (from < 0) {
                from += len;
            }

            for (; from < len; from++) {
                if (from in this && this[from] === elt) {
                    return from;
                }
            }

            return -1;
        }
    }
</script>

5、對每個(gè)數(shù)字元素應(yīng)用一個(gè)函數(shù)

　　問題：想要使用一個(gè)函數(shù)來檢查一個(gè)數(shù)組值，如果滿足給定的條件，就替換它。

　　解決方案：

　　使用新的ECMAScript 5 Array對象的forEach方法，來針對每個(gè)數(shù)組元素都綁定一個(gè)回調(diào)函數(shù)：

復(fù)制代碼代碼如下:

    var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");
    //對每個(gè)數(shù)組元素應(yīng)用函數(shù)
    charSets.forEach(replaceElement)
    alert(charSets); // 打印出**,bb,cd,**,cc,**,dd,**
</script>

討論：

　　forEach方法接受一個(gè)參數(shù)，這個(gè)參數(shù)是個(gè)函數(shù)。該函數(shù)自身有3個(gè)參數(shù)：數(shù)組元素，元素的索引和數(shù)組。

　　參見：

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

復(fù)制代碼代碼如下:

            var thisp = arguments[1];
            for (var i = 0; i < len; i++) {
                if (i in this) {
                    fun.call(thisp, this[i], i, this);
                }
            }
        };
    }
</script>

6、創(chuàng)建一個(gè)過濾后的數(shù)組

　　問題：想要過濾一個(gè)數(shù)組中的元素的值，并且把結(jié)果賦給一個(gè)新的數(shù)組。

　　解決方案：

　　使用Array對象的filter方法：

復(fù)制代碼代碼如下:

<script type="text/javascript">

    function removeChars(element, index, array) {

        return element !== "**";

    }

    var charSets = new Array("**", "bb", "cd", "**", "cc", "**", "dd", "**");

    var newArray = charSets.filter(removeChars);

    alert(newArray); // bb,cd,cc,dd

</script>

討論：

　　filter方法是ECMAScript 5新添加的方法，該方法將一個(gè)回調(diào)函數(shù)應(yīng)用于每一個(gè)數(shù)組元素。作為參數(shù)傳遞給filter方法的函數(shù)返回一個(gè)布爾值，true或false，根據(jù)測試數(shù)組元素的結(jié)果來返回。這個(gè)返回值決定了該數(shù)組元素是否添加到一個(gè)新的數(shù)組中，如果函數(shù)返回true，將會(huì)添加；否則，將不會(huì)添加。

　　參見：

　　對于不支持filter方法的瀏覽器的模擬實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

            return res;
        };
    }
</script>

7、驗(yàn)證數(shù)組內(nèi)容

　　問題：想要確保一個(gè)數(shù)組滿足某個(gè)條件。

　　解決方案：

　　使用Array對象的every方法來檢查給定條件的每個(gè)元素。

復(fù)制代碼代碼如下:

<script type="text/javascript">

    function testValue(element, index, array) {

        var re = /^[a-zA-Z]+$/;

        return re.test(element);

    }

    var elemSet = new Array("**", 123, "abc", "-", "AAA");

    alert(elemSet.every(testValue));

</script>

　　討論：

　　Array對象的every和some方法都是最新的ECMAScript 5 Array方法，不同之處在于當(dāng)使用every方法的時(shí)候，只要該函數(shù)返回一個(gè)false值，處理就會(huì)結(jié)束，并且該方法返回false。而some方法將繼續(xù)測試每一個(gè)數(shù)組元素，知道回調(diào)函數(shù)返回true。此時(shí)不再驗(yàn)證其他的元素，該方法返回true。如果回調(diào)函數(shù)測試了所有的元素，并且任何時(shí)候不會(huì)返回true，some方法返回false。

　　參見：

　　對于不支持every和some的瀏覽器的實(shí)現(xiàn)方式：

復(fù)制代碼代碼如下:

            var thisp = arguments[1];
            for (; i < len; i++) {
                if (i in this
                    && fun.call(thisp, val, i, this)) {
                    return true
                }
            }

            return false;
        };
    }

    if (!Array.prototype.every) {
        Array.prototype.every = function (fun/*, thisp*/) {
            var len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

            var thisp = arguments[1];
            for (var i=0; i < len; i++) {
                if (i in this
                    && fun.call(thisp, val, i, this)) {
                    return false
                }
            }

            return true;
        };
    }
</script>

您可能感興趣的文章: