Skip to content

JavaScriptの配列操作一覧[前編]

JavaScriptの配列のメソッドをまとめました。

前編では、「変更メソッド」について、実装例と一緒にまとめていきます。

配列操作のメソッドは変更メソッド以外に、メソッドを適用した配列そのものは変更せずに何らかの値を返す「アクセサメソッド」と、配列の要素ひとつずつに対して順番に処理を実行していく「反復メソッド」があります。

それぞれこちらの記事をご参考ください。

参考サイト:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

また、次の記事では特に便利なメソッドについて紹介しています。

変更メソッド一覧

メソッドを適用した配列そのものを変更するメソッドのことを指します。

挙動の確認は、次のブラウザで行いました。

  • Chrome 51.0.2704.103
  • Firefox 47.0
  • Edge 25.10586.0.0
  • IE11 11.0.32

shift(先頭削除)

最初の要素を取り除き、インデックスを詰める。

構文

挙動は非常に単純です。削除された要素が返り値となる部分がポイントです。

pop(末尾削除)

最後の要素を取り除く。

構文

shiftと対になるようなメソッドです。こちらも削除された要素が返り値となります。

unshift(先頭追加)

配列の先頭に要素を追加して、インデックスをつけなおす。

構文

shiftと逆の動きをするメソッドです。返り値は要素追加後の要素数になります。

push(末尾追加 / 結合)

配列の末尾に要素を追加する。

構文

こちらはpopと逆の動きをするメソッドで、unshiftと対になるメソッドです。

こちらも返り値は要素追加後の要素数になります。

小ネタ

配列を展開して引数とするapplyと組み合わせることで配列の結合に使うこともできます。

splice(削除 / 置換)

指定したインデックス位置からいくつかの要素を削除し、その削除した位置にいくつかの要素を追加

構文

例1. 削除開始インデックスのみ指定

例2. 削除開始インデックスと、削除する個数を指定

例3. 削除開始インデックスと、削除する個数、追加する要素を指定

インデックスを指定して削除できるのが強みです。

reverse(逆順ソート)

配列の順序を逆にする。

構文

これはそのままですね。

sort(関数によるソート)

引数(関数)に基づいて配列を並び替える。

並べ替えの関数を渡さない場合は、文字列としてのソートを行う。

並び替え関数は配列内のいずれかの2つの要素a, bを引数として

の形式で記述し、この関数の返り値によってa, bの前後を決定する。

  • 負:a が先、bが後になるように並び替え
  • 正:bが先、aが後になるように並び替え
  • 0:a, b を並び替えない

※実行環境ごとの挙動の違いに注意。

構文

例1

例2

そもそも数値として解釈できないもので計算をするなというところではありますが、こういった実装ではブラウザ間で差異が生じます。

基本的に文字列のソートや数値のソートで使う分にはとくに難しく考えず使えそうです。

fill(値で置換)

配列の一部を、ある値で上書きする。

※IEでは動きません。

構文

start(index) から end(index) の直前までを、valueで上書きする、というメソッドです。

パッと使い道が思いつきませんが、ループで実装するよりは処理が早いのだろうと思われます。

copyWithin(自身の一部で置換)

配列の一部を、その配列の一部で上書きする。

※IEでは動きません。

構文

target(index) 以降を起点として、start(index) から end(index) の直前までで上書きする、というメソッドです。

使いどころが難しそうです。例では3つの要素で上書きしましたが、実践では1つの要素で上書きするような実装で使われることが多いのでしょうか。

まとめ

以上、配列の変更メソッドについてまとめました。

返り値の違いなど、細かいところですが把握しておきたいところです。

(次回:JavaScriptの配列操作一覧[中編]

Comments are closed.