0Pricing
JavaScript Academy · Pelajaran

Kloning Terstruktur dan URLSearchParams

Salin data secara mendalam dengan structuredClone (mempertahankan Date/Map/Set), lalu uraikan dan buat string kueri dengan URLSearchParams

Kloning Terstruktur dan URLSearchParams adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Mengapa menggunakan alat-alat ini?

Tujuan: Menyalin dan membuat serialisasi data URL dengan aman.

  • structuredClone menyalin data secara mendalam
  • Mempertahankan Date/Map/Set
  • URLSearchParams mengurai dan membuat kueri
  • Pola yang ramah bagi pemula
Kloning Terstruktur dan URLSearchParams — ilustrasi 1

Salinan mendalam yang mempertahankan tipe

structuredClone membuat salinan mendalam dan mempertahankan objek Date apa adanya.

// 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);
Kloning Terstruktur dan URLSearchParams — ilustrasi 2

JSON menghilangkan tipe

JSON hanya berisi data; Date/Map/Set berubah menjadi nilai biasa atau hilang.

// 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);
Kloning Terstruktur dan URLSearchParams — ilustrasi 3

Map dan Set tetap utuh

Map dan Set tetap utuh setelah dikloning dengan 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));
Kloning Terstruktur dan URLSearchParams — ilustrasi 4

Mengurai string kueri

URLSearchParams membaca string kueri; gunakan get, getAll, has, dan lakukan iterasi jika diperlukan.

// 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"));
Kloning Terstruktur dan URLSearchParams — ilustrasi 5

Membuat string kueri

Gunakan set/append, lalu toString() untuk membuat string kueri yang aman.

// 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);
Kloning Terstruktur dan URLSearchParams — ilustrasi 6

Kuis structuredClone dan JSON

Pemeriksaan singkat: Salinan mendalam yang mempertahankan tipe.

Kloning Terstruktur dan URLSearchParams — ilustrasi 7

Ringkasan

Ringkasan: Gunakan structuredClone untuk salinan mendalam yang mempertahankan tipe seperti Date/Map/Set. Gunakan URLSearchParams untuk mengurai dan membuat string kueri dengan aman.

Kloning Terstruktur dan URLSearchParams — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kloning Terstruktur dan URLSearchParams” gratis?

Ya — teks lengkap “Kloning Terstruktur dan URLSearchParams” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Kloning Terstruktur dan URLSearchParams”?

Salin data secara mendalam dengan structuredClone (mempertahankan Date/Map/Set), lalu uraikan dan buat string kueri dengan URLSearchParams Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Kloning Terstruktur dan URLSearchParams” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Dasar-Dasar JSON.parse / JSON.stringify
  2. Kloning Terstruktur dan URLSearchParams
  3. Strategi Penguraian JSON yang Aman
← Kembali ke JavaScript Academy