يحتوي JavaScript الحديث على العديد من الميزات الجديدة التي تجعل من السهل كتابة التعليمات البرمجية بطريقة بسيطة ومنظمة. إحدى الميزات الحديثة المفيدة المتوفرة في ES6 + هي تدمير الصفيف والكائنات.
تشجع أطر عمل JavaScript مثل React.js و Angular على استخدام هذه التقنية. لذلك من الضروري فهم معنى التدمير وكيفية استخدامه أثناء كتابة التعليمات البرمجية.
ما هو تدمير الكائن والصفيف في JavaScript؟
يشير التدمير في JavaScript إلى عملية تفريغ القيم من مصفوفة أو كائن. يوفر طريقة أكثر إيجازًا للحصول على القيم من المصفوفات أو الكائنات بدون رفع ثقيل عندما تكون مهتمًا بعناصر مصفوفة فردية أو قيم في كائن.
من المفيد أيضًا عند معالجة القيم المرتجعة من دالة أو تعبير معقد. هذا المفهوم هو واحد من أفضل الممارسات التي يجب اتباعها أثناء كتابة كود React.
كيفية تدمير المصفوفات
إليك نموذج تعليمة برمجية للحصول على شعور بتدمير المصفوفة:
مقدار ثابت arr = [1, 2];
مقدار ثابت [أ ، ب] = arr ؛
وحدة التحكم.log (أ) // يطبع 1 على وحدة التحكم
وحدة التحكم.log (ب) // يطبع 2 على وحدة التحكم
يستخدم هذا الرمز التدمير لتعيين القيم من آر- 1 و 2 - للمتغيرات أ و ب، على التوالى. هذا هو المفهوم الأساسي وراء التدمير. لديك مصفوفة أو كائن على الجانب الأيمن ، وتقوم بفك حزم العناصر وتعيينها إلى متغيرات فردية على الجانب الأيسر.
تحت الغطاء ، تنسخ JavaScript القيم من آر وتخصيصها للمتغيرات الموجودة على الجانب الأيسر مثل:
مقدار ثابت arr = [1,2];
مقدار ثابت أ = أر [0];
مقدار ثابت ب = آر [1];
كما ترى ، يعد التدمير طريقة أكثر إيجازًا للقيام بذلك ، على عكس استخدام تدوين الكائن أو القوس. ومع ذلك ، من المحتمل أن يكون بناء الجملة هذا مفيدًا عند التعامل مع المصفوفات المعقدة أو الوظائف التي تُرجع المصفوفات أو السلاسل.
تحقق من نموذج الشفرة أدناه:
مقدار ثابت [اليوم ، الشهر ، التاريخ ، السنة ، الوقت ، المنطقة الزمنية] = تاريخ().ينقسم(' ')
// Calling Date () ترجع التاريخ الحالي بالتنسيق:
// الاثنين 20 فبراير 2023 13:07:29 بتوقيت جرينتش + 0000
وحدة التحكم.log (يوم) // يطبع Mon
وحدة التحكم.log (شهر) // طباعة فبراير
وحدة التحكم.log (التاريخ) // يطبع 20
في نموذج الشفرة هذا ، نقوم بإنشاء سلسلة جديدة بالتاريخ الحالي عن طريق الاتصال تاريخ(). بعد ذلك ، نستخدم ينقسم()، أ طريقة سلسلة جافا سكريبت، لفصل العناصر في السلسلة باستخدام المسافة كفاصل. ينقسم(' ') تُرجع مصفوفة ، ونستخدم التدمير لتعيين القيم للمتغيرات الفردية.
تذكر أنه إذا كانت المصفوفة الخاصة بك تحتوي على عناصر أكثر مما تقوم بفك حزمه ، فسوف يتجاهل JavaScript العناصر الإضافية.
مقدار ثابت arr = [1, 2, 3, 4];
مقدار ثابت [أ ، ب] = arr ؛
وحدة التحكم.log (أ) // يطبع 1
وحدة التحكم.log (ب) // يطبع 2
// القيمتان 3 و 4 غير مخصصتين لأي متغير ؛ يتم تجاهلهم
في هذه الحالة ، إذا كنت تريد تخزين العناصر المتبقية في متغير ، فاستخدم معلمة rest مثل:
مقدار ثابت arr = [1, 2, 3, 4];
مقدار ثابت [أ ، ب ،... بقية] = arr ؛
وحدة التحكم.log (بقية) // مطبوعات [3،4]
في بعض الأحيان ، قد لا تهتم بعنصر معين. يتيح لك نمط التدمير في JavaScript أيضًا تخطي عناصر معينة باستخدام فاصلة فارغة.
مقدار ثابت arr = [1, 2, 3, 4];
مقدار ثابت [a ،، c] = arr؛
وحدة التحكم.log (c) // يطبع 3
يستخدم الكود أعلاه المساحة الفارغة لتجاهل القيمة 2 في المصفوفة آر. بدلا من تعيين القيمة 2 متغير ج، فإنه يتخطى العنصر التالي في المصفوفة. كما أنها تتجاهل القيمة الرابعة لأنها لا تحدد متغيرًا لتخزينها فيه.
في المقابل ، إذا كنت بحاجة إلى عدد أقل من العناصر التي تحتاجها ، فستقوم العملية بتعيين ملف غير معرف قيمة لتلك المتغيرات الإضافية.
مقدار ثابت arr = [1];
مقدار ثابت [أ ، ب] = arr ؛
وحدة التحكم.log (أ) // يطبع 1
وحدة التحكم.log (ب) // يطبع غير محدد
لمنع وجود متغيرات غير محددة ، يمكنك تعيين القيم الافتراضية إذا لم تكن متأكدًا من طول المصفوفة على النحو التالي (تعيين القيم الافتراضية ليس مطلبًا):
مقدار ثابت arr = [1];
مقدار ثابت [أ = '10'، ب = 'غير مزود'] = arr؛
وحدة التحكم.log (أ) // يطبع 1
وحدة التحكم.log (ب) // مطبوعات "غير متوفرة"
هذا التدمير يعين القيمة 1 متغير أ، والكتابة فوق قيمتها الافتراضية. عامل ب يحتفظ به افتراضيًا لأنه لا يتم توفير قيمة.
كيفية تدمير الكائنات
لا يختلف تدمير الكائنات كثيرًا عن المصفوفات. الفرق الوحيد هو أن المصفوفات قابلة للتكرار والأشياء ليست كذلك ، مما يؤدي إلى طريقة مختلفة قليلاً في القيام بالأشياء.
عند العمل مع الكائنات ، يتم أيضًا تهيئة المتغيرات الموجودة على الجانب الأيسر من عامل الإسناد مثل الكائنات:
مقدار ثابت شخص = {اسم: "ألفين", عمر: 10, ارتفاع: 1};
مقدار ثابت {الاسم ، العمر ، الارتفاع} = شخص ؛
وحدة التحكم.log (الاسم) // طباعة "ألفين"
وحدة التحكم.log (الارتفاع) // يطبع 1
من الشفرة ، نستخدم أسماء الخصائص من شخص هدف. ومع ذلك ، لا يتعين عليك استخدام أسماء الخصائص الدقيقة في الكائن. يمكنك إتلاف وتخزين القيم بأسماء متغيرات مختلفة كما يلي:
مقدار ثابت شخص = {اسم: "ألفين", عمر: 10, ارتفاع: 1};
مقدار ثابت {اسم: الاسم الأول، عمر: سنين، ارتفاع: currentHeight} = شخص ؛
وحدة التحكم.log (الاسم الأول) // طباعة "ألفين"
وحدة التحكم.log (CurrentHeight) // يطبع 1
تبدأ بتحديد قيمة الخاصية التي تريد إتلافها ، ثم تحديد اسم المتغير الذي ستستخدمه لتخزين القيمة بعد نقطتين. ومثل المصفوفات ، فإن تدمير اسم خاصية غير موجود سيكون كذلك غير معرف.
لمعالجة هذا الأمر ، يمكنك بالمثل تحديد القيم الافتراضية في حالة عدم توفر اسم الخاصية الذي تريد تعيينه لمتغير:
مقدار ثابت شخص = {اسم: "ألفين", عمر: 10, ارتفاع: 1};
مقدار ثابت {الاسم ، العمر ، الارتفاع ، الموقع ='في جميع أنحاء العالم'} = شخص ؛
وحدة التحكم.log (الاسم) // طباعة "ألفين"
وحدة التحكم.log (الموقع) // يطبع "في جميع أنحاء العالم"
لا يهم ترتيب المتغيرات على الجانب الأيسر مع الكائن لأن الكائنات تخزن القيم في أزواج مفتاح - قيمة. على هذا النحو ، سوف ينتج عن الكود التالي نفس النتائج:
مقدار ثابت شخص = {اسم: "ألفين", عمر: 10, ارتفاع: 1};
مقدار ثابت {العمر ، الارتفاع ، الاسم} = شخص ؛
وحدة التحكم.log (الاسم) // طباعة "ألفين"
وحدة التحكم.log (الارتفاع) // يطبع 1
أخيرًا ، على غرار المصفوفات ، يمكنك أيضًا استخدام المعامل rest لتدمير عدة قيم في متغير واحد مثل:
مقدار ثابت شخص = {اسم: "ألفين", عمر: 10, ارتفاع: 1};
مقدار ثابت {الاسم ،... الباقي} = شخص ؛
وحدة التحكم.log (الاسم) // طباعة "ألفين"
وحدة التحكم.log (بقية) // مطبوعات {العمر: 10 ، الارتفاع: 1}
فقط لاحظ أن معلمة الراحة يجب أن تأتي دائمًا في النهاية. خلاف ذلك ، سوف تطرح JavaScript استثناء.
تحسين جودة التعليمات البرمجية الخاصة بك مع تدمير جافا سكريبت
تتيح لك الميزات الحديثة لجافا سكريبت ، مثل التدمير ، كتابة تعليمات برمجية سهلة القراءة. باستخدام التدمير ، يمكنك فك حزم القيم بسرعة من المصفوفات والكائنات. يمكن أن يكون التدمير مفيدًا أيضًا في مواقف أخرى ، مثل تبديل قيم متغيرين. نأمل أن تفهم الآن معنى التدمير في JavaScript ، ويمكنك استخدامه أثناء كتابة التعليمات البرمجية.