Corredor

ウェブ、プログラミングの勉強メモ。

JavaScript の配列の追加・削除操作まとめチートシート

個人的チートシート。splice() の使い方の整理に近い。

追加・削除操作のチートシート

まずは結論だけ。

やりたいこと コード
先頭に追加 array.unshift('First')
array.splice(0, 0, 'First')
中間に追加 array.splice(targetIndex, 0, 'New Third')
targetIndex = 2 の時、配列の添字2 (3つ目) に対象要素が入る
末尾に追加 array.push('Last')
array.splice(array.length, 0, 'Last')
先頭から1件削除 array.shift()
先頭から複数件削除 array.splice(0, deleteCount)
中間から削除 array.splice(targetIndex, deleteCount)
targetIndex = deleteCount = 2 の時、配列の添字2と3 (3〜4つ目) の2つが削除される
末尾から1件削除 array.pop()
末尾から複数件削除 array.splice(array.length - deleteCount, deleteCount)

「追加」系のメソッドはいずれも、追加したい要素を後続の引数に連ねていけば、一度に複数の要素を追加できる。

以下詳細を説明。

追加・削除操作に関するメソッド

配列に対する要素の追加・削除で使うメソッドの説明。以下のメソッドはいずれも、配列の変数 array 自身に影響を与える破壊的なメソッドだ。

  • array.unshift()
    • 概要:配列の先頭に引数の要素たちを挿入する。
    • 引数:1つ以上、可変。
    • 戻り値:追加し終わった配列の長さ (length)。
  • array.push()
    • 概要:配列の末尾に引数の要素たちを挿入する。
    • 引数:1つ以上、可変。
    • 戻り値:追加し終わった配列の長さ (length)。
  • array.shift()
    • 概要:配列の先頭の1要素を削除する。配列の長さは1つ減る。
    • 引数:なし。
    • 戻り値:削除した要素。配列の長さが 0 で、削除した要素がなかった場合は undefined が返る。
  • array.pop()
    • 概要:配列の末尾の1要素を削除する。配列の長さは1つ減る。
    • 引数:なし。
    • 戻り値:削除した要素。配列の長さが 0 で、削除した要素がなかった場合は undefined が返る。
  • array.splice()
    • 概要:配列の指定の位置から、指定の数だけ要素を取り除き、指定した要素を追加する。
    • 引数:
      1. index : 配列を削除・追加し始める添字。
        配列の長さより大きい場合は末尾指定になる。
        負数の場合は配列の末尾からその値を引いた数になる (string.substr() の第1引数や slice() の第2引数と同じ挙動)。
      2. howMany : index の位置から削除する要素数。
        0 の場合は何も削除しない。配列の末尾までの要素数より大きい場合は、index 以降の全ての要素が削除される。
        第1引数のみ指定してこの引数を指定しなかった場合は、index 以降の全ての要素が削除される (undefined を明記した場合は 0 と同じになる)。
      3. 第3引数以降 : index の位置から追加する要素。0個以上を可変引数で指定できる。
    • 戻り値 : 削除した値の配列。削除していない場合は空の配列 []、1つ削除した場合は要素数1の配列 [deletedElement] が返される。

最初は splice が分かりづらいと思う。単語のつづりが slice に似ているが別に関係なく、splice は「繋ぎ合わせる」「解いて組み継ぎする」といった意味の単語で、「削除と追加を同時にできる」もの。追加も削除も splice() だけでできるので、ぜひ覚えておきたい。

参考

JavaScript 第6版

JavaScript 第6版