配列でindexOfを使用して指定の値を削除したい時の注意点

はじめに

配列で指定の値を削除する際に躓いたので記事にまとめます。

目次

1. 配列内のデータを消す方法
2. indexOfを使用して躓いた

配列内のデータを消す方法

配列内のデータを削除するメソッドはいくつかあります。

①popメソッド
配列内で一番最後の値を削除します。

let array = ["a", "b", "c"]
array.pop()

// arrayの中身
// ["a", "b"]

②shift
配列内で一番最初の値を削除します

let array = ["a", "b", "c"]
array.shift()

// arrayの中身
// ["b", "c"]

③splice
削除する要素の位置と個数を指定して削除（第一引数に削除する位置、第二引数に削除する個数）

let array = ["a", "b", "c"]
array.splice(1, 2)
// arrayの中身
// ["a"]

更に第３引数には削除した位置に要素を追加

let array = ["a", "b", "c"]
array.splice(1, 2, "z")
// arrayの中身
// ["a", "z"] 

④filter
要素を検索して削除

// aがつく値
let array = ["a", "b", "c"]
array.filter(item => item.match(/a/));

// a以外の値

array.filter(item => item.match(/a/)　=== null);
// b c

indexOfを使用して躓いた

indexOfメソッドとは
indexOfメソッドはその要素が配列内で何番目にあるのか取得できます。これをspliceと組み合わせると、ユーザーがクリックした時にその要素が何番目かを取得して配列内から削除することができます。

let array = ["a", "b", "c", "d", "e"]
let index = array.indexOf('d')

if (index > -1) {
  array.splice(index, 1);
}

// arrayの中身
//  ["a", "b", "c", "e"]

indexOfを使用する時の注意点
indexOfメソッドは===(厳密等価)を使用して値の比較を行なっています。比較が完全に同じ値でないとindexOfメソッドの検索に引っかかりません。つまり、プリミティブな値でなくてはいけません。

indexOf() は searchElement と配列の要素を 厳密等価 (三重イコール演算子 === で使われるのと同じ方法) を使って比較します。

オブジェクトでinexOfを使用すると検索に引っかからないため、返り値が必ず-1になります。
つまり、配列の一番最後の値が削除されてしまい指定した値が削除されない可能性があります。

indexOf() メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。

MDN Array.prototype.indexOf()

この辺に気づかずにはまってしまいしました。指定した値が間違えているのか、メソッドの理解が間違えているのか注意していこうと思います。