先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのループの中で、配列の中身を削除したいときはどうすればいいですか？」

先生

「配列の要素を削除する方法はいくつかありますが、ループの中で削除するときには注意が必要です。順番や番号が変わるからです。」

生徒

「えっ、順番や番号が変わるってどういうことですか？くわしく教えてください！」

先生

「それでは、ループ内で配列の要素を削除する時のポイントをわかりやすく説明しますね。」

1. 配列の要素を削除する基本方法：spliceメソッドとは？

配列から特定の要素を取り除くには、JavaScriptのsplice（スプライス）メソッドを使います。

このメソッドは、配列の中の指定した場所から、指定した数だけ要素を削除できます。例えば、2番目（インデックス1）の要素を1つ削除するにはこう書きます。


const arr = ["りんご", "バナナ", "みかん"];
arr.splice(1, 1);  // 1番目から1つ削除
console.log(arr);  // ["りんご", "みかん"]

この例では、「バナナ」が削除されました。

2. ループ内で配列の要素を削除するときの問題点

ここで問題になるのが、配列の要素を削除しながらループを回すと、配列の長さや要素の位置が変わってしまうことです。

例えば、次のコードを見てください。


const fruits = ["りんご", "バナナ", "みかん", "バナナ"];
for (let i = 0; i < fruits.length; i++) {
  if (fruits[i] === "バナナ") {
    fruits.splice(i, 1);  // バナナを見つけたら削除
  }
}
console.log(fruits);

このコードを実行すると、予想と違う結果になります。


["りんご", "みかん", "バナナ"]

実は、ループの中で要素を削除すると、配列のインデックスがずれて、2個目の「バナナ」を見逃してしまったのです。

3. 削除しながらループするときの対策：後ろからループする

この問題を防ぐには、ループを後ろから前に向かって回す方法があります。

配列の最後の要素から順番に見ていくので、削除しても前の要素の位置が変わらず、すべての削除対象を正しく処理できます。


const fruits = ["りんご", "バナナ", "みかん", "バナナ"];
for (let i = fruits.length - 1; i >= 0; i--) {
  if (fruits[i] === "バナナ") {
    fruits.splice(i, 1);
  }
}
console.log(fruits);


["りんご", "みかん"]

これで、すべての「バナナ」が削除されました。

4. filterメソッドを使った配列の要素削除（ループ不要）

実は、配列の中から特定の条件に合わない要素を除く方法として、filterメソッドを使う手もあります。

filterは配列の中から条件に合う要素だけを集めて、新しい配列を作ります。


const fruits = ["りんご", "バナナ", "みかん", "バナナ"];
const filtered = fruits.filter(function(item) {
  return item !== "バナナ";  // バナナ以外だけ残す
});
console.log(filtered);


["りんご", "みかん"]

filterを使うと、ループ処理を書かずにスッキリしたコードになります。

5. spliceとfilterの違いを理解しよう

spliceは元の配列を書き換えるので、その場で要素を削除したいときに使います。

一方、filterは元の配列は変えず、新しい配列を作るので、元の配列を残したいときに便利です。

6. forEachループ内での削除は注意が必要

forEachメソッドを使ったループでも、配列の要素を削除することはできますが、内部でループ回数が固定されているため、削除してもループの動きは変わりません。

そのため、forEach内での配列削除はバグの原因になることが多いのでおすすめしません。

7. 実用例：ループで数値の配列から偶数だけ削除する方法

最後に、実際に数値の配列から偶数だけを削除するコード例を紹介します。後ろからループしてspliceで削除します。


const numbers = [1, 2, 3, 4, 5, 6];
for (let i = numbers.length - 1; i >= 0; i--) {
  if (numbers[i] % 2 === 0) {  // 偶数のとき
    numbers.splice(i, 1);
  }
}
console.log(numbers);