استخدام أسماء الخصائص الديناميكية في تهيئة الكائنات باستخدام ES6

غالبًا ما ينشأ التحدي المتمثل في إنشاء كائنات بأسماء خصائص مشتقة من مصادر خارجية في البرمجة. في السيناريو الموضح في استعلامنا، نحاول إنشاء كائن JavaScript بخصائص تم تعريف مفاتيحها في متغير منفصل، KEYS.

ومع ذلك، عند تعيين قيم للخصائص داخل الكائن، نواجه خطأ بسبب استخدام عامل النقطة (.). هذا العامل محجوز لأسماء خصائص الكائنات الحرفية ولا يمكن استخدامه مع أسماء الخصائص الديناميكية.

لمعالجة هذه المشكلة، ننتقل إلى قوة ES6 (EcmaScript 2016)، وهي إضافة حديثة لمعايير JavaScript التي تقدم المزيد بناء الجملة والميزات التعبيرية. إحدى هذه الميزات هي بناء جملة الخاصية المحسوبة، والذي يسمح لنا بتعريف أسماء الخصائص ديناميكيًا.

باستخدام بناء جملة الخاصية المحسوبة، يمكننا إعادة كتابة الكود على النحو التالي، مما سيؤدي بنجاح إلى إنشاء كائن بالخاصية الديناميكية المطلوبة الأسماء:

iconMap: {
    [KEYS.PHONE_TYPE]: 'icon-phone',
    [KEYS.AGENT_TYPE]: 'icon-headphones',
},

في هذا الكود، تشير الأقواس المربعة ([]) حول أسماء الخصائص إلى أننا نستخدم بناء جملة الخاصية المحسوبة. يتم تقييم التعبير الموجود داخل الأقواس إلى اسم الخاصية الديناميكية، والذي يتم استرداده من متغير KEYS.