JavaScript配列とサイクル

18985 ワード

JavaScript

配列は元素の規則的な組合せである.JavaScriptでは、配列は、正式なオブジェクト表現法を用いて作成することができ、または直接量表現法を用いて初期化することができます.

var arrObject = new Array("val1", "val2"); //        
var arrLiteral = ["val1", "val2"]; //

これは開発者にとっては、直接量と対象でArayメソッドを呼び出すことができます.JavaScriptエンジンにとっては、配列の直接量にアクセスするたびに、特に関数の中でそれを使用するときに、改めて解釈しなければならない.
new演算子を使用して新しいArayオブジェクトを作成します.

var arrObject = new Array();

いくつかの値を持つ新しい配列も作成できます.

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

JavaScriptの配列は0からインデックスされています.これは最初の要素のインデックスが0で、最後の要素が配列の長さから1を減算することを意味します.

1、巡回行列
問題:配列のすべての要素に簡単にアクセスしたいです.
ソリューション:
行列にアクセスするには、forループを使うのが一番一般的です.

<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ループは、配列の各要素にアクセスするために使用されます.配列は0から始まり、配列属性はlengthでループ終了を設定します.
2、順番に値を記憶し、アクセスする
問題:このようにして値を記憶したいですが、それらを記憶するように順番に値にアクセスできます.
ソリューション:
受信値の順序に従って値を格納し、アクセスするために、先入れ先出し(FIFO)のキューを作成します.JavaScript Arayオブジェクトのpsh方法を使用して、アイテムをキューに追加し、アイテムをshiftで取得します.

<script type="text/javascript">
    //       
    var queue = new Array();

    //   3   
    queue.push("first");
    queue.push("second");
    queue.push("third");

    //       
    alert(queue.shift());
    alert(queue.shift());
    alert(queue);
</script>

議論:
Aray push法は新しい配列要素を作成し、配列の最後に追加します.

queue.push("first");

毎回一つの要素を押し込むと、配列要素のカウントは自然に増加します.
配列要素を配列の前から抽出し、配列から削除し、この要素を返します.

var elem = queue.shift();

シフト毎に動作する要素に対して、配列要素は減少します.シフトはアイテムを返す以外に、配列も変更されます.
3、逆の順序で値を格納し、アクセスする
問題:値は逆の順序で値にアクセスして、最初に最近記憶されている値、つまり後進先(LIFO)のスタックにアクセスしたいです.
ソリューション:
値を逆の順序で保存するには、LIFOスタックを作成します.JavaScript Arayオブジェクトのpsh方法を使用してスタック追加項目を考え、pop方法を使用してアイテムを取得します.

<script type="text/javascript">
    //       
    var stack = new Array();

    //   3   
    stack.push("first");
    stack.push("second");
    stack.push("third");

    //       
    alert(stack.pop()); //        
    alert(stack.pop()); //        
    alert(stack); //        
</script>

議論:
スタックはまた、各新たに追加された要素がスタックの上部にあり、後進順に取得される配列である.
Aray push法は新しい要素を作成し、配列の末尾に追加します.

stack.push("first");

要素を押し込むたびに、配列要素のカウントは自動的に増加します.
Aray pop法は配列の末尾から配列要素を抽出し、配列から移動し、要素を返す.

var elem = stack.pop();

各要素をイジェクトするたびに、配列要素のカウントは減少します.イジェクトも配列を変更しました.
4、行列内で検索
問題:特定の値を配列内で検索したいです.見つけたら、配列要素の索引を取得します.
ソリューション:
新しい(ECMAScript 5)Arayオブジェクト方法indeOfとlastIndexOfを使用します.

<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>

