JavaScriptの配列(Aray)の詳細

ECMAScriptの配列は他の言語の配列とかなり違います.ECMAScriptの配列にもシリアルテーブルがありますが、あなたのデータはどれでも保存できます.ECMAScript配列のサイズは動的に調整できます.    配列を作成する基本的な方法は2つあります.第一はArayコンストラクタを使用しており、以下の通りである.

 
  
 var colors = new Array(); 
  
 
 

    配列が保存する項目の数を知っていれば、構造関数にパラメータを伝えることもできますが、このパラメータは自動的にlength属性の値になります.

 
  
 var colors = new Array(20); 
  
 
 

    アレーに含まれるべき項目をArayコンストラクタにも送ることができます.コードで示します.

 
  
 var colors = new Array("red","blue"); 
  
 
 

    また、Arayコンストラクタを使用する場合はnewオペレータを省略することもできます.

 
  
 var colors = Array(20); 
  
 
 

    配列を作成する第二の方法は、配列字面量表示法を使用することである.配列の字面の量は、配列項目を含む四角い括弧のペアによって表され、複数の配列項目の間にコンマで区切られています.

 
  
 var color = ["red","blue"]; 
  
 var names = []; 
  
 var values = [1,2,]//IE8   3 ，  2 ，      
  
 
 

    オブジェクトと同様に、数字の字面量表示法を使用しても、Arayの構造関数は起動されません.
   配列の値を読み取り、設定する場合は、大かっこを使用し、対応する値の0に基づく数値索引を提供します.

 
  
 var colors = ["red","blue"]; //     
  
 alert(colors[0]); //red 
  
 colors[1] = "black" //   2  
  
 colors[2] = "brown" //   3 
  
 
 

    配列の項数は、そのlength属性に保存されています.この属性は常に0以上の数字を返します.

 
  
 var colors = ["red","blue"]; //     
  
 var names=[]; 
  
 alert(colors.length);        //3 
  
 alert(names.length)          //0 
  
 
 

    特に、配列のlength値は読み取り専用ではない.したがって、この値を設定することにより、配列の最後から項目を移動したり、配列に項目を追加したりすることができます.

 
  
 var colors = ["red","blue"]; 
  
 colors.length = 1; 
  
 alert(colors[1]); //undefined 
  
 
 

    length属性を利用して、配列の最後にデータを追加することもできます.

 
  
 var colors = ["red","blue"]; 
  
 colors[colors.length] = "black"; //   2   
  
 colors[colors.length] = "brown"; //   3   
  
 
 

1、検出配列
    ウェブページまたはグローバルスコープに対しては、instance ofオペレータを使用して行うことができます.

 
  
 if(value instanceof Array){ 
  
 　　//      
  
 } 
  
 
 

    instance ofオペレータの限界はグローバルスコープにあり、複数のフレームが含まれている場合、二つ以上のグローバル実行環境が存在する.この問題を解決するために、ECMAScript 5はAray.isAray()の方法を追加しました.次のように使います.

 
  
 if(Array.isArray(value)){ 
  
     //      
  
 } 
  
 
 

2、転化方法    配列を呼び出したtoString()メソッドは、配列内の各値の文字列でスティッチングされた1つのコンマ区切り文字列を返します.valueOf()を呼び出しても行列に戻りますか?以下の通りです

 
  
 var colors = ['red', 'blue', 'green']; 
  
 alert(colors.toString()); //red,blue,green 
  
 alert(colors.valueOf()); //red,blue,green 
  
 alert(colors)            //red,blue,green 
  
 
 

    配列継承のtoLocal String()、tistring()とvalueOf()の方法は、デフォルトではカンマ区切りの文字列で配列項目に戻ります.また、join()方法を使用すると、この文字列は異なる区切り記号を使用して構築され得る.join()メソッドは、1つのパラメータだけを受け入れます.すなわち、区切り記号として使用する文字列は、以下のようになります.

 
  
 var colors = ['red', 'blue', 'green']; 
  
 alert(colors.join(',')); //red,blue,green 
  
 alert(colors.join('|')); //red|blue|green 
  
 
 

    配列のいずれかの値がnullまたはundefiedである場合、この値はjoin()、toLocal String()、tistring()およびvalueOf()メソッドに戻り、結果は空の文字列で表される.
3、スタックの方法
Javascriptは、配列のためにPush()とpop()の動作を提供して、類似のスタックの挙動を実現します.
push()方法は、任意の数のパラメータを受信し、それらを配列の最後に1つずつ追加し、修正された配列の長さを返します.pop()メソッドは、配列の最後の項目を最後からオーバーフローさせ、配列のlength値を減らしてから、移動された項目を返します.

 
  
 var colors = new Array(); //     
  
 var count = colors.push("red", "blue"); //     
  
 alert(count); //2 
  
 count = colors.push("black"); //      
  
 alert(count); //3 
  
 var item = colors.pop(); //       
  
 alert(item); //"black" 
  
 alert(colors.length); //2 
  
 
 

