إعادة مقدمة لتدمير التخصيص

إذا كنت تكتب JavaScript ، فمن المحتمل أن تكون على دراية بـ ES2015 وجميع معايير اللغة الجديدة التي تم تقديمها. أحد هذه المعايير التي شهدت شعبية لا تصدق هو تدمير المهمة. القدرة على "الغوص في" مصفوفة أو كائن والإشارة إلى شيء بداخله بشكل مباشر أكثر. عادة ما يذهب شيء من هذا القبيل.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

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

1. التدمير المتداخل

تعد القدرة على الوصول إلى مفتاح المستوى الأعلى داخل كائن ، أو العنصر الأول في المصفوفة أمرًا قويًا ، ولكنه أيضًا مقيد إلى حد ما. إنه يزيل مستوى واحد فقط من التعقيد وما زلنا ننتهي بسلسلة من النقاط أو [0] مراجع للوصول إلى ما نسعى إليه حقًا.

كما اتضح ، يمكن أن يعمل التدمير خارج المستوى الأعلى. ويمكن أن تكون هناك أسباب وجيهة للقيام بذلك. خذ هذا المثال لاستجابة كائن من طلب HTTP. نريد تجاوز كائن البيانات والوصول إلى المستخدم فقط. طالما أننا نعرف المفاتيح التي نبحث عنها ، فهذه ليست مشكلة.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

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

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

ضع في اعتبارك أنه يجب استخدام هذه الميزات بحكمة ، كما هو الحال مع أي أداة. تعرف على حالة الاستخدام الخاصة بك وجمهور قاعدة التعليمات البرمجية الخاصة بك. ضع في اعتبارك قابلية القراءة وسهولة التغيير في المستقبل. على سبيل المثال ، إذا كنت تبحث عن الوصول إلى مصفوفة فرعية فقط ، فربما تكون الخريطة مناسبة بشكل أفضل.

2. تدمير الكائن والصفيف

الكائنات والمصفوفات هي هياكل بيانات شائعة. من الشائع ، في الواقع ، أن أحدهما يظهر داخل الآخر. بالإضافة إلى التدمير المتداخل ، يمكننا الوصول إلى الخصائص المتداخلة حتى لو كانت في نوع مختلف من بنية البيانات عن تلك الخارجية التي نصل إليها.

خذ هذا المثال لمصفوفة داخل كائن.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

حالة الاستخدام المعاكسة صالحة أيضًا. مجموعة من الأشياء.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

كما اتضح ، لدينا مشكلة صغيرة في هذا المثال. يمكننا فقط الوصول إلى اسم المستخدم الأول ؛ بخلاف ذلك ، سنحاول استخدام "name" للإشارة إلى سلسلتين مختلفتين ، وهذا غير صالح. سيناريو التدمير القادم يجب أن يحل هذا الأمر.

3. الأسماء المستعارة

كما رأينا في المثال أعلاه (عندما يكون لدينا مفاتيح متكررة داخل كائنات مختلفة نريد سحبها) ، لا يمكننا فعل ذلك بالطريقة "النموذجية". لا يمكن تكرار أسماء المتغيرات في نفس النطاق (هذه هي أبسط طريقة لشرحها ، من الواضح أنها أكثر تعقيدًا من ذلك).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

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

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

غالبًا ما تفترض عملية التدمير أن القيمة التي تشير إليها موجودة ، ولكن ماذا لو لم تكن كذلك؟ ليس من اللطيف أبدًا إلقاء رمز القمامة بقيم غير محددة. هذا عندما تصبح القيم الافتراضية في متناول اليد.

دعونا نلقي نظرة على كيفية عملها مع الأشياء.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

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

يمكننا أن نفعل شيئًا مشابهًا للمصفوفات.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

كما هو الحال مع مثال الكائنات ، إذا كانت القيمة موجودة ، فسيتم تجاهل القيمة الافتراضية. بالنظر إلى المثال أعلاه ، قد تلاحظ أننا ندمر عددًا أكبر من العناصر الموجودة في المصفوفة. ماذا عن تدمير عدد أقل من العناصر؟

5. تجاهل القيم

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

لقد رأينا بالفعل مثالًا على ذلك سابقًا ، لكن دعنا نعزل المفهوم الذي نتحدث عنه.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

في هذا المثال ، لا ندمر organization أبدًا وهذا جيد تمامًا. لا يزال متاحًا للرجوع إليه داخل كائن user ، مثل ذلك.

 user.organization

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

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

ندمر العنصرين الأول والثاني في المصفوفة والباقي غير ذي صلة. لكن ماذا عن العناصر اللاحقة؟ إذا كان يعتمد على الموضع ، ألا يتعين علينا تدمير كل عنصر حتى نصل إلى العنصر الذي نريده؟

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

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

ويمكننا القيام بالأمرين معًا في نفس الوقت. تخطي العناصر أينما نريد باستخدام العنصر النائب للفاصلة. ومرة أخرى ، كما هو الحال مع مثال الكائن ، لا تزال العناصر "المتجاهلة" متاحة للرجوع إليها داخل مصفوفة roleCounts .

مثال الوونكي

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

أحد الأمثلة على ذلك هو أنه يمكنك استخدام التدمير لعمل نسخ ضحلة.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

شيء آخر يمكن استخدام التدمير من أجله هو إلغاء المرجع.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

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

خاتمة

جافا سكريبت مليئة بالكائنات والمصفوفات المعقدة. سواء كانت استجابة من طلب HTTP ، أو مجموعات بيانات ثابتة ، فإن القدرة على الوصول إلى المحتوى المضمن بكفاءة أمر مهم. استخدام التدمير هو طريقة رائعة للقيام بذلك. لا يتعامل فقط مع مستويات متعددة من التداخل ، ولكنه يسمح بالوصول المركّز ويوفر الإعدادات الافتراضية في حالة المراجع غير المحددة.

حتى إذا كنت قد استخدمت التدمير لسنوات ، فهناك الكثير من التفاصيل المخفية في المواصفات. آمل أن يكون هذا المقال بمثابة تذكير بالأدوات التي توفرها لك اللغة. في المرة القادمة التي تكتب فيها رمزًا ، ربما يكون أحدها مفيدًا!