JavaScriptでSQLクエリのように値から一致するキーを検索する方法
たとえば、次のようなオブジェクトがあるとしましょう。
const obj = {"100":"Jaipur","101":"Delhi","102":"Raipur","104":"Goa"};この記事では、第一引数にこのようなオブジェクト、第二引数に検索語(クエリ)を受け取るJavaScript関数を作成します。関数は、渡された検索語が値に含まれるすべてのキー/値ペアを抽出して返す必要があります。ちょうどSQLのLIKE句による部分一致検索のように動作させるイメージです。
実装のアプローチはシンプルです。オブジェクトを先頭から順に走査しながら、条件に合致した要素だけを結果オブジェクトへ格納していき、最後にその結果オブジェクトを返すだけです。
実装例
コードは以下のようになります。
const obj = {
"100": "Jaipur",
"101": "Delhi",
"102": "Raipur",
"104": "Goa"
};
const findByQuery = (obj, query) => {
const keys = Object.keys(obj);
const res = {};
keys.forEach(key => {
// 大文字・小文字を区別しない検索
if(obj[key].toLowerCase().includes(query.toLowerCase())){
res[key] = obj[key];
};
});
return res;
};
console.log(findByQuery(obj, 'Pur'));コードのポイント
- Object.keys(obj): オブジェクトのすべてのキーを配列として取得します。
- forEach(): 各キーに対して順番に処理を行います。
- toLowerCase() + includes(): 値と検索語の両方を小文字に揃えてから比較することで、大文字・小文字を区別しない柔軟な部分一致検索を実現しています。
- 条件に合致した場合のみ、
res[key] = obj[key]で結果オブジェクトにペアを追加します。
出力結果
コンソールには次のように出力されます。
{ '100': 'Jaipur', '102': 'Raipur' }検索語 'Pur' を含む値「Jaipur」と「Raipur」に対応するキー 100 と 102 だけが結果として取得できていることがわかります。「Delhi」「Goa」は検索語を含まないため除外されています。
別の書き方:filterを使った方法
Object.entries() と filter() を組み合わせると、より簡潔に記述することもできます。
const findByQuery = (obj, query) =>
Object.fromEntries(
Object.entries(obj).filter(([key, value]) =>
value.toLowerCase().includes(query.toLowerCase())
)
);どちらの方法でも同じ結果が得られますので、コードの可読性やチームのコーディングスタイルに合わせて選択するとよいでしょう。
-
JavaScriptでハッシュのキーを取得するには?Object.keys()メソッドの使い方
JavaScriptでは、ハッシュは一般的にオブジェクトとして表現されます。オブジェクトが持つすべてのキー(プロパティ名)を取得したい場合、最も簡単で推奨される方法がObject.keys()メソッドです。このメソッドは、指定したオブジェクトの列挙可能なプロパティ名を文字列の配列として返します。 基本構文 Object.keys(オブジェクト名) 戻り値はキー名の配列になるため、そのまま配列操作メソッド(forEachやmapなど)と組み合わせて使えるのも大きな利点です。 サンプルコード 以下は、ボタンをクリックするとハッシュ(オブジェクト)のキーを画面に表示する例です。 <!DOCTY
-
JavaScriptのImage()オブジェクトとは?使い方とサンプルコードを解説
JavaScriptにおけるImage()オブジェクトは、HTMLの<img>要素を表すオブジェクトです。このオブジェクトを使うことで、JavaScriptから動的に画像を生成し、Webページに追加することができます。Image()コンストラクタには、引数として画像の幅と高さをピクセル単位で指定できます。また、生成した画像オブジェクトのsrcプロパティに画像のURLを設定することで、画像を読み込むことが可能です。Image()オブジェクトの基本的な使い方以下は、JavaScriptでImage()オブジェクトを使用するサンプルコードです。コード例<!DOCTYPE html&