자바스크립트 룩업 테이블
오늘의 포스트에서는 자바스크립트에서 간단한 방법을 사용하여 룩업 테이블을 만드는 방법을 배울 것입니다.
JavaScript의 룩업 테이블
조회 테이블은 데이터 처리에서 런타임 계산을 더 간단한 배열 인덱싱 작업으로 대체하는 배열입니다. 이 프로세스를 직접 주소 지정이라고 합니다. JavaScript는 조회 기능을 위해 객체를 사용합니다.
이것은 검색 결과 쿼리의 성능을 높이는 데 사용되는 유명한 알고리즘입니다. 다음 예를 통해 이해해 봅시다.
제품 목록을 주요 기능으로 하는 전자 상거래 웹사이트를 운영한다고 가정합니다. 사용자가 선택한 필터를 기준으로 제품의 가격을 표시합니다.
이 출력을 쿼리하면 서버에 액세스할 때마다 성능이 저하됩니다. 이 문제를 해결하기 위해 가장 많이 사용되는 필터를 기반으로 제품을 색인화할 수 있습니다.
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와 같은 제품 정보가 포함됩니다.
최종 사용자가 선택한 필터에 따라 가격 정보를 표시해야 합니다. 검색 속도를 높이기 위해 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