「JavaScript/Array」の版間の差分

削除された内容 追加された内容
編集の要約なし
Ef3 (トーク | 投稿記録)
4 行
Arrayオブジェクトは配列を扱うための機能を組み込んだオブジェクトである。
配列を作成する際には
<source lang="javascript">
<nowiki>
varconst arr = new Array( 'a', 'b', 'c', 'd' );
</nowikisource>
等の書式で行うが、実際にはシンタックスシュガーが存在しており、次の書式が等価である。
<source lang="javascript">
<nowiki>
varconst arr = ['a', 'b', 'c', 'd'];
</nowikisource>
 
JavaScriptの配列は非常に柔軟であるため、データ型に関して制約がない。
そのため
<source lang="javascript">
<nowiki>
varconst arr2 = [1,2,3,'4', true, [3,4,5]];
</nowikisource>
等の様に、複数のデータ型を同時に入れる事ができる。
 
=== プロパティ ===
 
==== Array.prototype.length ====
配列の有効な最大インデックス+1 を取得する。
 
=== 静的メソッド ===
 
==== toStringArray.from() ====
Array-likeまたはIterableなオブジェクトから新しい Array インスタンスを生成する。
 
==== Array.isArray() ====
配列であれば true を、配列でなければ false を返す。
 
==== Array.of(element0 [ , element1 [ , ... ] ] ] ) ====
可変個の引数から、新しい Array インスタンスを生成する。
コンストラクタと似た働きをしますが、コンストラクタに1つの整数を渡すとその数だけ empty が詰まった配列を返すが、Arrray.ofメソッドはその数1つを要素とする配列を返す。
 
=== インスタンスメソッド ===
 
==== Array.prototype.toString() ====
配列を文字列化する。
 
==== Array.prototype.toLocaleString() ====
配列を、使用している環境の言語や文化に合わせた読みやすい形式の文字列に変換して返す。
変換は、配列内部の要素を一度再帰的に文字列化してから連結するので、Number型やDate型要素のtoLocaleString()での変換結果を参照に留意べきでる必要がある。
 
==== Array.prototype.concat( [ item1 [ , item2 [ , ... ] ] ] ) ====
配列の連結を行う。い新しい Array インスタンスを生成する
 
==== Array.prototype.join(separator) ====
配列を指定した文字を連結子として連結して文字列として返す。
<source lang="javascript">
<nowiki>
varconst d = [ 2007, 11, 21 ];
document.write( d.join("-") ); // 2007-11-21 と表示する。 </nowikisource>
 
==== Array.prototype.pop() ====
配列末尾から要素を取り除く。
このメソッドは破壊的メソッドなので、再代入の必要はない。
返り値としては、取り除かれた末尾の要素が返る。
<source lang="javascript">
<nowiki>
varconst arr = ['a','b','c','d','e','f','g','h','i','j','k'];
arr.pop(): // 「k」が返る
document.write(arr); // 「k」を取り除いたa,b,c,d,e,f,g,h,i,jが返る
([]).pop(); // 配列の中身が空の場合はnullが返る
</nowikisource>
 
==== Array.prototype.push( [ item1 [ , item2 [ , ... ] ] ] ) ====
配列の末尾に要素を追加して、その配列の長さを返す。このメソッドは破壊的メソッドなので再代入の必要はない。
<source lang="javascript">
<nowiki>
varconst arr = [1,2,3,4,5,6,7,8,9,10];
arr.push(11);
document.write( arr );
</nowikisource>
 
==== Array.prototype.reverse() ====
配列の要素の順番を入れ替える。これは破壊的メソッドであるため。再代入の必要はない。
<source lang="javascript">
<nowiki>
varconst arr = [1,2,3,4,5,6,7,8,9,10];
arr.reverse(); // [10,9,8,7,6,5,4,3,2,1,0] になる。
</nowikisource>
 
==== Array.prototype.shift() ====
配列の最初の要素を取り除く。このメソッドは破壊的メソッドのため再代入の必要はない。
返り値として取り除いた要素を返す。
<source lang="javascript">
<nowiki>
varconst arr = [1,2,3,4,5,6,7,8,9,10];
arr.shift();
document.write( arr );
</nowikisource>
 
 
==== Array.prototype.slice(start, end) ====
startからend番目の配列要素を取得する。
引数に負の数を指定すると、配列の末尾からのインデックスでデータの取得を行える。
<source lang="javascript">
<nowiki>
varconst arr = ['a','b','c','d','e','f','g','h','i','j','k'];
document.write( arr.slice( 3, 8 ) + "<br />" ); // d,e,f,g,h返す
document.write( arr.slice( -5, -1 ) + "<br />" ); // g,h,i,jを返す
</nowikisource>
 
