Clonage structuré et URLSearchParams
Copiez profondément des données avec structuredClone (qui conserve les dates, Map et Set), puis analysez et construisez des chaînes de requête avec URLSearchParams
Clonage structuré et URLSearchParams est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 3 leçons au total.
Pourquoi utiliser ces outils ?
Objectif : Copier et sérialiser les données d’URL en toute sécurité.
- structuredClone effectue une copie en profondeur des données
- Préserve les dates, collections clé-valeur et ensembles
- Analyse et construit les paramètres de requête
- Modèles adaptés aux débutants
Copie en profondeur qui conserve les types
structuredClone effectue une copie en profondeur et conserve les objets de date tels quels.
// Deep copy with structuredClone (Node 17+/modern browsers)
const original = { n: 1, list: [1, 2], when: new Date("2024-01-01") };
const copy = structuredClone(original);
copy.n = 2;
copy.list.push(3);
console.log("original.n:", original.n);
console.log("copy.n:", copy.n);
console.log("dates equal type?", copy.when instanceof Date);
JSON perd les types
JSON ne contient que des données ; les dates, collections clé-valeur et ensembles deviennent des valeurs simples ou sont perdus.
// JSON round-trip loses special types (e.g., Date becomes string)
const obj = { when: new Date("2024-01-01"), ok: true };
const round = JSON.parse(JSON.stringify(obj));
console.log("after JSON:", typeof round.when, round.when);
console.log("is Date?", round.when instanceof Date);
Les collections clé-valeur et les ensembles sont conservés
Les collections clé-valeur et les ensembles sont correctement conservés par structuredClone.
// structuredClone preserves Map and Set
const m1 = new Map([["a", 1]]);
const s1 = new Set([1, 2]);
const cloned = structuredClone({ m1, s1 });
console.log("map has a?", cloned.m1.has("a"));
console.log("set has 2?", cloned.s1.has(2));
Analyser les chaînes de requête
L’outil de gestion des paramètres de requête lit les chaînes de requête ; utilisez get, getAll, has et parcourez les données si nécessaire.
// Parse a query string with URLSearchParams
const qs = "q=shoes&color=red&color=blue&page=2";
const params = new URLSearchParams(qs);
console.log("q:", params.get("q"));
console.log("first color:", params.get("color"));
console.log("all colors:", params.getAll("color"));
console.log("page:", params.get("page"));
Construire des chaînes de requête
Utilisez set/append, puis toString(), pour créer des chaînes de requête sûres.
// Build a query string from key/value pairs
const build = new URLSearchParams();
build.set("q", "shoes");
build.append("color", "red");
build.append("color", "blue");
build.set("page", String(2));
console.log("query:", build.toString());
// Example full URL
const url = "https://example.com/search?" + build.toString();
console.log("url:", url);
Quiz sur structuredClone et JSON
Vérification rapide : copie en profondeur qui conserve les types.
Récapitulatif
Récapitulatif : Utilisez structuredClone pour effectuer des copies en profondeur qui conservent des types comme les dates, collections clé-valeur et ensembles. Utilisez l’outil de gestion des paramètres de requête pour analyser et construire des chaînes de requête en toute sécurité.
Questions Fréquemment Posées
La leçon « Clonage structuré et URLSearchParams » est-elle gratuite ?
Oui — le texte complet de « Clonage structuré et URLSearchParams » 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 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Clonage structuré et URLSearchParams » ?
Copiez profondément des données avec structuredClone (qui conserve les dates, Map et Set), puis analysez et construisez des chaînes de requête avec URLSearchParams 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 2 sur 3.
Combien de temps prend la leçon « Clonage structuré et URLSearchParams » ?
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
- Notions de base de JSON.parse et JSON.stringify
- Clonage structuré et URLSearchParams
- Stratégies d’analyse sûre du JSON