JavaScript Arayオブジェクトについて

12326 ワード

Aray配列
1.紹介
配列は値の規則的な集合である.各値は要素と呼ばれていますが、各要素は配列内に位置し、数字で表されています.インデックスと呼ばれています.JavaScript配列は無タイプであり、配列要素は任意のタイプであり、同じ配列の異なる要素も異なるタイプである可能性がある.『JavaScript権威ガイド(第六版)』
2.定義

 
  
 var names = new Array("  ", "  ", "  "); 
  
 //   
  
 var names = ["  ", "  ", "  "];

3.属性
length:配列内の要素長を表します.
4.例示的な方法
常用方法:
1)unshift():配列の頭に要素を挿入する
2)シフト():配列の最初の要素を削除して返します.
3)push():配列の最後に要素を挿入する
4)pop():配列の最後の要素を削除して返します.
4.1 concat():要素を配列に接続する.元のarrayを変更せずに、新しい配列パラメータを返します.
①value 1,value 2....valueN:任意の複数の値
戻り値:
新しい配列は元のArayと新しく加入した元素を含む.
例:

 
  
 var demoArray = ['a', 'b', 'c']; 
  
 var demoArray2 = demoArray.concat('e'); 
  
 console.log(demoArray); // => demoArray:['a','b','c']           
  
 console.log(demoArray2); // => ['a','b','c','e']

4.2 every():要素を順次巡回し、各要素がtrueパラメータであるかどうかを判断する:
①function(value,index,self){}:各要素はこの関数を使ってtrueかどうかを判断し、falseかを判断したら、すぐに巡回を終了します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
｛Boolean｝:各元素だけがtrueであるからtrueに戻ります.一つがfalseである限り、falseに戻ります.
例:

 
  
 var demoArray = [1, 2, 3]; 
  
 var rs = demoArray.every(function (value, index, self) { 
  
     return value > 0; 
  
 }); 
  
 console.log(rs); // => true

4.3 filter():要素を順次巡回して、条件に合う要素を含む新しい配列を返します.パラメータ:
①function(value,index,self){}:各要素はこの関数を順次呼び出して、条件に合う要素を含む新しい配列を返します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
条件に合う要素を含む新しい配列
例:

 
  
 var demoArray = [1, 2, 3]; 
  
 var rs = demoArray.filter(function (value, index, self) { 
  
     return value > 0; 
  
 }); 
  
 console.log(rs); // => [1, 2, 3]

4.4 forEach():要素を順次巡回し、指定された関数を実行する.戻り値がありませんパラメータ:
①function(value,index,self){}:各要素は順次この関数を呼び出します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:なし
例:

 
  
 var demoArray = [1, 2, 3]; 
  
 demoArray.forEach(function (value, index, self) { 
  
     console.log(value); // =>     ：1  2  3 
  
 });

4.5 indexOf():整合要素を配列内で検索します.マッチする要素が存在しない場合は-1を返します.検索するときは「==」演算子を使いますので、1と「1」パラメータを区別します.
①value:行列で検索する値です.
②start:検索開始番号の位置は、省略すれば0.
戻り値:
｛Int｝:配列の最初の一致valueの番号を返します.存在しない場合は、-1を返します.
例:

 
  
 ['a', 'b', 'c'].indexOf('a'); // =>0 
  
 ['a', 'b', 'c'].indexOf('a', 1); // =>-1 
  
 ['a', 'b', 'c'].indexOf('d'); // =>-1 
  
 [1, 2, 3].indexOf('1'); // => -1 ：   '==='

4.6 join():配列中のすべての要素を一つの区切り記号でつづり合わせて文字列とします.パラメータ:
①sparator｛String｝:各要素間のセパレータは、省略するとデフォルトでは英語のコンマで区切られます.
戻り値:
｛String｝:各要素はsparatorを区切り子として、つなぎ合わせて作られた文字列です.
例:

 
  
 ['a', 'b', 'c'].join(); // => 'a,b,c' 
  
 ['a', 'b', 'c'].join('-'); // => 'a-b-c'

4.7 lastIndexOf:整合要素を配列内で逆方向に検索します.マッチする要素が存在しない場合は-1を返します.検索するときは「==」演算子を使いますので、1と「1」パラメータを区別します.
①value:行列で検索する値です.
②start:検索を開始するシーケンス番号の位置は、省略すると最後の要素から検索を開始します.
戻り値:
｛Int｝:右から左までの検索配列の最初の一致valueの番号が存在しない場合は、-1を返します.
例:

 
  
 ['a', 'b', 'c'].lastIndexOf('a'); // => 0 
  
 ['a', 'b', 'c'].lastIndexOf('a', 1); // => 0 
  
 ['a', 'b', 'c'].lastIndexOf('d'); // => -1 
  
 [1, 2, 3].lastIndexOf('1'); // => -1 ：   '==='

