JavaScript配列とloops_javascriptスキルの詳しい説明

配列は、要素を順序付けて組み合わせたものです。 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 ループを使用するのが最も一般的な方法です。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var 動物 = new Array("猫", "犬", "クジラ", "アザラシ");
var AnimalString = "";
for (var i = 0; i
動物文字列 = 動物[i] " ";
}
アラート(animalString);

ディスカッション:

for ループを使用して、配列の各要素にアクセスできます。配列は 0 から始まり、配列プロパティの長さはループの終了を設定するために使用されます。

2.

の順序で値を保存およびアクセスします。

問題: 保存された方法で順次アクセスできるように値を保存したい。

解決策:

受信した順序で値を保存してアクセスするには、先入れ先出し (FIFO) キューを作成します。 JavaScript Array オブジェクトの Push メソッドを使用して項目をキューに追加し、shift を使用して項目を取得します。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
// 新しい配列を作成します
var queue = new Array();

// 3 つのアイテムをプッシュ
Queue.push("最初");
Queue.push("2 番目");
Queue.push("3 番目");

// 2 つのエントリを取得します
アラート(queue.shift());
アラート(queue.shift());
アラート(キュー);

ディスカッション:

配列プッシュ メソッドは、新しい配列要素を作成し、それを配列の末尾に追加します。

コードをコピーします コードは次のとおりです:

queue.push("first");

要素がプッシュされるたびに、配列要素の数が増加します。

Array シフト メソッドは、配列の先頭から配列要素を抽出し、配列から削除して、その要素を返します。

コードをコピーします コードは次のとおりです:

var elem = queue.shift();

シフト操作は項目を返すだけでなく配列も変更するため、シフト操作の要素ごとに配列要素がデクリメントされます。

3. 逆の順序で値を保存およびアクセスします

問題: 逆の順序で値にアクセスし、最後に保存された値に最初にアクセスする方法 (後入れ先出し (LIFO) スタック) で値を保存したいと考えています。

解決策:

値を逆の順序で保存するには、LIFO スタックを作成します。 JavaScript Array オブジェクトの Push メソッドを使用して項目をスタックに追加し、pop メソッドを使用して項目を取得します:

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
// 新しい配列を作成します
var stack = new Array();

// 3 つのアイテムをプッシュ
stack.push("first");
stack.push("2番目");
stack.push("3 番目");

// 2 つの項目をポップアップします
alert(stack.pop()); // 3 番目の項目を返します
alert(stack.pop()) // 2 番目の項目を返します
alert(stack) // 最初の項目を返します

ディスカッション:

スタックも配列であり、新しく追加された各要素はスタックの最上位にあり、後入れ先出しの順序で取得されます。

配列プッシュ メソッドは、新しい要素を作成し、それを配列の末尾に追加します。

コードをコピー コードは次のとおりです:

stack.push("最初");

要素がプッシュされるたびに、配列要素の数が増加します。

Array Pop メソッドは、配列の末尾から配列要素を抽出し、配列から削除して、その要素を返します。

コードをコピー コードは次のとおりです:

var elem = stack.pop();

要素がポップされるたびに、ポップによって配列も変更されるため、配列要素数は減分されます。

4. 配列

内を検索します。

質問: 配列内の特定の値を検索し、見つかった場合は配列要素のインデックスを取得したいと考えています。

解決策:

新しい (ECMAScript 5) Array オブジェクト メソッド indeOf および lastIndexOf を使用します。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var Animals = new Array("犬", "猫", "アザラシ", "ゾウ", "ライオン");
alert(animals.indexOf("elephant")); // 3
を出力します。 alert(animals.indexOf("seal", 2)); // 2
を出力します。

ブラウザは、indexOf と lastIndexOf の両方をサポートする場合がありますが、これは ECMAScript 5 バージョンでのみ正式化されています。どちらのメソッドも検索値を受け入れ、その値が配列内の各要素と比較されます。値が見つかった場合、両方のメソッドは配列要素にインデックスを返します。値が見つからない場合は、-1 が返され、indexOf は見つかった最初の要素を返し、lastIndexOf は見つかった最後の要素を返します。

参照:

すべてのブラウザがindexOf と lastindexOf をサポートしているわけではありません。この関数の解決策は次のとおりです。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (elt/*, from*/) {
            var len = this.length >>> 0;
            var from = 数値(引数[1]) || 0;
            から = (

if (                 from = len;
            }

for (; from < len; from ) {
                if (from this && this[from] === elt) {
                    から戻ります;
                }
            }

return -1;
        }
    }

