「ロナえる」の夫です。
JavascriptのArrayでは、要素の追加、削除、ソートなど色々な処理をすることができます。
今回は、その処理をまとめてみました。
全てではないですが、大部分を網羅しています。
いざ調べてみると本当に色々できるので感動です。
Arrayとは?
Array
とは配列を扱うためのオブジェクトです。
例えば、次のように複数の要素を1つの変数で扱うことができます。
詳しくは多くのサイトで紹介されていると思うので、配列としての詳しい話はここでは割愛をします。
配列のサイズを確認
length:配列のサイズを確認
ArrayのPublicなメンバーであるlength
を利用することで、
「配列の大きさを確認すること」
ができます。
要素の追加
要素の追加は、メソッドを使わなくても配列のインデックスを直接指定してでもできます。
push:配列の末尾に要素を追加
push
メソッドを利用することで、
「配列の末尾に新たに要素を追加すること」
ができます。
戻り値としては、要素が追加された後の配列のサイズを返します。
また、追加できる要素は1つずつではなく、一度に複数個の要素を追加することができます。
unshift:配列の先頭に要素を追加
unshift
メソッドを利用することで、
「配列の先頭に新たに要素を追加すること」
ができます。
このメソッドはpush
と同様に戻り値として、要素の配列のサイズを返します。
また、複数要素を同時に追加することも可能です。
splice:配列途中に要素を追加
splice
メソッドを利用することで、
「配列の途中に新たに要素を追加すること」
ができます。
ただし、push
やunshift
と違い、戻り値としては配列のサイズが返ってきません。
この辺は後ほど紹介するsplice
の削除・置換を参照ください。
引数はsplice(start, num, 値1, 値2, ...)
となります。
start
:要素を追加する配列の位置(インデックス)num
:削除する要素数。splice
には削除や置換機能もあり、この引数はそのような場合に利用します。ただ、要素を追加したい場合は0
を指定してください。値1, 値2...
:追加したい値。複数あれば、,
で区切って列挙する。
また、splice
メソッドの削除や置換に関してはこちら。
配列にインデックスを直接指定して要素を追加
Javascriptの配列は、
「インデックスを直接指定して値を追加すること」
もできます。
この場合注意しないといけないのは、配列の(最後のインデックス+1)より大きいインデックスを指定した場合、未定の要素が現れるので、その要素はundefined
になります。
要素の取得・削除
要素の取得する方法では大きく分けて2つの挙動があります。
- 要素の取得のみ
- 要素を取得しつつ、その要素を配列から削除する
間違って利用すると、大惨事になるので気をつけましょう。
pop:末尾要素の取得・削除
pop
メソッドを利用することで、
「配列の末尾要素の取得・削除すること」
ができます。
arrayが空配列([]
)だった場合は、pop()
はundefined
を返します。
shift:先頭要素の取得・削除
shift
メソッドを利用することで、
「配列の先頭要素の取得・削除すること」
ができます。
arrayが空配列([]
)だった場合は、shift()
はundefined
を返します。
splice:「配列の途中要素を削除」および「削除した要素の取得」
splice
メソッドを利用することで、
「配列の途中要素を削除すること、さらに削除した要素を取得すること」
ができます。
今回2回目の登場ですね。
置換もできるのですが、正確には削除と追加を順番に実行しています。
splice
の戻り値は、「削除した要素」です。
引数はsplice(start, num, 値1, 値2, ...)
となります。
start
:要素をする配列の位置(インデックス)num
:削除する要素の個数値1, 値2...
:削除個数と組み合わせると値を置換することができます。削除個数以上を指定すると、溢れた分は単純に追加されます。
また、開始位置にマイナスを指定すると、配列末尾からの位置となります。
例えば、上のarray
の場合、array.splice(-1, 1)
と指定すると、末尾から1つ目の6
が取り除かれます。
さらに、splice(開始位置)
といった具合で、1つだけ引数を指定すると、開始位置以降の要素が取り除かれます。
slice:配列の途中要素を取得
slice
メソッドを利用することで、
「配列の途中要素を取得すること」
ができます。
splice
と似たメソッドですが、
- 引数が開始位置と終了位置
- 元の配列には変更がない
という点で異なります。
引数は、slice( start, end )
となります。
配列のstart位置から(end - 1)位置までの要素を新たな配列として返します。
また、startだけ指定した場合は、start位置以降の要素が全て取得できる。
要素の範囲はendまでではなく、その1つ前の(end - 1)なので注意が必要
要素の並び替え
sort:配列の中身をソートする
sort
メソッドを利用することで、
「その名の通り配列の中身をソートすること」
ができます。
ソートした結果は元の配列には反映されず、戻り値として返されます。
reverse:配列を逆順に並び替え
reverse
メソッドを利用することで、
「配列を逆順に並べ替えること」
ができます。
sort
と同様に元の配列には影響がなく、新しい配列として返されます。
番外編:sortを利用して逆ソート
sort
とreverse
を組み合わせれば、小さい順だけでなく大きい順に並べることができます。
この大きい順に並べるのをsort
だけでも実現することができます。
sort
には実は引数があり、sort( func )
といった形で関数を一つ指定することができます。
func
: 引数は2つの要素a,bを指定します。func(a,b)<0
の時:aをbより小さいインデックスにソート(つまりaが前)func(a,b)==0
の時:変化なしfunc(a,b)>0
の時:bをaより小さいインデックスにソート(つまりbが前)
つまり、a>bとなるようにfunc
を定義してあげると、逆順にソートすることができます。
文字列処理
toString:配列要素を文字列に変換
toString
メソッドを利用することで、
「配列の要素を文字列に変換すること」
ができます。
戻り値として、要素が結合された文字列が返されます。
要素間は,
で区切られます。
join:配列の要素の結合
join
メソッドを利用することで、
「配列の要素を結合すること」
ができます。
結合された結果は、戻り値として取得できます。
引数は、join( separator )
となります。
separator
:結合された時の要素間に差し込まれる文字
separatorに何もしない場合はデフォルトで,
が挿入されます。
これだけだと、toString
と同じですね。
undefinedやnullがあると空文字となります。
検索
includes:要素の有無を判定
includes
メソッドを利用することで、
「配列内で特定の要素の有無を判定すること」
ができます。
引数に判別したい要素を指定して、含まれていればtrue
、そうでなければfalse
を返します。
find:特定の条件の要素を1つ検索
find
メソッドを利用することで、
「配列内の特定の条件を満たす要素を1つ検索すること」
ができます。
引数には、find(func)
といった形で特定の条件を判定する関数を入力します。
func( value )
:引数にvalueをとり、value
は配列の各々の要素。func
がtrue
であれば条件を満たしたこととなります。func( value, index, array)
:引数にはvalue
の配列のインデックスindex
と元の配列array
の指定もできます。
最初に条件を満たした要素を1つだけ返します。
特定の条件を満たす複数の要素を検索して取得したい場合は、filter
を使います。
filter::特定の条件の要素を複数検索
filter
メソッドを利用することで、
「配列内の特定の条件を満たす要素を複数検索すること」
ができます。
引数はfind
と同じですが、filter
は指定した条件を満たす複数要素を配列として返します。
findIndex:特定の条件の要素のインデックスを1つ検索
findIndex
は「インデックスの取得」で記述したこちらを参照ください。
インデックスの取得
indexOf:指定した要素(文字列や数字など)のインデックスを取得
indexOf
メソッドを利用することで、
「配列から指定した要素(文字列や数字など)のインデックスを取得すること」
ができます。
引数は、indexOf( val, start )
となります。
val
:インデックスを取得したい要素start
:検索を開始する位置。配列の長さ以上の値を指定すると検索はされない。
もし配列に指定した要素が含まれなかった場合は-1
が返されます。
指定した要素が配列に複数含まれる場合、最初に見つかった要素のインデックスを返します。
lastIndexOf:指定した要素(文字列や数字など)のインデックスを取得
lastIndexOf
メソッドを利用することで、
「配列から指定した要素(文字列や数字など)のインデックスを取得すること」
ができます。
indexOf
とほぼ同じ挙動ですが、lastIndexOf
は配列の末尾から反対方向に検索をしていきます。
こちらも同様に指定した要素が複数あっても、最初に見つけた要素のインデックスを返します。
findIndex:特定の条件を満たす要素のインデックスを取得
findIndex
メソッドを利用することで、
「特定の条件を満たす要素のインデックスを1つ取得すること」
ができます。
引数はfind
と同様に、
といった形で特定の条件を判定する関数を入力します。findIndex
(func)
find
と異なるのは、find
では条件を満たす要素を取得てきたのに対して、findIndex
では条件を満たす要素のインデックスを取得できます。
func( value )
:引数にvalueをとり、value
は配列の各々の要素。func
がtrue
であれば条件を満たしたこととなります。func( value, index, array)
:引数にはvalue
の配列のインデックスindex
と元の配列array
の指定もできます。
一括処理
forEach:配列の各要素に対して特定の処理を実施
foreEach
メソッドを利用することで、
「配列の各要素に対して特定の処理を実施すること」
ができます。
引数は、forEach(func)
といった形で処理内容を記述した関数を入力します。
func( value )
:引数にvalueをとり、value
は配列の各々の要素。func
には実行したい処理を記述します。func( value, index, array)
:引数にはvalue
の配列のインデックスindex
と元の配列array
の指定もできます。
また、戻り値はundefined
です。
空の要素の場合は何もしない。 ex) ["a", "b", ,"d"]
のようなb
とd
の間にある要素では何も実行されない。
forEach
は例外以外で中断することができないので、中断したい場合は他の方法を取る必要があります。例えば、forループ。
reduce:配列の各要素で直前の処理結果を利用しつつ逐次処理
reduce
メソッドを利用することで、
「グローバル変数を利用して、for文で直前のループの結果を引き回すようなこと」
ができます。
例えば、次のように合計を計算するケースをreduce
では簡潔に記述することができます。
reduce
では、例えばsum
のような合計値を戻り値として取得することができます。
引数は、reduce(func)
or reduce(func, initialValue)
といった形で処理内容を記述した関数を入力します。
func( value )
:引数にvalueをとり、value
は配列の各々の要素。func
には実行したい処理を記述します。func( value, index, array)
:引数にはvalue
の配列のインデックスindex
と元の配列array
の指定もできます。initialValue
:初期値。指定がなければ、配列の1つ目の要素が初期値になる。指定がない場合は、1つ目の要素ではfunc
の処理は実行されない。
空の要素の場合は何もしない。 ex) ["a", "b", ,"d"]
のようなb
とd
の間にある要素では何も実行されない。
fill:配列の初期化(一斉に値変更)
fill
メソッドを利用することで、
「簡単に配列の初期化をすること」
ができます。
正確には一斉には配列の値を変更することができ、その開始位置/終了位置を指定することができます。
引数は、fill(val, start, end)
となっています。
また、元の配列には変更がなく、変更後の配列が戻り値として取得されます。
val
:変更後の値start
:開始位置。指定しなければ全ての要素。end
:終了位置。正確には(end - 1)の値までが変更される。指定しなければ末尾要素まで。