end側にundefinedを指定すればstartから配列の末尾までを取得できるはずだが、現在の段階では実装に依存する。
<source lang="javascript">
<nowiki>
document.write( arr.slice( 3, undefined ) + "<br />" ); // 配列の4番目から最後までを返す
document.write( arr.slice( 3 ) + "<br />" ); // d,e,f,g,h,i,j,k が返る正しき標準仕様外
</nowikisource>
 
==== Array.prototype.sort(comparefn) ====
配列要素を引数で指定した方法でソート(並べ替え)する。ちなみにこのメソッドは破壊的メソッドである。
並べ替えの方法は、引数の中で規則を定めた関数として与える。
90 ⟶ 110行目:
説明だけでは分かりにくい、実例を挙げる。
例えばバラバラに並んだ数字を、昇順(ascending order)に並べ替えたいとき等には次の様な関数を作成して、引数として指定する。
<source lang="javascript">
<nowiki>
function ascendingOrder( _n1 , _n2 ){
return _n1 - _n2;
}
varconst arr = [5,8,7,2,4,3,9,1,6,0];
arr.sort(ascendingOrder); // ここで並べ替えを実行する
document.write(arr+"<br/>"); // 0,1,2,3,4,5,6,7,8,9が表示される
</nowikisource>
 
作成する関数は、配列要素から、2つずつ値を受け取ってそれを比較することにより、正、ゼロ、負のいずれかの値を返す。
ゼロの値を返す場合は、入れ替えが行われないが、正の値を返す場合は大きい値の要素が後ろに、負の値が返る場合には小さい値を後ろに持っていく。
実際には、ソートの原理を知っていると、このメソッドの理解がしやすい。
*[[w:バブルソート|バブルソート]]
*[[w:クイックソート|クイックソート]]
(実際にはクイックソートが、様々な状況でも安定して高速なので多くの実装がクイックソートを基本にこのメソッドの内部の実装を行っていると思われるが
どちらのソートを知っていても、内部を気にしないで使う分には特に差はない)
 
並べ替えの規則を指定する場合、関数は非常に簡潔で短いものが非常に多いので、実際には次の様にアロー関数を比較記述してしまう場合の方用いることが多い。
<source lang="javascript">
<nowiki>
arr.sort( function ( _n1 a, _n2 b){ return=> _n1a - _n2; } b); // ここで並べ替えを実行する </nowiki>
</source>
 
==== Array.prototype.splice(start, deleteCount [ , item1 [ , item2 [ , ... ] ] ] ) ====
このメソッドは、分割(split)と切り取り(slice)の似た機能を兼ね合わせても足せたメソッドである。
また、このメソッドは破壊的メソッドである。また、返り値として取り除いた値を返す。
116 ⟶ 132行目:
文のみの説明では分かりにくい所があるので、サンプルコードを提示する。
配列からn番目の要素を取り除きたい場合には次の様なコードを記述する。
<source lang="javascript">
<nowiki>
varconst arr = ['a','b','c','d','e','f','g','h','i','j','k'];
varconst n=3;
arr.splice( n, 1 ); // インデックスが3の「d」を取り除く
document.write( arr + "<br />" ); // 「d」が無いa,b,c,e,f,g,h,i,j,kが返る
</nowikisource>
 
spliceメソッドの第2引数は取り除く範囲の大きさである。そのため例えば第2引数に4を指定すると、配列の4番目から8番目の要素が取り除かれる。
126 ⟶ 143行目:
第3引数以降を利用すると、配列要素の取り除きではなく、置き換えができるようになっている。
つまり、第1、第2引数で配列の入れ替え箇所と範囲を指定した後に、そこに入れ替えたい要素を第3引数以降で指定する。
<source lang="javascript">
<nowiki>
varconst arr = ['a','b','c','d','e','f','g','h','i','j','k'];
arr.splice( 3, 4, 'x','y','z' ); // インデックスが3~7の間の、つまりd,e,f,gをx,y,zに置き換える
document.write( arr + "<br />" ); // a,b,c,x,y,z,h,i,j,k が表示される。
</nowikisource>
 
==== Array.prototype.unshift( [ item1 [ , item2 [ , ... ] ] ] ) ====
配列の先頭にアイテムを追加して、その配列の長さを返す。
このメソッドは破壊的メソッドなので、再代入の必要はない。
<source lang="javascript">
<nowiki>
varconst arr = ['a','b','c','d','e','f','g','h','i','j','k'];
arr.unshift('z','y','x'); // 配列の最初にz,x,yを追加
document.write( arr ); // z,y,x,a,b,c,d,e,f,g,h,i,j,k が返る
</nowikisource>
 
[[Category:JavaScript]]