الاستنساخ البنيوي وURLSearchParams
انسخوا البيانات نسخًا عميقًا باستخدام structuredClone (مع الحفاظ على Dates/Maps/Sets)، وحلّلوا سلاسل الاستعلام وابنوها باستخدام URLSearchParams
الاستنساخ البنيوي وURLSearchParams درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 3 دروس في المجموع.
لماذا نستخدم هذه الأدوات؟
الهدف: نسخ بيانات URL وإجراء تسلسل لها بأمان.
- ينسخ structuredClone البيانات نسخًا عميقًا
- يحافظ على Date/Map/Set
- يحلل URLSearchParams سلاسل الاستعلام وينشئها
- أنماط مناسبة للمبتدئين

نسخة عميقة تحافظ على الأنواع
ينشئ structuredClone نسخة عميقة ويحافظ على كائنات Date كما هي.
// 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 الأنواع
يحتوي JSON على البيانات فقط؛ وتتحول Date/Map/Set إلى قيم عادية أو تُفقد.
// 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);

تبقى Map وSet سليمتين
تبقى Map وSet سليمتين عند نسخهما بشكل صحيح باستخدام 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));

تحليل سلاسل الاستعلام
يقرأ URLSearchParams سلاسل الاستعلام؛ استخدموا get وgetAll وhas، وكرروا العناصر عند الحاجة.
// 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"));

إنشاء سلاسل الاستعلام
استخدموا set/append ثم toString() لإنشاء سلاسل استعلام آمنة.
// 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);

اختبار structuredClone مقابل JSON
تحقق سريع: نسخة عميقة تحافظ على الأنواع.

مراجعة
مراجعة: استخدموا structuredClone لإنشاء نسخ عميقة تحافظ على أنواع مثل Date/Map/Set. واستخدموا URLSearchParams لتحليل سلاسل الاستعلام وإنشائها بأمان.

الأسئلة الشائعة
هل درس «الاستنساخ البنيوي وURLSearchParams» مجاني؟
نعم — نص درس «الاستنساخ البنيوي وURLSearchParams» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 3 دروس في المجموع.
ماذا ستتعلم في «الاستنساخ البنيوي وURLSearchParams»؟
انسخوا البيانات نسخًا عميقًا باستخدام structuredClone (مع الحفاظ على Dates/Maps/Sets)، وحلّلوا سلاسل الاستعلام وابنوها باستخدام URLSearchParams تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «الاستنساخ البنيوي وURLSearchParams»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات JSON.parse وJSON.stringify
- الاستنساخ البنيوي وURLSearchParams
- استراتيجيات تحليل JSON الآمن