LoginSignup
2

More than 3 years have passed since last update.

【JS】オブジェクトから要素を削除する方法。filterとfindの活用

Posted at

オブジェクトから該当する要素を削除する方法について。

例えば、以下のようなオブジェクトがあった場合に、指定した要素を削除する場合を考える。

obj = [{a:1, b:2}, {a:1, b:3}, {a:2, b:3}, {a:3, b:4}]

目次

  1. 元のオブジェクトを利用する場合
    1. 要素が1つの場合
    2. 要素が2つ以上の場合
  2. 元のオブジェクトを利用しない場合
  3. どれか一つのプロパティが一致する要素を削除する場合


元のオブジェクトを利用する場合

元のオブジェクトを使って除外する要素を指定する場合は判定式が使える。

要素が1つの場合

要素が一つの場合は、filterを使えば実現可能。例えば、配列番号3の{a:3, b:4}を削除する場合は以下のような式になる。

obj = [{a:1, b:2}, {a:1, b:3}, {a:2, b:3}, {a:3, b:4}]
removeObj = obj[3]

res = obj.filter( elem => elem != removeObj)

console.log(res)
//[{a:1, b:2}, {a:1, b:3}, {a:2, b:3}]

obj.filter( elem => elem != removeObj)

  • objの要素を一つづつ抜き出し、elemという変数に代入する
  • =>以降の処理がtrueの場合のみ要素を抜き出す。
  • つまり、要素がremoveObjと一致する場合は抜き出さない(削除)する処理となる。



removeObj = obj[3]のように、元のオブジェクトを使って要素を指定しているため、要素どうしの比較が可能


要素が2つ以上の場合

要素が2つ以上の場合はfilterとfindを使う必要がある。配列番号0と1の要素を排除する場合は以下のようになる。

obj = [{a:1, b:2}, {a:1, b:3}, {a:2, b:3}, {a:3, b:4}]
removeObj2 = [obj[0], obj[1]]

res2 = obj.filter( elem => !removeObj2.find( x => x == elem ))

console.log(res2)
//[{a:2, b:3}, {a:3, b:4}]

obj.filter( elem => 処理)

  • filterを使ってobjの要素を一つ一つ抜き出す。(変数elemに代入)

!removeObj2.find( x => x == elem )

  • findは処理結果がtrueになった要素を返す処理。
  • !をつけ、排除したい要素とobjの要素が一致した場合はfalseを返す。
  • filterはtrueの場合は要素を抽出するが、falseの場合は抽出しない(除外する)


元のオブジェクトを利用しない場合

元のオブジェクトを利用しない場合は、filterとfindを使うことで、指定した要素を排除できる。

obj = [{a:1, b:2}, {a:1, b:3}, {a:2, b:3}, {a:3, b:4}]
removeObj = [{a:1, b:2}, {a:3, b:4}]

res = obj.filter( elem => !removeObj
    .find( x => x.a == elem.a && x.b == elem.b )
    )

console.log(res)
//[{a:1, b:3}, {a:2, b:3}]

元のオブジェクトからfilterを使って要素を一つづつ取り出し、中のプロパティを一つ一つ比較していく必要がある。

removeObj.find( 変数 => 処理 )

  • 処理結果がtrueになった最初の要素を返す。
  • x => x.a == elem.a && x.b == elem.b removeObjのプロパティaとbが元のオブジェクトの要素と一致した場合にその値を返す。(xはremoveObjの要素を一つ一つ取り出した変数)
  • !をつけ、排除したい要素とobjの要素が一致した場合はfalseを返す。


どれか一つのプロパティが一致する要素を削除する場合

複数あるプロパティの中で、a:1となっている要素を全て除外する場合はfilterのみで実現可能。

obj = [{a:1, b:2}, {a:1, b:3}, {a:2, b:3}, {a:3, b:4}]

res = obj.filter( elem => !(elem.a == 1) )

console.log(res)
//[{a:2, b:3}, {a:3, b:4}]

!(elem.a == 1)
filterで抜き出した要素(elem)のプロパティaが1となる場合はfalseを返し除外する。


(補足)filterのみで記述する場合

要素が1つの場合は、findを使わずfilterのみで記述することも可能だが汎用性がないため特に不要。

記述は以下のようになる。

obj = [{a:1, b:2}, {a:1, b:3}, {a:2, b:3}, {a:3, b:4}]
removeObj3 = [{a:3, b:4}]

res3 = obj.filter( elem => !(removeObj3[0].a == elem.a && removeObj3[0].b == elem.b )
    )
console.log(res3)
//[{a:1, b:2}, {a:1, b:3}, {a:2, b:3}]

removeObj3[0].aのようにプロパティの値を直接指定し、比較している。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2