4、行列の方法
スタックデータ構造のアクセス規則はLIFO(後進先出)であり、キューのアクセス規則はFIFO(先入先出)である.キューはリストの端にアイテムを追加し、先頭にアイテムを移動します.
shift()方法は、配列の最初の項目を除去し、アイテムを返します.配列のlength-1.Push()とshift()の方法を組み合わせて、行列を使うように配列を使うことができます.

 
  
 var colors = new Array(); 
  
 var count = colors.push("red", "blue"); 
  
 count = colors.push("black"); 
  
 alert(count); 
  
 var item = colors.shift(); //      
  
 alert(item); //"red" 
  
 alert(color.length); //2 
  
 
 

 ECMAScriptはまた、配列にunshift()の方法を提供しています.unshift()とshift()は、配列の先端に任意の項目を追加し、新しい配列の長さを返します.したがって、unshift()とShift()の方法を同時に使用すると、行列は反対の方向からアナログ化されます.すなわち、配列の先端に新しい項目を追加し、配列の端から項目を移動します. 

 
  
  var colors = new Array(); 
  
 var count = colors.push("red", "green"); 
  
 alert(count); //2 
  
 count = colors.unshift("black"); //      
  
 alert(count); //3 
  
 var item = colors.pop(); //       
  
 alert(item) //green 
  
 alert(colors.length) //2 
  
   
 

 5、並べ替え方法    配列には、直接並べ替えに使える2つの方法が存在します.reverse()とsort().reverse()メソッドは、反転配列の項目に従って並べ替えられます.

 
  
 var values = [2, 1, 3, 4, 5]; 
  
 values.reverse(); 
  
 alert(values); //5,4,3,2,1 
  
 
 

    デフォルトでは、sort()メソッドは昇順に配列項目を並べ、各項目のtoString()メソッドを呼び出し、文字列を比較して、並べ替えを決定します.配列の各項目が数値であっても、sort()メソッドの比較は文字列です.
 

 
  
 var values = [12, 11, 3, 4, 5]; 
  
 values.sort(); 
  
 alert(values); //12,11,3,4,5 
  
 
 

    一つの比較関数を通してパラメータとしてsort()法に渡すことができます.以下のとおりです

 
  
 function compare(value1, value2) { 
  
     if (value1 < value2) { 
  
         return -1 
  
     } else if (value1 > value2) { 
  
         return 1 
  
     } else { 
  
         return 0 
  
     } 
  
 } 
  
 var values = [0, 1, 5, 10, 15]; 
  
 values.sort(compare); 
  
 alert(values);    //0,1,5,10,15  
  
 
 

6、操作方法    ECMAScriptは配列の中で操作するために多くの方法を提供します.ここで、concat()方法は、現在の配列のすべての項目に基づいて新しい配列を作成することができる.

 
  
 var colors = ["red", "green", "blue"]; 
  
 var colors2 = colors.concat("yellow", ["black", "brown"]); 
  
 alert(colors); //red,green,blue 
  
 alert(colors2); //red,green,blue,yellow,black,brown 
  
 
 

    slice()方法は、現在の配列の1つまたは複数の項目に基づいて新しい配列を作成することができ、1つまたは2つのパラメータ、すなわち戻り値の開始位置および終了位置を受信することができる.一つのパラメータの場合、このパラメータ指定位置を現在の配列の最後までのすべての項目に返します.二つのパラメータは指定された位置に開始するすべての項目に戻ります.終了位置の項目は含まれません.slip()方法は元の配列に影響しないことに注意してください.

 
  
 var colors=["red","green","blue","black","brown"]; 
  
 var colors2=colors.slice(1); 
  
 var colors3=colors.slice(1,4); 
  
 alert(colors2); //green,blue,black,brown 
  
 alert(colors3); //green,blue,black 
  
 
 

    slice()メソッドの削除:任意の数の項目を削除してもいいです.2つのパラメータを指定するだけで、削除する最初の項目の位置と削除するエントリの数を指定します.
    slice()メソッド挿入:指定された位置に任意の数の項目を挿入できます.3つのパラメータを提供するだけで、開始位置、0(削除するエントリ数)と挿入する項目があります.
    slip()メソッドは、指定された位置に任意の数の項目を挿入し、任意の数の項目を同時に削除することができます.3つのパラメータを指定するだけで、開始位置と削除すべき件数と挿入すべき任意の数の項目を指定します.

 
  
 var colors = ["red", "green", "blue"]; 
  
 //   
  
 var removed = colors.slice(0, 1); //   1  
  
 var colors3 = colors.slice(1, 4); 
  
 alert(colors); //green,blue 
  
 alert(removed); //red 
  
 //   
  
 removed = colors.slice(1, 0，"yellow","orange"); //   1     
  
 alert(colors); //green,yellow,orange,blue 
  
 alert(removed); //    
  
 //   
  
 removed = colors.slice(1, 1,"red","purple"); //   1     
  
 alert(colors); //green,"red","purple",orange,blue 
  
 alert(removed); //"yellow" 
  
 
 

