الانتقال إلى المحتوى الرئيسي
الوحدة 3 · الدرس 3 من 411/32 في الدورة~12 min
دروس الوحدة (3/4)

التدمير والانتشار

تركيبان شقيقان من نفس العائلة، تم تقديمهما بواسطة ES6 والآن يوميًا الخبز لأي شخص يكتب JS حديث:

  • التدمير: استخراج قيم متعددة من المصفوفات/الكائنات في ملف واحد خط.
  • Spread ...: "ينشر" مصفوفة أو كائنًا داخل كائن آخر.

معًا يجعلون التعليمات البرمجية أكثر إيجازًا وقابلية للقراءة.

تدمير الكائن

اقرأ بصوت عالٍ: "قم بإنشاء الثوابت nome وeta بقيم الخصائص ذات الاسم نفسه لـ utente".

JS
const utente = { nome: 'Anna', eta: 28, ruolo: 'admin' };

const { nome, eta } = utente;
console.log(nome); // 'Anna'
console.log(eta); // 28

إعادة تسمية

أضف : newName بعد المفتاح:

JS
const { nome: n, eta: years } = utente;
// creates the variables n and years

القيمة الافتراضية

إذا كانت الخاصية مفقودة (أو كانت محمية_INLINE_7)، فسيتم استخدام الإعداد الافتراضي:

JS
const { ruolo = 'reader', telefono = 'n/d' } = utente;
// ruolo = 'admin' (present), telefono = 'n/d' (missing)

تدمير المصفوفة

يعمل حسب الموضع:

JS
const colori = ['rosso', 'verde', 'blu'];
const [primo, secondo] = colori;
// primo = 'rosso', secondo = 'verde'

const [, , terzo] = colori; // skips the first two
const [a, ...resto] = colori; // a = 'rosso', resto = ['verde','blu']

تنتشر على المصفوفات

...arr "ينشر" العناصر:

JS
const a = [1, 2, 3];
const b = [4, 5];

const unione = [...a, ...b]; // [1, 2, 3, 4, 5]
const copia = [...a]; // shallow copy of a
const conPiu = [0, ...a, 4]; // [0, 1, 2, 3, 4]

ينتشر على الأشياء

المفاتيح اللاحقة تجاوز المفاتيح السابقة — أساسية للتحديثات غير القابلة للتغيير:

JS
const utente = { nome: 'Anna', eta: 28 };

const aggiornato = { ...utente, eta: 29 };
// { nome: 'Anna', eta: 29 } — utente was NOT touched

const con = { ...utente, attivo: true };
// { nome: 'Anna', eta: 28, attivo: true }

جربه

تمرين#js.m3.l3.e1
المحاولات: 0جارٍ التحميل…

بالنظر إلى `user = { name: 'Marco', age: 34, city: 'Torino' }`، استخدم التدمير لاستخراج `name` و`city` فقط إلى ثابتين وإرجاع `\`${name} di ${city}\`` (يجب أن يساوي 'Marco di Torino').

جارٍ تحميل المحرر…
إظهار التلميح

const { الاسم، المدينة } = المستخدم؛ ثم قالب حرفي بالقيمتين.

الحل متاح بعد 3 من المحاولات

تمرين المراجعة

تمرين#js.m3.l3.e2
المحاولات: 0جارٍ التحميل…

بالنظر إلى `base = { theme: 'dark'، size: 'md' }`، قم بإرجاع كائن مماثل جديد ولكن مع ضبط `size` على 'lg' باستخدام الحيز.

جارٍ تحميل المحرر…
إظهار التلميح

يجب أن يكون التعبير الأخير هو الكائن. ضعها بين قوسين: ({ ...قاعدة، ... }).

الحل متاح بعد 3 من المحاولات