4.8 map():各要素を順次巡回して計算し、計算された要素の配列パラメータを返します.
①function(value,index,self){}:各要素はこの関数を順次呼び出して、計算された要素を返します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
{Aray}良い要素を含む新しい配列
例:

 
  
 [1, 2, 3].map(function (value, index, self) { 
  
     return value * 2; 
  
 }); // => [2, 4, 6]

4.9 pop():配列の最後の要素パラメータを削除して返します.なし
戻り値:
{Object}配列の最後の要素.配列が空の場合、undefinedを返します.
例:

 
  
 var demoArray = ['a', 'b', 'c']; 
  
 demoArray.pop(); // => c 
  
 demoArray.pop(); // => b 
  
 demoArray.pop(); // => a 
  
 demoArray.pop(); // => undefined

4.10 push():配列の最後のパラメータに要素を追加する:
①value 1,value 2....valueN:任意の複数の値を配列の末尾に追加します.
戻り値:
{int}配列の新しい長さ
例:

 
  
 var demoArray = ['a', 'b', 'c']; 
  
 demoArray.push('d'); // => 4, demoArray ： ['a', 'b', 'c', 'd'] 
  
 demoArray.push('e', 'f'); // => 6, demoArray ：['a', 'b', 'c', 'd', 'e', 'f'] 
  
 console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']

4.11 reverse():配列要素の順序を反転します.パラメータ:なし
戻り値:なし(元の配列内で要素順反転)です.
例:

 
  
 var demoArray = ['a', 'b', 'c', 'd', 'e']; 
  
 demoArray.reverse(); 
  
 console.log(demoArray); // => ["e", "d", "c", "b", "a"]

4.12 shift():配列の最初の要素パラメータを削除して返します.なし
戻り値:
{Object}配列の最初の要素.配列が空の場合、undefinedを返します.
例:

 
  
 var demoArray = ['a', 'b', 'c']; 
  
 demoArray.shift(); // => a 
  
 demoArray.shift(); // => b 
  
 demoArray.shift(); // => c 
  
 demoArray.shift(); // => undefined

4.13 slice(startIndex,endIndex):配列の一部を返します.パラメータ:
①startIndex:スタートの番号.負の数であれば、末尾から計算することを表し、-1は最後の要素を表し、-2は後ろから二つ目の要素を表し、これに類推する.
②endIndex:終了箇所の要素の後の番号は、指定されていない場合は終了となります.切り取られた要素はここの番号の要素を含みません.ここの番号の前の要素に終わります.
戻り値:
｛Aray｝新しい配列は、startIndexからendIndexの前の要素までのすべての要素を含んでいます.
例:

 
  
 [1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6] 
  
 [1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] ：   1     
  
 [1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] ：    0   3(  4    )    
  
 [1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] ：     2

4.14 sort(optuorder Fnc):一定の規則で並べ替えパラメータを行う:
①opt_order Fun(v 1,v 2)｛Function｝:オプションのソート規則関数.省略すると、要素のアルファベットに従って小から大に並べ替えます.
v 1:前に続く元素.
v 2:繰り返し後の要素.
ソート規則:
v 1とv 2を比較して、v 1とv 2の並べ替え規則を表す数字を返します.
0より小さい:v 1はv 2より小さく、v 1はv 2より前にある.
イコール0:v 1はv 2に等しく、v 1はv 2の前に並ぶ.
0より大きい:v 1はv 2より大きく、v 1はv 2の後ろにある.
戻り値:なし(元の配列で並べ替え操作).
例:

 
  
 [1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] ：            ，11    2  
  
 [1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) { 
  
     return v1 - v2; 
  
 }); // => [1, 2, 3, 4, 5, 11, 22] ：       
  
 [1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) { 
  
     return -(v1 - v2); //  ，            
  
 }); // => [22, 11, 5, 4, 3, 2, 1]

