Clonagem estruturada e URLSearchParams
Faça cópias profundas de dados com structuredClone (preserva Dates/Maps/Sets) e analise ou crie strings de consulta com URLSearchParams
Clonagem estruturada e URLSearchParams é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.
Por que usar estas ferramentas?
Objetivo: Copiar e serializar dados de URL com segurança.
- structuredClone faz uma cópia profunda dos dados
- Preserva Data/Mapa/Conjunto
- Parâmetros de pesquisa da URL analisam e criam consultas
- Padrões adequados para iniciantes
Cópia profunda que preserva os tipos
structuredClone cria uma cópia profunda e mantém os objetos Data intactos.
// 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 perde os tipos
JSON contém apenas dados; Data/Mapa/Conjunto se transformam em valores simples ou são perdidos.
// 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);
Mapas e conjuntos são preservados
Mapa e Conjunto sobrevivem à clonagem corretamente com 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));
Analisar strings de consulta
Os parâmetros de pesquisa da URL leem strings de consulta; use get, getAll, has e itere quando necessário.
// 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"));
Criar strings de consulta
Use set/append e depois toString() para criar strings de consulta seguras.
// 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);
Questionário sobre structuredClone e JSON
Verificação rápida: Cópia profunda que preserva os tipos.
Recapitulação
Recapitulação: Use structuredClone para cópias profundas que preservam tipos como Data/Mapa/Conjunto. Use os parâmetros de pesquisa da URL para analisar e criar strings de consulta com segurança.
Perguntas Frequentes
A aula “Clonagem estruturada e URLSearchParams” é grátis?
Sim — o texto completo de “Clonagem estruturada e URLSearchParams” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.
O que vou aprender em “Clonagem estruturada e URLSearchParams”?
Faça cópias profundas de dados com structuredClone (preserva Dates/Maps/Sets) e analise ou crie strings de consulta com URLSearchParams Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Clonagem estruturada e URLSearchParams”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de JSON.parse e JSON.stringify
- Clonagem estruturada e URLSearchParams
- Estratégias para análise segura de JSON