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

JavaScriptで配列から特定の要素を削除する方法｜splice()メソッドの使い方

JavaScriptで配列から特定の要素を削除するには、splice()メソッドを使用します。splice()メソッドは、既存の要素を削除すると同時に新しい要素を追加できる、配列の内容を直接変更するメソッドです。

splice()メソッドのパラメータ

  • index：配列の変更を開始する位置（インデックス番号）。

  • howMany：削除する要素の数を表す整数。0を指定した場合は、何も削除されません。

  • element1, ..., elementN：配列に追加する要素。要素を指定しない場合、splice()は単に該当する要素を削除するだけの動作になります。

以下のコードを実行すると、JavaScriptの配列に対して個々の要素を追加・削除する流れを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Array splice Method</title>
</head>
<body>
   <script>
      var arr = ["orange", "mango", "banana", "sugar", "tea"];

      // インデックス2の位置に "water" を挿入（削除数は0なので削除なし）
      var removed = arr.splice(2, 0, "water");
      console.log("追加後: " + arr);
      console.log("removed: " + removed);

      // インデックス3から1つの要素を削除
      removed = arr.splice(3, 1);
      console.log("削除後: " + arr);
      console.log("removed: " + removed);
   </script>
</body>
</html>

実行結果

追加後: orange,mango,water,banana,sugar,tea
removed: 
削除後: orange,mango,water,sugar,tea
removed: banana

押さえておきたいポイント

  • splice()は元の配列を直接変更する破壊的なメソッドです。
  • 戻り値として、削除された要素を含む新しい配列が返されます。削除された要素がない場合は空の配列が返ります。
  • 元の配列を変更せずに特定の値を除外した新しい配列を作成したい場合は、filter()メソッドの利用が便利です。
  1. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  2. Swiftの配列から特定の要素を削除する方法を徹底解説

    Swiftで配列から特定の要素を削除したい場合、いくつかの方法があります。この記事では、実際のコード例を交えながら、代表的な2つの方法をわかりやすく解説します。 まずは、String型の配列を用意しましょう。 var arrayOfString = [a,b,c,f] この配列を使って、以下の2つの方法で特定の要素を削除していきます。 方法1：filterメソッドを使う Swiftの配列にはfilterメソッドが標準で用意されています。これは、指定した条件に基づいて要素を絞り込み、新しい配列として返すメソッドです。削除したい要素を条件から除外することで、実質的にその要素を取り除くことができます