ブラウザではindexOfとlastIndexOfがサポートされている場合がありますが、これはECMAScript 5のバージョンで正式化されています.これらの2つの方法はいずれも1つの検索値を受け入れて、それを配列内の各要素と比較します.この値が見つかった場合、両方の方法は配列要素のインデックスを返します.値が見つからない場合は、-1.indexOfを返します.見つけた最初の要素を返します.lastIndexOfは、見つけた最後の要素を返します.
参照:
すべてのブラウザがindexOfとlastindexOfをサポートしているわけではなく、この関数に対するソリューション:

<script type="text/javascript">
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (elt/*, from*/) {
            var len = this.length >>> 0;
            var from = Number(arguments[1]) || 0;
            from = (from < 0) ? Math.ceil(from) : Math.floor(from);

            if (from < 0) {
                from += len;
            }

            for (; from < len; from++) {
                if (from in this && this[from] === elt) {
                    return from;
                }
            }

            return -1;
        }
    }
</script>

5、各数値要素に関数を適用する
問題:与えられた条件を満たすと、行列値をチェックする関数を使用します.
ソリューション:
新しいECMAScript 5 ArayオブジェクトのforEach方法を使用して、各配列要素に対して一つのコールバック関数を結合します.

<script type="text/javascript">
    function replaceElement(element, index, array) {
        if (element == "ab") {
            array[index] = "**";
        }
    }

    var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");
    //           
    charSets.forEach(replaceElement)
    alert(charSets); //    **,bb,cd,**,cc,**,dd,**
</script>

議論:
forEach法はパラメータを受け入れています.このパラメータは関数です.この関数自体には3つのパラメータがあります.配列要素、要素の索引と配列です.
参照:
ほとんどのブラウザはforEachをサポートしています.しかし、サポートされていないブラウザに対しては、Aray.prototype属性を使用して、forEach挙動をシミュレートすることができる.

<script type="text/javascript">
    if (!Array.prototype.forEach) {
        Array.prototype.forEach = 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, this[i], i, this);
                }
            }
        };
    }
</script>

6、フィルタリングされた配列を作成します.
問題:配列の要素の値をフィルタリングし、結果を新しい配列に割り当てます.
ソリューション:
Arayオブジェクトのfilterを使用する方法:

<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によって新たに追加された方法であり、この方法は、各配列要素に対して一つのフィードバック関数を適用する.パラメータをfilter法に渡す関数としてブール値、trueまたはfalseを返し、テスト配列要素の結果に基づいて返します.この戻り値は、行列要素が新しい配列に追加されるかどうかを決定します.関数がtrueに戻ると、追加されます.追加されません.
参照:
filterメソッドをサポートしないブラウザに対するシミュレーションの実現:

<script type="text/javascript">
    if (!Array.prototype.filter) {
        Array.prototype.filter = function (fun/*, thisp*/) {
            var len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

            var res = new Array();
            var thisp = arguments[1];
            for (var i = 0; i < len; i++) {
                if (i in this) {
                    var val = this[i]; //   fun   this
                    if (fun.call(thisp, val, i, this)) {
                        res.push(val);
                    }
                }
            }

            return res;
        };
    }
</script>

7、配列内容を検証する
問題:行列がある条件を満たすようにしたいです.
ソリューション:
与えられた条件の各要素をArayオブジェクトのevery法を用いて調べた.

<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>

議論:
Arayオブジェクトのeveryとsomeメソッドは、最新のECMAScript 5 Aray方法であり、every方法を使用すると、この関数がfalse値を返すと処理が終了し、falseに戻るという点で異なる.そして、some方法は各配列要素をテストし続けます.フィードバック関数がtrueに戻ることを知っています.この時は他の要素を検証しないで、この方法はtrueに戻ります.コールバック関数がすべての要素をテストしたら、いつでもtrueに戻りません.そして、メソッドはfalseに戻ります.
参照:
everyとsomeがサポートされていないブラウザの実現方法:

<script type="text/javascript">
    if (!Array.prototype.some) {
        Array.prototype.some = function (fun/*, thisp*/) {
            var i = 0,
                len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

            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>

javaScript前解析