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

JavaScript配列から特定の要素を削除する方法をわかりやすく解説

JavaScriptの配列から特定の要素を削除したい場合、indexOf()メソッドとsplice()メソッドを組み合わせるのが基本的な手法です。まずindexOf()で削除したい要素のインデックス（位置）を取得し、その後splice()を使ってその位置の要素を取り除きます。

削除の手順

  1. indexOf()メソッドに削除したい値を渡して、配列内でのインデックスを取得します。
  2. 取得したインデックスが「-1」以外の場合（＝要素が存在する場合）、splice()メソッドでその要素を1つ削除します。

なお、indexOf()は指定した値が配列内に存在しない場合に「-1」を返すため、splice()を実行する前に必ずチェックすることが重要です。

サンプルコード

<html>
   <body>
      <script>
         var array = [40, 20, 70, 50];
         var index = array.indexOf(70);
         document.write("Original array: " + array);
         if (index > -1) {
            array.splice(index, 1);
         }
         document.write("<br>New array after deletion: " + array);
      </script>
   </body>
</html>

実行結果

Original array: 40,20,70,50
New array after deletion: 40,20,50

コードのポイント

  • array.indexOf(70)：配列から値「70」を探し、そのインデックス（この例では「2」）を返します。
  • array.splice(index, 1)：第1引数で指定した位置から、第2引数で指定した個数（ここでは1個）の要素を削除します。

splice()は元の配列を直接変更する（破壊的な）メソッドである点に注意してください。元の配列を残したまま新しい配列を作りたい場合は、filter()メソッドを使う方法も便利です。

  1. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数

  2. JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】

    JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-