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

JavaScriptのsplice()メソッドで配列から要素を削除する方法【コード例付き】

JavaScriptのsplice()メソッドを使うと、配列から指定した位置の要素を簡単に削除できます。このメソッドは元の配列を直接変更する点が特徴です。

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

arr.splice(start, deleteCount)
  • start: 削除を開始するインデックス位置（0から始まります）
  • deleteCount: 削除する要素の数。省略すると、開始位置から配列の末尾までがすべて削除されます

以下は、splice()メソッドを使用して配列の1番目から5番目の間の要素（インデックス1〜4）を削除するサンプルコードです。

コード例

<!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>splice()で要素を削除</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、1番目と5番目の要素の間が削除されます</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(1, 4);
        resEle.innerHTML = "削除後の配列 = " + arr;
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。



初期状態では、配列 [1, 3, 5, 7, 9, 11] が表示されています。「クリックしてください」ボタンを押すと、arr.splice(1, 4) によってインデックス1の「3」から数えて4つの要素（3、5、7、9）が削除され、以下のように結果が出力されます。

削除後の配列 = 1,11

ポイント解説

splice(1, 4) の意味は、「インデックス1の位置から、4つの要素を削除する」ということです。そのため、元の配列 [1, 3, 5, 7, 9, 11] から「3」「5」「7」「9」が取り除かれ、[1, 11] だけが残ります。

なお、splice()メソッドは削除だけでなく、第3引数以降に値を渡すことで要素の追加や置き換えも行えます。例えば arr.splice(1, 2, "a", "b") とすれば、2つの要素を削除した位置に新しい要素を挿入できます。配列操作において非常に便利なメソッドなので、ぜひ使いこなしましょう。

  1. JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

    JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。 注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <