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 自身に影響を与える破壊的なメソッドだ。

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

参考