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

JavaScriptで配列から値を指定して要素を削除する方法

JavaScriptで配列から特定の値を持つ要素を削除するには、まずindexOf()メソッドでその値のインデックス（位置）を取得し、次にsplice()メソッドを使って該当する要素を取り除きます。

削除の基本的な手順

  1. indexOf()で削除したい値のインデックスを取得する
  2. インデックスが見つかった場合（-1より大きい場合）、splice(index, 1)でその位置の要素を1つ削除する

サンプルコード

以下のコードを実行して、実際の動作を確認してみましょう。

<html>
<body>
<script>
var array = [10, 30, 40, 80, 90];
var index = array.indexOf(90);
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: 10,30,40,80,90
New array after deletion: 10,30,40,80

コードの解説

array.indexOf(90)は、配列内で値「90」が最初に現れる位置を返します。もし値が配列内に存在しない場合は「-1」が返されるため、if (index > -1)という条件チェックを行うことで、存在しない値を削除しようとして意図しない動作になるのを防いでいます。

splice(index, 1)の第1引数は削除を開始するインデックス番号、第2引数は削除する要素の数を表します。この例では、インデックスの位置から1つの要素だけを削除しています。

元の配列を変更せずに削除する方法（filter）

splice()は元の配列を直接変更する（破壊的な）メソッドです。元の配列を保持したまま新しい配列を作成したい場合は、filter()メソッドを使うと便利です。

const array = [10, 30, 40, 80, 90];
const newArray = array.filter(item => item !== 90);
console.log(newArray); // [10, 30, 40, 80]
console.log(array);    // [10, 30, 40, 80, 90]（元の配列はそのまま）

用途に応じて、元の配列を書き換えてよい場合はsplice()、元の配列を残したい場合はfilter()を選択するとよいでしょう。

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

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

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

    JavaScriptでプログラミングをしていると、数値が格納された配列から特定の要素だけを削除したい場面によく出くわします。例えば、次のような配列から「5」という値をすべて取り除きたい場合などです。const arr = [2, 5, 9, 1, 5, 8, 5];この記事では、フレームワークに頼らず、素のJavaScript（コアJavaScript）だけで実装する方法を解説します。目標は、以下のように直感的に呼び出せるメソッドを作ることです。array.remove(値); splice()を使った削除メソッドの実装 配列から要素を削除する際に便利なのが、Arrayオブジェクトが標準で持