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

JavaScriptのsplice()メソッドの使い方！配列への要素追加・削除を実例付きで解説

JavaScriptのsplice()メソッドは、配列に対して要素の追加・削除・置き換えを一度に行える便利なメソッドです。元の配列を直接変更し、削除された要素を新しい配列として返すのが特徴です。

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

array.splice(index, num, item1, ....., itemX)

各パラメータの意味

  • index：要素の追加・削除を開始する位置を示す整数（インデックス番号）。負の値を指定すると、配列の末尾から数えた位置になります。
  • num：削除する要素の個数。0 を指定すると何も削除されず、要素の挿入のみ行われます。
  • item1 … itemX：配列に新しく追加する要素（省略可能）。複数個指定できます。

それでは、実際にsplice()メソッドを使ったサンプルコードを見ていきましょう。

使用例1：既存の要素を別の要素に置き換える

<!DOCTYPE html>
<html>
<body>
<h2>Products</h2>
<p>クリックすると更新後の商品リストが表示されます...</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
    var products = ["Electronics", "Books", "Accessories"];
    document.getElementById("test").innerHTML = products;
    function display() {
        products.splice(1, 2, "Pet Supplies", "Footwear");
        document.getElementById("test").innerHTML = products;
    }
</script>
</body>
</html>

実行結果

JavaScriptのsplice()メソッドの使い方！配列への要素追加・削除を実例付きで解説

上記の「Result」ボタンをクリックすると −

JavaScriptのsplice()メソッドの使い方！配列への要素追加・削除を実例付きで解説

この例では、インデックス 1 の位置から 2 つの要素（「Books」と「Accessories」）を削除し、その位置に「Pet Supplies」と「Footwear」を挿入しています。

使用例2：配列の末尾に新しい要素を追加する

<!DOCTYPE html>
<html>
<body>
<h2>Products</h2>
<p>クリックすると更新後の商品リストが表示されます...</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
    var products = ["Electronics", "Books", "Accessories"];
    document.getElementById("test").innerHTML = products;
    function display() {
        products.splice(3, 1, "Pet Supplies", "Footwear", "Home Appliances");
        document.getElementById("test").innerHTML = products;
    }
</script>
</body>
</html>

実行結果

JavaScriptのsplice()メソッドの使い方！配列への要素追加・削除を実例付きで解説

「Result」ボタンをクリックすると −

JavaScriptのsplice()メソッドの使い方！配列への要素追加・削除を実例付きで解説

この例では、インデックス 3（存在しない末尾以降の位置）から処理を開始しているため、既存の要素は削除されず、新しい要素がその位置から順番に追加されます。

まとめ

splice()メソッドを使うことで、配列の任意の位置にある要素を柔軟に操作できます。削除のみ、追加のみ、あるいは両方を同時に行うことも可能です。なお、戻り値として得られるのは削除された要素の配列である点に注意しましょう。要素の検索や結合には slice() や concat() などの他の配列メソッドと組み合わせると、より効率的にコードを書けます。

  1. JavaScriptのArray.flat()メソッドとは？使い方をわかりやすく解説

    Array.flat()メソッドの基本JavaScriptのArray.flat()メソッドは、ネストされた（入れ子になった）配列を、指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列は変更されず、新しい平坦化された配列が生成される点が特徴です。引数には平坦化の深さ（depth）を数値で指定します。深さを指定しない場合のデフォルト値は「1」です。また、「Infinity」を指定すると、どれほど深くネストされた配列でも完全に平坦化できます。構文arr.flat(depth)depth（省略可能）：ネストされた配列を展開する深さ。デフォルトは1。サンプルコード以下は、Ar

  2. JavaScriptのArray.prototype.includes()メソッドとは？配列内に特定の要素が含まれるか判定する方法

    Array.prototype.includes()メソッドとは JavaScriptのArray.prototype.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するためのメソッドです。要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。 基本構文 arr.includes(searchElement[, fromIndex]) searchElement：検索対象となる要素を指定します。 fromIndex（省略可能）：検索を開始するインデックス位置です。省略した場合は先頭（0）から検索されます。 サンプルコード 以下は、in