5、对每个数字元素应用一関数数

問題: 1 つの関数を使用して数値の値を検査することを想定しています。十分な条件が満たされる場合は、その関数が置き換えられます。

解法案：

各メソッドに新しい ECMAScript 5 配列オブジェクトを使用します。来针对每数集合元素都绑定一回调関数:

复制代码代码如下:

<スクリプトタイプ="text/javascript">
    関数 replaceElement(要素、インデックス、配列) {
        if (要素 == "ab") {
            配列[インデックス] = "**";
        }
    }
var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");

    //对每数组元素应用関数数
    charSets.forEach(replaceElement)
    アラート(charSet); // 打印**,bb,cd,**,cc,**,dd,**

讨论：

各メソッドは 1 つのパラメータを受け取ります。このパラメータは関数です。この関数には、それ自体に 3 つのパラメータがあります: 数要素、要素のインデックス、および数組。

参见：

ほとんどのデバイスはすべて forEach をサポートします。ただし、サポートされていないデバイスについては、Array.prototype プロパティを使用して forEach を模倣できます。

复制代码代码如下:

<スクリプトタイプ="text/javascript">

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

var thisp = argument[1];             for (var i = 0; i                 if (私はこれにいます) {
                    fun.call(thisp, this[i], i, this);
                }
            }
        };
    }

6. フィルターされた配列

を作成します。

質問: 配列内の要素の値をフィルターし、結果を新しい配列に代入したいと考えています。

解決策:

Array オブジェクトのフィルター メソッドを使用します:

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数removeChars(要素、インデックス、配列) {
戻り要素 !== "**";
}
var charSets = new Array("**", "bb", "cd", "**", "cc", "**", "dd", "**");
var newArray = charSets.filter(removeChars);
アラート(newArray); // bb,cd,cc,dd

ディスカッション:

filter メソッドは ECMAScript 5 で新しく追加されたメソッドで、配列の各要素にコールバック関数を適用します。フィルター メソッドにパラメーターとして渡された関数は、配列要素のテストの結果に基づいて、ブール値 (true または false) を返します。この戻り値は、配列要素が新しい配列に追加されるかどうかを決定します。関数が true を返した場合は追加され、それ以外の場合は追加されません。

参照:

フィルタメソッドをサポートしていないブラウザのシミュレーション実装の場合:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
If (!Array.prototype.filter) {
Array.prototype.filter = function (fun/*, thisp*/) {
var len = this.length >>>
If (typeof fun != "関数") {
throw new TypeError();
}

var res = new Array();
var thisp = argument[1];
for (var i = 0; i If (私はこれにいます) {
var val = this[i] // fun を配置するとこれが変更されます
; If (fun.call(thisp, val, i, this)) {
res.push（val）;
}
}
}

応答を返す;
};
}

7. 配列の内容を確認します

問題: 配列が特定の条件を満たしていることを確認したい。

解決策:

Array オブジェクトの each メソッドを使用して、指定された条件の各要素を確認します。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 testValue(要素、インデックス、配列) {
var re = /^[a-zA-Z] $/;
return re.test(element);
}
var elemSet = new Array("**", 123, "abc", "-", "AAA");
alert(elemSet.every(testValue));

ディスカッション:

Array オブジェクトの each メソッドと some メソッドはどちらも最新の ECMAScript 5 Array メソッドです。違いは、every メソッドを使用する場合、関数が false 値を返す限り、処理は終了し、メソッドは false を返すことです。 。 some メソッドは、コールバック関数が true を返すまで、各配列要素のテストを続けます。現時点では、他の要素は検証されず、このメソッドは true を返します。コールバック関数がすべての要素をテストし、いつでも true を返さない場合、一部のメソッドは false を返します。

参照:

一部をサポートしていないブラウザの実装方法:

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
If (!Array.prototype.some) {
Array.prototype.some = function (fun/*, thisp*/) {
var i = 0,
len = this.length >>>
If (typeof fun != "関数") {
throw new TypeError();
}

var thisp = 引数[1];
for (; i もし（私がこの中にいるなら
&& fun.call(thisp, val, i, this)) {
true を返します
}
}

false を返します;
};
}

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

var thisp = 引数[1];
for (var i=0; i もし（私がこの中にいるなら
&& fun.call(thisp, val, i, this)) {
false を返します
}
}

true を返します;
};
}