🕌

[JavaScript]scliceについて

2022/10/07に公開約1,400字

spliceメソッドとは

  • 配列を表すArrayのメソッドで配列の要素を操作するメソッド。以下のような操作が可能。

    • 要素を取り除く
    • 置き換える
    • 追加する
  • Arrayオブジェクトのsplice()メソッドを実行すると、第一引数で指定した位置から、第二引数で指定した数の要素が配列から削除され、第三引数以降で指定した値が要素として配列に追加される。

  • 実行した結果には、削除された要素が配列形式で返る。

  • 配列名.splice() …… 配列から要素を削除・追加して組み替える

構文・引数・戻り値

構文
配列名.splice()

第一引数
追加・削除する位置(配列の要素数より大きい値を指定すると配列の末尾となる。負の数値を指定すると配列の末尾から引いた位置となる)

第ニ引数
削除する要素の数

第三引数以降
追加する要素

戻り値
削除された要素が配列形式で返される

第1引数のみ

指定した要素以降を全て取り除くため、下記のように記述。

const array = ['1番目', '2番目', '3番目', '4番目', '5番目'];
array.splice(2); // ["1番目", "2番目"]

第1引数と第2引数を指定

第1引数で指定した要素から、第2引数で指定した数の分の要素を取り除く。

const array = ['1番目', '2番目', '3番目', '4番目', '5番目'];
array.splice(1,3); // ["1番目", "5番目"]

第1引数〜第3引数を指定

プログラムの動作は、第1引数で指定した要素から、第2引数で指定した数を取り除き、第3引数の値を追加する。
第2引数が0の場合は、1つも取り除かずに値を追加するため、間に要素を差し込む動作と同様。

const array = ['1番目', '2番目', '3番目', '4番目', '5番目'];
array.splice(1,0, '差し込み'); // ["1番目", "差し込み", "2番目", "3番目", "4番目", "5番目"]

第2引数が1の場合は、1つを取り除いて、第3引数を追加し、置き換える動作となる。

const array = ['1番目', '2番目', '3番目', '4番目', '5番目'];
array.splice(1, 1, '交換'); // ["1番目", "交換", "3番目", "4番目", "5番目"]

第1引数〜第5引数を指定

第3引数の追加する動作と同様。
この場合では、追加する値が第3引数、第4引数、第5引数の3つになる

const array = ['1番目', '2番目', '3番目', '4番目', '5番目'];
array.splice(1, 0, '差し込み1', '差し込み2', '差し込み3'); // ["1番目", "差し込み1", "差し込み2", "差し込み3", "2番目", "3番目", "4番目", "5番目"]

参考

http://www.htmq.com/js/array_splice.shtml
https://magazine.techacademy.jp/magazine/37922

Discussion

ログインするとコメントできます