0Pricing
JavaScript Academy · บทเรียน

ดัชนีและการค้นหา

ค้นข้อมูลอย่างมีประสิทธิภาพด้วยดัชนี

ดัชนีและการค้นหา เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้ดัชนี

โดยค่าเริ่มต้น คุณจะค้นหาระเบียนได้ด้วยคีย์หลักเท่านั้น ดัชนี ช่วยให้คุณสืบค้นด้วยคุณสมบัติอื่นได้อย่างมีประสิทธิภาพ เช่น ค้นหาผู้ใช้ทั้งหมดที่มีนามสกุลเดียวกัน

การสร้างดัชนี

สร้างดัชนีภายใน onupgradeneeded ทันทีหลังจากสร้างที่เก็บข้อมูลด้วย store.createIndex(name, keyPath, options)

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('byEmail', 'email', { unique: true });
};

แบบไม่ซ้ำกับแบบซ้ำได้

ตัวเลือก unique บังคับไม่ให้มีระเบียนสองรายการใช้ค่าดัชนีเดียวกัน ใช้ unique: false ซึ่งเป็นค่าเริ่มต้น เมื่อมีระเบียนหลายรายการใช้ค่าเดียวกันได้ เช่น ชื่อเมือง

store.createIndex('byCity', 'city', { unique: false });
store.createIndex('byEmail', 'email', { unique: true });

การสืบค้นผ่านดัชนี

รับดัชนีจากที่เก็บข้อมูลภายในธุรกรรม จากนั้นเรียก get หรือ getAll บนดัชนีนั้นโดยใช้ค่าของคุณสมบัติที่ทำดัชนีไว้

const tx = db.transaction('users', 'readonly');
const index = tx.objectStore('users').index('byEmail');
const req = index.get('ada@example.com');
req.onsuccess = () => console.log(req.result);

getAll

getAll() ส่งคืนระเบียนทั้งหมดที่ตรงกันเป็นอาร์เรย์ในคำขอเดียว ซึ่งง่ายกว่าการวนซ้ำด้วยเคอร์เซอร์สำหรับชุดผลลัพธ์ขนาดปานกลาง

const index = store.index('byCity');
const req = index.getAll('Paris');
req.onsuccess = () => {
  console.log('found', req.result.length, 'users in Paris');
};

ช่วงคีย์

IDBKeyRange ใช้อธิบายช่วงของคีย์สำหรับการสืบค้นตามช่วง ตัวช่วยประกอบด้วย only, lowerBound, upperBound และ bound

const range = IDBKeyRange.bound(18, 65); // ages 18..65
const index = store.index('byAge');
index.getAll(range);

ตัวเลือกของ bound

IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen) สามารถตัดจุดปลายช่วงออกได้ ขอบเขตแบบเปิดจะไม่รวมค่าที่ปลายช่วง

// 18 inclusive, 65 exclusive:
const range = IDBKeyRange.bound(18, 65, false, true);
// lowerBound(10) => keys >= 10
// upperBound(10, true) => keys < 10

เคอร์เซอร์

สำหรับชุดผลลัพธ์ขนาดใหญ่หรือการวนซ้ำแบบกำหนดเอง ให้เปิดเคอร์เซอร์ด้วย index.openCursor(range) เคอร์เซอร์จะเยี่ยมชมระเบียนที่ตรงกันทีละรายการ คุณจึงไม่ต้องโหลดข้อมูลทั้งหมดไว้ในหน่วยความจำ

const req = store.index('byCity').openCursor();
req.onsuccess = (e) => {
  const cursor = e.target.result;
  if (cursor) {
    console.log(cursor.value);
    cursor.continue(); // move to next match
  }
};

การนับรายการที่ตรงกัน

index.count(range) ส่งคืนจำนวนระเบียนที่ตรงกันโดยไม่ต้องดึงระเบียนเหล่านั้นมา จึงทำงานได้รวดเร็วและใช้หน่วยความจำน้อย

const req = store.index('byCity').count('Paris');
req.onsuccess = () => console.log('count:', req.result);

การดึงเฉพาะคีย์

getAllKeys และเคอร์เซอร์คีย์จะส่งคืนเฉพาะคีย์หลักของระเบียนที่ตรงกัน เหมาะเมื่อคุณต้องการเพียงข้อมูลอ้างอิง ไม่ใช่วัตถุทั้งหมด

const req = store.index('byCity').getAllKeys('Paris');
req.onsuccess = () => console.log('keys:', req.result);

ทบทวนการสืบค้น

ดัชนีเปลี่ยน IndexedDB ให้เป็นที่เก็บข้อมูลที่สืบค้นได้: สร้างดัชนีใน onupgradeneeded จากนั้นใช้ get, getAll, ช่วงคีย์ และเคอร์เซอร์ เพื่อดึงเฉพาะระเบียนที่ต้องการ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับดัชนีและการสืบค้น

ทบทวน

คุณได้เรียนรู้เกี่ยวกับดัชนีและการสืบค้นแล้ว:

  • สร้างดัชนีใน onupgradeneeded ด้วย createIndex
  • ตัวเลือก unique บังคับให้ค่าทั้งหมดไม่ซ้ำกัน
  • สืบค้นผ่าน index.get / getAll
  • IDBKeyRange ช่วยให้สืบค้นตามช่วงได้
  • เคอร์เซอร์ใช้วนดูชุดข้อมูลขนาดใหญ่ ส่วน count ใช้นับรายการที่ตรงกัน

ถัดไปคือการจัดการรุ่นและการอัปเกรด

คำถามที่พบบ่อย

บทเรียน “ดัชนีและการค้นหา” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ดัชนีและการค้นหา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ดัชนีและการค้นหา”

ค้นข้อมูลอย่างมีประสิทธิภาพด้วยดัชนี คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ดัชนีและการค้นหา” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การเปิดฐานข้อมูล
  2. ธุรกรรมและ CRUD
  3. ดัชนีและการค้นหา
  4. การกำหนดเวอร์ชันและการอัปเกรด
← กลับไปที่ JavaScript Academy