7、位置の方法    ECMAScript 5は、配列のための2つの位置方法を提供しています.indexOf()とlastIndexOf().両方の方法は、2つのパラメータを受信します.検索する項目と、検索開始点位置を示すインデックス(オプション)です.indexOf()メソッドは配列の先頭から順に検索し、lastIndexOf()方法は配列の最後から前へ検索します.    この2つの方法は、検索する項目の配列内の位置を返します.見つけられない場合は-1を返します.

 
  
 var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
  
 alert(numbers.indexOf(4)) //3 
  
 alert(numbers.lastIndexOf(4)) //5 
  
 alert(numbers.indexOf(4, 4)) //5 
  
 alert(numbers.lastIndexOf(4, 4)) //3 
  
 
 

8、反復方法
ECMAScript 5は配列のために5つの反復方法を定義しています.各方法は2つのパラメータを受け入れており、最初は反復の関数であり、2番目はその関数の作用領域オブジェクトである.
反復を行う関数は、3つのパラメータを受け入れます.最初は、行列内の反復を行う要素の値です.2番目は、行列が常に反復を行う要素の位置で、3番目は反復配列自体です.
    1.every()      配列内の各項目に対して指定された関数を実行します.各項目に対してtrueを返すと、trueを返します.      2.filter()       配列内の各項目に対して指定された関数を実行し、この関数はtrueの項目からなる行列を返します.      3.forEach()  配列内の各項目に対して指定された関数を実行します.この方法は戻り値がありません.    4.map()       配列内の各項目に対して与えられた関数を実行し、各関数が呼び出した結果からなる行列を返します.    5.そして()     配列内の各項目に対して指定された関数を実行します.この関数がどれかに対してtrueを返すと、trueを返します.    これらの反復方法がサポートするブラウザは、IE 9+,Firefox 2+,Safari 3+,Opera 9.5+,chromeがあります.    これらの方法では、最も似ているのはevery()とsome()であり、それらは、配列内のエントリがある条件を満たすかどうかを問い合わせるために使用される.every()にとって、入る関数は一つずつtrueに戻さなければなりません.この方法はtrueに戻ります.さもないと、彼はfalseに戻ります.そして、some()メソッドは、入力された関数が行列の中のいずれかにtrueを返すと、trueに戻ります.

 
  
 var num = [1,2,3,4,5,6,7,8,9]; 
  
 var everyResult = num.every(function(item, index, array) { 
  
     if(item > 2) { 
  
         return true; 
  
     } 
  
 }); 
  
 alert(everyResult); //false 
  
 var someResult = num.some(function(item) { 
  
     if(item > 2) { 
  
         return true; 
  
     } 
  
 }); 
  
 alert(someResult); //true 
  
 
 

    filter()は、指定された関数を用いて、戻る配列にある項目が含まれているかどうかを判定します.

 
  
 var num = [1,2,3,4,5,4,3,2,1]; 
  
 var filterResult = num.filter(function(item) { 
  
     if(item > 2) { 
  
         return true; 
  
     } 
  
 }); 
  
 alert(filterResult);  //[3,4,5,4,3] 
  
 
 

  map()も1つの配列を返しますが、この配列の各項目は、元の配列の対応する項で入力関数を実行した結果です. 

 
  
   var num = [1,2,3,4,5,4,3,2,1]; 
  
 var mapResult = num.map(function(item) { 
  
     if(item > 2) { 
  
         return true; 
  
     } 
  
 }); //[2,3,6,8,10,8,6,4,2] 
  
   
 

   forEach()は、配列内の各動作に着信する関数です.この方法は戻り値がなく,forサイクル反復配列を使用するのと本質的に同じである.

 
  
 var num = [1,2,3,4,5,4,3,2,1]; 
  
 num.forEach(function(item) { 
  
   //      
  
 }); 
  
 
 

9、帰合方法
ECMAScript 5に2つの方法が追加されました.reduceRight()とreduce().この2つの方法は、2つのパラメータを受け入れます.1つ目は、反復のための配列の関数です.この関数は、4つのパラメータがそれぞれ、前の値、現在の値、項目の索引、配列オブジェクトです.しかし、この関数の任意の値は、最初のパラメータとして次の項目に自動的に伝えられます.二つ目は、最初の関数の最初のパラメータとしての初期値です.

 
  
 var nums = [1,2,3,4,5]; 
  
 var sum = nums.reduce(function(prev, cur, index, array) { 
  
     return prev + cur; 
  
 }); 
  
 alert(sum);//15