Program React web

【JavaScript】配列の中から特定の要素を検索する方法【配列操作 find/findIndex/filter】

今回の記事ではJavaScriptにおいて、配列の中から特定の条件を満たす要素を検索する方法について紹介したいと思います。

条件に一致する配列の要素を取得する（find)

条件に一致する配列の要素を取得するには、findメソッドを使います。

例としてはこんな感じ。

let list = [
            {name:"apple",color:"red"},
            {name:"banana",color:"yellow"},
            {name:"grape",color:"purple"}
];
let fruit = list.find(element => element.color === "yellow"); 
console.log(fruit.name)
>> banana

ポイント：findメソッドは条件に一致した最初の要素が返ってくるので、複数ある場合は注意が必要です。

条件に一致する配列の要素から新しい配列を作る（filter)

配列の中から、条件に一致するものだけを絞り新しい配列を作るには、filterメソッドを使用します。

例としてはこんな感じ。

let list = [
            {name:"apple",color:"red"},
            {name:"banana",color:"yellow"},
            {name:"grape",color:"purple"},
            {name:"strawberry",color:"red"}
];
let fruit = list.filter(element => element.color === "red"); 
console.log(fruit)
>> 
[
  { name: 'apple', color: 'red' },
  { name: 'strawberry', color: 'red' }
]

こちらを使えば、findメソッドのとは異なり、条件に一致するものだけを抜き出した新たな配列を作成することができます。

このメソッドも使用する機会が多いので、ぜひ覚えておきましょう。

条件に一致する配列のインデックスを取得する（findIndex)

findメソッドが要素そのものを取得するのに対し、findIndexメソッドは条件に一致するインデックスを取得します。

例としては、以下のような感じ。

let list = [
            {name:"apple",color:"red"},
            {name:"banana",color:"yellow"},
            {name:"grape",color:"purple"},
            {name:"strawberry",color:"red"}
];
let fruitIndex = list.findIndex(element => element.color === "purple"); 
console.log(fruitIndex)
>> 2

こちらも、条件に一致する最初の要素のインデックス（何個目の要素か）を取得するため、注意が必要です。

さらに発展した使い方としては、配列から要素を取り除きたいときなどに役立つと思います。

要素を配列から削除する（spliceメソッド）

特定の要素を配列から削除するには、spliceメソッドを使用します。

例としては以下のようになります。

let list = [
            {name:"apple",color:"red"},
            {name:"banana",color:"yellow"},
            {name:"grape",color:"purple"},
            {name:"strawberry",color:"red"}
];
list.splice(2,1);
console.log(list)
>>
[
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'strawberry', color: 'red' }
]

spliceメソッドの第一引数には何個目の要素か、第二引数には個数を指定します。

また、第三引数をセットすることもでき、セットすると要素を入れ替えるメソッドとして機能します。

条件に一致する要素を配列から削除する（findIndexとsplice)

ここまでのfindIndexメソッドとspliceメソッドの二つを組み合わせることにより、配列内の特定の要素を削除することができます。

つまり、filterメソッドと同じことを実現できます。（ただし、条件は反転する）

まずは、findIndexとspliceを使用した場合。

let list = [
            {name:"apple",color:"red"},
            {name:"banana",color:"yellow"},
            {name:"grape",color:"purple"},
            {name:"strawberry",color:"red"}
];
let fruitIndex = list.findIndex(element => element.color === "purple"); 
list.splice(fruitIndex,1);
console.log(list);
>>
[
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'strawberry', color: 'red' }
]

次に、filterメソッドを使用した場合。

let list = [
            {name:"apple",color:"red"},
            {name:"banana",color:"yellow"},
            {name:"grape",color:"purple"},
            {name:"strawberry",color:"red"}
];
let newList = list.filter(element => element.color !== "purple"); 
console.log(newList);
>>
[
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'strawberry', color: 'red' }
]

どちらでも同じ結果を得ることができますが、基本的にはfilterメソッドを使用するのがいいと思います。

しかし、より複雑な条件となれば使い道があるかもしれないですね。

-Program, React, web
-, ,