JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsplice()メソッドとは？配列の要素追加・削除を実例コードで解説

JavaScriptにおける配列のスプライシング（splice）とは

配列の「スプライシング」とは、Array.splice()メソッドを使用して、配列に要素を追加したり、配列から要素を削除したりすることを指します。このメソッドは元の配列を直接変更し、削除された要素は新しい配列として返されます。何も削除されなかった場合は空の配列が返ります。

splice()メソッドの基本構文

array.splice(start, deleteCount, item1, item2, ...)
  • start：変更を開始する位置（インデックス番号）。負の値を指定すると配列の末尾から数えた位置になります。
  • deleteCount：削除する要素の数。0 を指定すると要素を削除せず、挿入のみを行います。省略した場合、start 以降のすべての要素が削除されます。
  • item1, item2, ...：配列に追加する要素（省略可能）。複数指定できます。

実装例：2番目の要素の後ろに項目を追加する

以下は、splice()メソッドを使って配列の2番目の要素の後に新しい項目を挿入するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,.result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Splicing an array in JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to add items after second element
</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let resEle = document.querySelector(".result");
    let arr = [1, 3, 5, 7, 9, 11];
    fillEle.innerHTML = arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        arr.splice(2, 0, "A", "B", "C", "D", "E");
        resEle.innerHTML = "Spliced array = " + arr;
    });
</script>
</body>
</html>

コードのポイント

この例では arr.splice(2, 0, "A", "B", "C", "D", "E") としており、これはインデックス2の位置（3番目の要素）から要素を一切削除せず（第2引数が0）、5つの文字列を挿入するという処理になります。実行後の配列は [1, 3, "A", "B", "C", "D", "E", 5, 7, 9, 11] となります。

出力結果

上記のコードを実行すると、最初に元の配列 [1, 3, 5, 7, 9, 11] が表示されます。

JavaScriptのsplice()メソッドとは？配列の要素追加・削除を実例コードで解説

「CLICK HERE」ボタンをクリックすると、2番目の要素の後ろに新しい項目が挿入された配列が緑色のテキストで表示されます。

JavaScriptのsplice()メソッドとは？配列の要素追加・削除を実例コードで解説


  1. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj

  2. 画像配列（イメージアレイ）とは？OpenCVとC++のサンプルコードでわかりやすく解説

    配列（アレイ）とは、複数のデータをまとめて効率的に格納し、取り出すための便利な仕組みです。OpenCVでは、この配列の概念を活用することで、複数の画像をひとつの「画像配列」に読み込み、インデックス番号を指定するだけで目的の画像を表示できます。 本記事では、Mat型の行列配列に複数の画像を読み込み、インデックス番号を使って各画像を表示するC++のサンプルプログラムを紹介します。 画像配列の基本的な考え方 通常、1枚の画像を読み込む場合はMatオブジェクトを1つ宣言すれば十分ですが、複数の画像を扱いたい場合には、Mat型の配列を宣言することで管理が簡単になります。配列の各要素にはimread()関