JavaScriptの配列操作まとめ
JavaScriptを書いていると配列の操作(特にループ)が分からなくなるので、よく使う処理をまとめてみました。
定義
まずは基本的な定義方法。
要素数を取得
length
で取得します。
抽出
特定の値だけを抽出したい場合。filter()
メソッドを使います。
ループ
いくつか方法があって、得られる値も異なるので注意。
for 文
よくあるカウンタを使って回すパターンですね。
for...in 文
順序不定でインデックスを取得します。
for...of 文
先頭から順に要素を取り出します。
forEach() メソッド
配列の各要素に対して関数を実行します。
追加
先頭に追加
unshift()
メソッドを使います。1つ以上の要素を追加できます。
末尾に追加
push()
メソッドを使います。1つ以上の要素を追加できます。
指定位置に挿入
splice()
メソッドで削除要素数を0にすることで要素の挿入が可能です。splice()
メソッドについては次の「削除」で説明します。
削除
削除の仕方も個人的には特殊と思う。
指定位置から削除
splice()
メソッドを使います。削除開始インデックスと削除要素数を指定します。
末尾を削除
pop()
メソッドを使います。pop()
メソッドは配列の末尾の要素を取り除き、その要素を返します。なのでpop()
メソッドの戻り値は配列末尾の値になります。
先頭を削除
shift()
メソッドを使います。shift()
メソッドは配列の先頭の要素を取り除き、その要素を返します。なのでshift()
メソッドの戻り値は配列先頭の値になります。
指定位置の要素を空にする
delete
を使うと、配列の長さを変えずに指定位置の要素を削除できます。
結合
concat() を使って結合する
Array.prototype.concat()
を使って配列を結合できます。
結合元の配列は変更されません。
スプレッド構文で結合する
配列のクリア
配列の要素を全て削除したい場合は、以下のような方法があります。
- splice()
- length = 0
- 空配列を代入(変数の宣言がconst以外の場合)
文字列との変換
文字列を配列にする
Array.from()
メソッドを使用して、文字列を配列に分割します。
配列を文字列にする
join()
メソッドを使用します。引数で区切り文字を指定できます。区切り文字に空文字を指定すれば値のみを連結します。