0Pricing
JavaScript Academy · درس

الاستنساخ البنيوي و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 سلاسل الاستعلام وينشئها
  • أنماط مناسبة للمبتدئين
الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 1

نسخة عميقة تحافظ على الأنواع

ينشئ 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);
الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 2

يفقد 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);
الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 3

تبقى 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 — رسم توضيحي 4

تحليل سلاسل الاستعلام

يقرأ 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"));
الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 5

إنشاء سلاسل الاستعلام

استخدموا 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);
الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 6

اختبار structuredClone مقابل JSON

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

الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 7

مراجعة

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

الاستنساخ البنيوي وURLSearchParams — رسم توضيحي 8

الأسئلة الشائعة

هل درس «الاستنساخ البنيوي و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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. أساسيات JSON.parse وJSON.stringify
  2. الاستنساخ البنيوي وURLSearchParams
  3. استراتيجيات تحليل JSON الآمن
← العودة إلى JavaScript Academy