JavaScriptで配列やオブジェクトの値を検索する方法

JavaScriptにて配列やオブジェクトの値を検索する際、今までだとループを回してifで一致しているデータを抽出するような形を取っていた。ただ、他社が作成されたソースコードを拝見した際にもっと簡潔に記述しているのを見かけた。以下に使い方及びソースコードをメモ。

1件のみ検索する場合

配列

const array = [
    { id: 1, name: `山田`},
    { id: 2, name: `鈴木` },
    { id: 3, name: `佐々木` },
];
const result = array.find((elem) => elem.id === 1);
console.log(result); //Object { id: 1, name: "山田" }

オブジェクト

Object.entriesの部分はオブジェクトを配列に変換している。

const obj = {
    'apple' : { price: 200, name: `りんご`},
    'orange' : { price: 300, name: `オレンジ`},
    'grapes' : { price: 400, name: `ぶどう` },
}
const result = Object.entries(obj).find(([id, elem]) => elem.price === 200);
console.log(result); //Array ['apple', { price: 200, name: `りんご`}]

注意点

find()メソッドは配列内の条件を満たす最初の要素のみ帰ってくる点に注意。具体的には以下のようなソースコードの場合に「id:1, name:田中」は返ってこない。

const array = [
    { id: 1, name: `山田`},
    { id: 1, name: `田中`},
    { id: 2, name: `鈴木` },
    { id: 3, name: `佐々木` },
];
const result = array.find((elem) => elem.id === 1);
console.log(result); //Object { id: 1, name: "山田" }

尚、条件を満たす値が無い場合は「undefined」が返ってくる。

複数件検索する場合

配列

const array = [
    { id: 1, name: `山田`},
    { id: 1, name: `田中`},
    { id: 2, name: `鈴木` },
    { id: 3, name: `佐々木` },
];
const result = array.filter((elem) => elem.id === 1);
console.log(result);
/*
Array [ {…}, {…} ]
0: Object { id: 1, name: "山田" }
1: Object { id: 1, name: "田中" }
*/

オブジェクト

const obj = {
    'apple' : { price: 200, name: `りんご`},
    'lemon' : { price: 200, name: `レモン`},
    'orange' : { price: 300, name: `オレンジ`},
    'grapes' : { price: 400, name: `ぶどう` },
}
const result = Object.entries(obj).filter(([id, elem]) => elem.price === 200);
console.log(result); //Array ['apple', { price: 200, name: `りんご`}]
/*
Array [ {…}, {…} ]
0: Array['apple' : { price: 200, name: `りんご`}]
1: Array['lemon' : { price: 200, name: `レモン`}]
*/

存在チェックのみ行う場合

配列

const array = [
    { id: 1, name: `山田`},
    { id: 2, name: `鈴木` },
    { id: 3, name: `佐々木` },
];
console.log(array.some((elem) => elem.id === 1)); //true
console.log(array.some((elem) => elem.id === 5)); //false

上記ソースコードの場合、配列の中にオブジェクトが入っているが、配列のみの場合は以下のような形になる。

const array = [1,2,3,4,5];
console.log(array.some((elem) => elem === 1)); //true
console.log(array.some((elem) => elem === 6)); //false

オブジェクト

const obj = {
    'apple' : { price: 200, name: `りんご`},
    'orange' : { price: 300, name: `オレンジ`},
    'grapes' : { price: 400, name: `ぶどう` },
}
console.log(Object.entries(obj).some(([id, elem]) => elem.price === 200)); //true
console.log(Object.entries(obj).some(([id, elem]) => elem.price === 500)); //false

リファレンス

find

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find

filter

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

some

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Object.entries

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries