【JavaScript】配列から特定の要素を削除する様々な方法！

JavaScriptでは、配列から特定の要素を削除するメソッドがいくつかあります。それぞれのメソッドには独自の特徴があり、目的に応じて使い分けることで、より効率的に配列を操作できます。

この記事では『配列から特定の要素を削除する方法』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • splice()メソッドで特定の要素を削除する
  • filter()メソッドで特定の要素を削除する
  • pop()メソッドで末尾の要素を削除する
  • shift()メソッドで先頭の要素を削除する
  • delete演算子で特定の要素を削除する

splice()メソッドで特定の要素を削除する

splice()メソッドは、配列の特定の位置にある要素を削除したり、新しい要素を追加したりできるメソッドです。splice()メソッドは、元の配列を直接変更します。

サンプルコードを以下に示します。

let arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(1, 3); // インデックス1から3つの要素を削除
console.log(arr); // [1, 5] (元の配列が変更されている)
console.log(removedElements); // [2, 3, 4] (削除された要素)

splice()メソッドのポイント

  • 元の配列が直接変更されるので、元の状態を保持したい場合には注意が必要です。
  • 第1引数には削除開始位置（インデックス）を指定し、第2引数には削除する要素の数を指定します。

filter()メソッドで特定の要素を削除する

filter()メソッドは、条件を満たす要素を抽出して新しい配列を作成するメソッドです。filter()メソッドは、元の配列はそのままの状態が保持するので、安全に要素を削除したい場合に便利です。

サンプルコードを以下に示します。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter((item) => item !== 3); // 「3」以外要素を抽出
console.log(newArr); // [1, 2, 4, 5] (新しい配列)
console.log(arr); // [1, 2, 3, 4, 5] (元の配列はそのまま)

filter()メソッドのポイント

  • 元の配列を変更せずに、新しい配列を返す。
  • 削除する条件を指定できるので、柔軟なフィルタリングが可能。
  • 削除対象の要素が複数ある場合も一度に処理できる。

あわせて読みたい

『filter()メソッド』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

【JavaScript】filterメソッドで配列のデータを抽出する方法
【JavaScript】filterメソッドで配列のデータを抽出する方法

続きを見る

pop()メソッドで末尾の要素を削除する

pop()メソッドは、配列の最後の要素を取り除くメソッドです。pop()メソッドは、元の配列を直接変更します。

サンプルコードを以下に示します。

let arr = [1, 2, 3, 4, 5];
let removedElement = arr.pop(); // 最後の要素5を削除
console.log(arr); // [1, 2, 3, 4] (元の配列が変更されている)
console.log(removedElement); // 5 (削除された要素)

pop()メソッドのポイント

  • 元の配列が直接変更されるので、元の状態を保持したい場合には注意が必要です。
  • 常に末尾の要素を削除するため、特定の要素を削除するには適していません。
  • 末尾の要素を取り除く場合に最適なメソッドです。

shift()メソッドで先頭の要素を削除する

shift()メソッドは、配列の最初の要素を取り除くメソッドです。shift()メソッドは、元の配列を直接変更します。

サンプルコードを以下に示します。

let arr = [1, 2, 3, 4, 5];
let removedElement = arr.shift(); // 最初の要素1を削除
console.log(arr); // [2, 3, 4, 5] (元の配列が変更されている)
console.log(removedElement); // 1 (削除された要素)

pop()メソッドのポイント

  • 元の配列が直接変更されるので、元の状態を保持したい場合には注意が必要です。
  • 常に先頭の要素を削除するため、特定の要素を削除するには適していません。
  • 先頭の要素を取り除く場合に最適なメソッドです。
  • スタックやキューの操作をシミュレートする場合に役立ちます。

delete演算子で特定の要素を削除する

delete演算子は、配列の特定のインデックスの要素を削除しますが、その位置にundefinedが残ります。配列の長さは変わりません。

サンプルコードを以下に示します。

let arr = [1, 2, 3, 4, 5];
delete arr[2]; // 要素3を削除
console.log(arr); // [1, 2, undefined, 4, 5] (元の配列は変更されているが、要素が `undefined` になっている)

delete演算子のポイント

  • 要素は削除されますが、配列の長さは変わらず、インデックスはそのままです。
  • delete を使うと、インデックスの間に空の要素が存在することになります。そのため、配列の操作や繰り返し処理を行う際に問題を引き起こす可能性があります。

本記事のまとめ

この記事では『配列から特定の要素を削除する方法』について説明しました。JavaScriptで配列から特定の要素を削除するメソッドは複数ありますが、それぞれに適した用途があります。

  • 元の配列を変更したい場合は、splice()やpop()、shift()を使います。
  • 元の配列を変更せずに新しい配列を作成したい場合は、filter()を使います。
  • deleteは特定の用途で役立ちますが、要素の削除には適さないので注意が必要です。

また、各メソッドを表でまとめると以下のようになります。

メソッド元の配列が変更されるか特徴
splice()変更される指定した範囲の要素を削除・追加する
filter()変更されない条件を満たす要素だけを新しい配列として返す
pop()変更される配列の最後の要素を取り除く
shift()変更される配列の最初の要素を取り除く
delete演算子変更されるがundefinedが残る指定した要素を削除するが、配列の長さは変わらない

お読み頂きありがとうございました。