White Space
WebLife

Javascript でオブジェクトの配列から特定の値を抜き出す

  • Javascript

オブジェクト（object）の配列（array）から、特定の要素を抜きだし、かつ元の配列からは抜き出した要素を削除する方法です。

コード

ここでは例として、arr配列の中からidがtargetIdと合致するオブジェクトを抜き出します。そして、arr配列はtargetIdが抜き出された状態にします。

// 抽出したいオブジェクトのID
const targetId = 2;

// 対象の配列
const arr = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
];

// 抽出
const extractedArr = arr.splice(
  arr.findIndex((obj) => obj.id === targetId)
  , 1
);

これを実行すると、

arr // [{id: 1}, {id: 3}] 
extractedArr // [{ id: 2 }]

となり、idが2のオブジェクトを抜き出すことができました。

解説

  • splice(インデックス番号, 1) … インデックス番号の要素を削除し、削除した要素を返す
  • findIndex(callback) … コールバック関数で配列の中身を一つ一つ検査し、true のものだけ返す

この二つの関数を組み合わせて使います。

まず、findIndex()でidがtargetIdのオブジェクトのインデックス番号を抽出します。ここでいうと番号は0から始まるので1が返ります。

次に、splice()の第一引数に先ほどのインデックス番号を入れ、第二引数に1を入れることでそのインデックス番号の要素を抜き出します。arr配列の中身も抜き出された後の状態になり、extractedArrは{id: 2}のオブジェクトが格納されます。

// 抽出
const extractedArr = arr.splice(
  arr.findIndex((obj.id) => obj.id === targetId)
  , 1
)[0];

注意

  • 抽出されたもの（extractedArr）も配列です。オブジェクトを取り出すには、extractedArr[0]などで取り出す必要があります。
  • findIndex()は最初に合致した要素を返すので、id: 2が複数あっても最初のオブジェクトの番号のみが返されます。
  • indeIndex()は値が見つからなかった場合、-1を返します。splice()の第一引数に-1を入れると「最後から1番目」になってしまうため、意図した挙動にならないかもしれません。見つからないことがある場合は if などで制御しましょう。