4.15 splice():配列要素パラメータの挿入、削除:
①start｛int｝:挿入、削除、または置き換えの開始番号を開始します.
②deleteCount｛int｝:要素の個数を削除するには、startから計算を開始します.
③value 1,value 2…valueN｛Object｝:オプションパラメータは、挿入する要素を表し、startから挿入します.②参が0でない場合は、まず削除操作を行い、挿入操作を行います.
戻り値:
{Aray} 削除要素を含む新しい配列を返します.②が0の場合、要素が削除されていないことを示し、空の配列を返します.
例:

 
  
 // 1.   
  
 var demoArray = ['a', 'b', 'c', 'd', 'e']; 
  
 var demoArray2 = demoArray.splice(0, 2); //       0   2   ，           ：['a', 'b'] 
  
 console.log(demoArray2); // => ['a', 'b'] 
  
 console.log(demoArray); // => ['c', 'd', 'e'] 
  
 // 2.   
  
 var demoArray = ['a', 'b', 'c', 'd', 'e']; 
  
 var demoArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ②  0，      
  
 console.log(demoArray2); // => [ ] 
  
 console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e'] 
  
 // 3.       
  
 var demoArray = ['a', 'b', 'c', 'd', 'e']; 
  
 //  ②   0，         (     0   4   ，            )，        
  
 var demoArray2 = demoArray.splice(0, 4, '1', '2', '3'); 
  
 console.log(demoArray2); // => ['a', 'b', 'c', 'd'] 
  
 console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']

4.16 toString():配列中のすべての要素を英語のカンマで区切って、「つなぎ合わせて文字列とする.パラメータ:なし
戻り値:
{Stering} 配列内のすべての要素は英字コンマで連結され、文字列として返されます.無参加ジョンを呼び出す方法と同じです.
例:

 
  
 [1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5' 
  
 ['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'

4.17 unshift():配列ヘッドに要素パラメータを挿入する:
①value 1,value 2....valueN:任意の複数の値を配列ヘッドに追加します.
戻り値:
{int}配列の新しい長さ
例:

 
  
 var demoArray = []; 
  
 demoArray.unshift('a'); // => demoArray:['a'] 
  
 demoArray.unshift('b'); // => demoArray:['b', 'a'] 
  
 demoArray.unshift('c'); // => demoArray:['c', 'b', 'a'] 
  
 demoArray.unshift('d'); // => demoArray:['d', 'c', 'b', 'a'] 
  
 demoArray.unshift('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']

5.静的方法
5.1 Aray.isAray():オブジェクトが配列パラメータであるかどうかを判断する:
①value｛Object｝:任意の対象
戻り値:
｛Boolean｝判定結果を返します.trueの場合、オブジェクトは行列となります.falseの場合、オブジェクトは配列ではないことを表します.
例:

 
  
 Array.isArray([]); // => true 
  
 Array.isArray(['a', 'b', 'c']); // => true 
  
 Array.isArray('a'); // => false 
  
 Array.isArray('[1, 2, 3]'); // => false

6.実際の操作
6.1インデックスの説明:各要素は配列内に位置し、数字で表され、索引と呼ばれています.索引は0から始まります.つまり、最初の要素の索引は0で、2番目の要素の索引は1で、これに類推します.
配列が存在しないインデックスを取得すると、undefinedが返されます.
例:

 
  
 var demoArray = ['a', 'b', 'c', 'd', 'e']; 
  
 demoArray[0]; // =>        :'a' 
  
 demoArray[0] = 1;  //          1 
  
 console.log(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e'] 
  
 console.log(demoArray[9]); // => undefined ：          ，   undefined

6.2 for文の説明:for文で配列を巡回することができます.
例:

 
  
 var demoArray = ['a', 'b', 'c', 'd', 'e']; 
  
 for (var i = 0, length = demoArray.length; i < length; i++) { 
  
     console.log(demoArray[i]); // =>            
  
 }

6.3浅い複製説明:Arayタイプは参照タイプである.配列aが配列bにコピーされると、配列bが要素修正され、配列aも修正される.
例:

 
  
 var demoArrayA = ['a', 'b', 'c', 'd', 'e']; 
  
 var demoArrayB = demoArrayA; //    A      B 
  
 demoArrayB[0] = 1; //    B         
  
 console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']：  A

6.4深さコピー説明:concat()方法を使用して、新しい配列を返す.浅いコピーを防ぐ場合は、配列bを要素修正操作し、配列aは変更されません.
例:

 
  
 var demoArrayA = ['a', 'b', 'c', 'd', 'e']; 
  
 var demoArrayB = demoArrayA.concat(); //   concat()  ，       
  
 demoArrayB[0] = 1; //    B         
  
 console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']：  A        
  
 console.log(demoArrayB); // => [  1, 'b', 'c', 'd', 'e']：  B

JavaScriptを使ってListBoxのような機能例コードを実現します.