التفكيك والنشر/التجميع (spread/rest)

استخرج البيانات من الكائنات والمصفوفات بأناقة، ثم انسخ الهياكل وادمجها باستخدام عامل النشر.

8 دقيقة · 3 أسئلة

عندما تتلقى بيانات من API، فإنك غالبًا لا تحتاج إلا إلى بضع خصائص. يستخرجها التفكيك في سطر واحد، مع إمكانية إعادة التسمية والوصول إلى الكائنات المتداخلة وتوفير قيمة افتراضية إذا كانت الخاصية مفقودة.

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

يعمل التفكيك أيضًا على المصفوفات، لكن هذه المرة حسب الموضع. يبقى استخدامه الأكثر احترافية في معاملات الدوال: فبدلًا من تلقّي كائن مبهم، تُعلن التوقيعة بالضبط عن الخصائص المتوقعة. تصبح الشيفرة موثِّقة لنفسها.

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

لعامل ... نفسه وجهان. بوصفه نشرًا (spread)، يبسط مصفوفة أو كائنًا لنسخه أو دمجه: يُستخدم على نطاق واسع لتطبيق الإعدادات الافتراضية ثم تجاوزها. وبوصفه تجميعًا (rest)، يجمع "كل ما تبقّى" في مصفوفة، مثلًا لقبول عدد متغير من الوسائط.

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

تمرين ذهني قبل الانتقال إلى الاختبار: في { ...baseConfig, ...overrides }، ماذا يحدث إذا عرّف كلا الكائنين lang؟ الأخير المكتوب يفوز. تفصيل الترتيب هذا هو بالضبط ما يجعل نمط "الافتراضيات ثم التجاوزات" ممكنًا.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا يفعل السطر const { city } = user;؟
   • ينشئ متغير city يحتوي على user.city
   • يعيد تسمية الكائن user إلى city
   • ينشئ كائنًا فارغًا جديدًا باسم city
2. في function log(...args)، ما هو args داخل الدالة؟
   • كائن مفتاح-قيمة
   • مصفوفة حقيقية تحتوي على كل الوسائط المستلمة
   • نص
   • الوسيط الأول فقط
3. بعد const copy = { ...original };، هل تُكرَّر الكائنات المتداخلة؟
   • نعم، النسخة مستقلة تمامًا
   • لا، تبقى مشتركة: النسخة سطحية
   • تُحذف من النسخة