JavaScript ルックアップテーブル
今日の記事では、JavaScript で簡単な方法を使用してルックアップテーブルを作成する方法を学習します。
JavaScript のルックアップテーブル
ルックアップテーブルは、ランタイム計算をデータ処理におけるより単純な配列インデックス操作に置き換える配列です。このプロセスは、直接アドレス指定と呼ばれます。JavaScript は、ルックアップ関数にオブジェクトを使用します。
これは、検索結果クエリのパフォーマンスを向上させるために使用される有名なアルゴリズムです。次の例でそれを理解しましょう。
製品の一覧表示を主な機能とする e コマース Web サイトを運営しているとします。ユーザーが選択したフィルターに基づいて、製品の価格を表示します。
この出力をクエリすると、サーバーにアクセスするたびにパフォーマンスが低下します。この問題を解決するために、最もよく使用されるフィルターに基づいて製品にインデックスを付けることができます。
const DBProductArray = [
{Color: 'Red', Size: 'Small', Price: '$450'},
{Color: 'Red', Size: 'Medium', Price: '$460'},
{Color: 'Red', Size: 'Large', Price: '$460'},
{Color: 'Red', Size: 'Extra-Large', Price: '$470'},
{Color: 'White', Size: 'Small', Price: '$650'},
{Color: 'White', Size: 'Medium', Price: '$660'},
{Color: 'White', Size: 'Large', Price: '$670'},
{Color: 'White', Size: 'Extra-Large', Price: '$680'}
];
const lookupMap = {};
上記の例では、サーバーの List API 操作により、DBProductArray があります。この配列には、製品 Color、Size、Price などの製品情報が含まれています。
エンドユーザーが選択したフィルターに応じて、Price 情報を表示する必要があります。検索を高速化するために、キーとして Color と Size の情報を key に、Price の情報を value に持つルックアップテーブルを作成することにします。
const arrayLength = DBProductArray.length;
for (i = 0; i < arrayLength; i++) {
var record = DBProductArray[i];
if (typeof lookupMap[record.Color] === 'undefined')
lookupMap[record.Color] = {};
lookupMap[record.Color][record.Size] = record.Price;
}
console.log(lookupMap);
出力：
{
Red: {
Extra-Large: "$470",
Large: "$460",
Medium: "$460",
Small: "$450"
},
White: {
Extra-Large: "$680",
Large: "$670",
Medium: "$660",
Small: "$650"
}
}
上記のコードは DBProductArray をループし、色情報がそこにあるかどうかを確認します。ネストされたオブジェクトが存在する場合は、そのキーとして色を作成します。
ネストされたオブジェクトには、キーとして size が含まれ、値として price が含まれます。データベースにクエリを実行せずに、選択した製品の価格情報を表示できるようになりました。これにより、応答時間が節約され、パフォーマンスが向上します。
const selectedColor = 'White';
const selectedSize = 'Large';
console.log(lookupMap[selectedColor][selectedSize]);
JavaScript をサポートする任意のブラウザで上記のコードスニペットを実行してみてください。以下の結果が表示されます。
出力：
"$670"
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn