言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 配列.splice()

配列.splice()

配列の任意の位置に対して、要素の追加・削除・置換を行うメソッドです。元の配列を直接変更します。

構文

// 指定位置から要素を削除します。
var removed = 配列.splice(開始位置, 削除する数);

// 指定位置に要素を追加します。削除する数を0にします。
配列.splice(開始位置, 0, 追加する要素1, 追加する要素2, ...);

// 指定位置の要素を置換します。
配列.splice(開始位置, 削除する数, 置換する要素1, 置換する要素2, ...);

引数

引数概要
開始位置操作を開始するインデックスを指定します。負の値を指定すると末尾から数えた位置になります。
削除する数削除する要素の数を指定します。『0』を指定すると要素を削除せず、追加のみ行います。省略すると開始位置以降のすべての要素が削除されます。
追加する要素省略可能です。削除した位置に挿入する要素を指定します。複数の要素をカンマ区切りで指定できます。

サンプルコード

var colors = ["赤", "青", "緑", "黄", "白"];

// インデックス1から2つの要素を削除します。
var removed = colors.splice(1, 2);
console.log(removed); // 『青,緑』と出力されます。
console.log(colors); // 『赤,黄,白』と出力されます。

// インデックス1の位置に要素を追加します。削除はしません。
colors.splice(1, 0, "紫", "橙");
console.log(colors); // 『赤,紫,橙,黄,白』と出力されます。

// インデックス2の要素を置換します。
colors.splice(2, 1, "ピンク");
console.log(colors); // 『赤,紫,ピンク,黄,白』と出力されます。

概要

『配列.splice()』は配列の任意の位置に対して、削除・追加・置換を一度に行える万能なメソッドです。元の配列を直接変更する破壊的メソッドであり、戻り値は削除された要素の配列です。要素を削除しなかった場合は空の配列が返されます。

開始位置に負の値を指定すると、末尾からの位置として扱われます。例えば『-1』は最後の要素、『-2』は最後から2番目の要素を指します。第2引数を省略した場合は開始位置以降のすべての要素が削除されるため、配列の末尾をまとめて切り取りたいときに便利です。

元の配列を変更せずに一部を取り出したい場合は『配列.slice()』を使用してください。名前が似ていますが、『配列.splice()』は元の配列を変更し、『配列.slice()』は元の配列を変更しないという重要な違いがあります。

対応ブラウザ

Chrome Chrome
49 以降
全バージョンで対応しています
Firefox Firefox
57 以降
全バージョンで対応しています
Safari Safari
18 以降
全バージョンで対応しています
Edge Edge
80 以降
11 以前 ×
IE IE
11 以降
4.5 以前 ×
Opera Opera
48 以降
3 以前 ×
iOS Safari iOS Safari
18 以降
全バージョンで対応しています
Android Browser Android Browser
37 以降
4 以前 ×
Chrome Android Chrome Android
36 以降
17 以前 ×
Firefox Android Firefox Android
79 以降
3 以前 ×

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。