JavaScript Academy · Leçon

Index et requêtes

Interrogez efficacement les données grâce aux index.

Index et requêtes est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Pourquoi utiliser des index ?

Par défaut, vous pouvez rechercher des enregistrements uniquement à l’aide de leur clé primaire. Un index vous permet d’effectuer efficacement des requêtes sur une autre propriété, par exemple pour trouver tous les utilisateurs portant un nom de famille donné.

Créer un index

Créez les index dans onupgradeneeded, juste après avoir créé le magasin, avec 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 });
};

Valeurs uniques ou non uniques

L’option unique garantit que deux enregistrements ne partagent pas la même valeur d’index. Utilisez unique: false (la valeur par défaut) lorsque plusieurs enregistrements peuvent partager une valeur, comme une ville.

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

Interroger un index

Récupérez l’index depuis un magasin dans une transaction, puis appelez get ou getAll sur celui-ci en utilisant la valeur de la propriété indexée.

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() renvoie tous les enregistrements correspondants sous forme de tableau dans une seule requête, ce qui est plus simple que de parcourir un cursor pour des ensembles de résultats modérés.

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

Plages de clés

Un IDBKeyRange décrit un intervalle de clés pour les requêtes par plage. Les fonctions utilitaires incluent only, lowerBound, upperBound et bound.

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

Options de bornage

IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen) peut exclure les extrémités. Les bornes ouvertes sont exclusives.

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

Cursors

Pour les grands ensembles de résultats ou une itération personnalisée, ouvrez un cursor avec index.openCursor(range). Il parcourt les enregistrements correspondants un par un, afin de ne pas tout charger en mémoire.

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
  }
};

Compter les correspondances

index.count(range) renvoie le nombre d’enregistrements correspondants sans les récupérer, ce qui est rapide et économe en mémoire.

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

Récupérer uniquement les clés

getAllKeys et un cursor de clés renvoient uniquement les clés primaires des enregistrements correspondants, ce qui est utile lorsque vous avez seulement besoin de références et non des objets complets.

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

Récapitulatif des requêtes

Les index transforment IndexedDB en magasin interrogeable : créez-les dans onupgradeneeded, puis utilisez get, getAll, les plages de clés et les cursors pour récupérer exactement les enregistrements dont vous avez besoin.

Vérification rapide

Testez votre compréhension des index et des requêtes.

Récapitulatif

Vous avez appris à utiliser les index et les requêtes :

Créez des index dans onupgradeneeded avec createIndex.
L’option unique garantit que les valeurs sont distinctes.
Effectuez des requêtes avec index.get / getAll.
IDBKeyRange permet d’effectuer des requêtes par plage.
Les cursors parcourent les grands ensembles et count comptabilise les correspondances.

Ensuite, vous découvrirez la gestion des versions et les mises à niveau.

Questions Fréquemment Posées

La leçon « Index et requêtes » est-elle gratuite ?

Oui — le texte complet de « Index et requêtes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Index et requêtes » ?

Interrogez efficacement les données grâce aux index. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Index et requêtes » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy