"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > يمكنك تدمير المصفوفة في JavaScript وجعل شفرتك تبدو نظيفة

يمكنك تدمير المصفوفة في JavaScript وجعل شفرتك تبدو نظيفة

تم النشر بتاريخ 2024-11-01
تصفح:549

ays to Destructure Array in JavaScript & make your code look clean

مرحبًا! ?

أتمنى أن تكونوا بخير! هذا هو SMY! ؟ اليوم، نحن نتعمق في بعض سحر JavaScript الرائع مع تدمير المصفوفة! ?


؟ محتويات:

  • ⚡ انتظر ماذا؟

  • ⚡ لكن لماذا؟

  • ⚡ ولكن كيف؟

  • 1️⃣ تدمير المصفوفات ترتيبًا زمنيًا

  • 2️⃣ تدمير المصفوفات حسب الفهرس

  • 3️⃣ تدمير المصفوفات داخل الكائنات

  • 4️⃣ تدمير المصفوفات باستخدام الفهارس الديناميكية


⚡ انتظر ماذا؟

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

⚡ لكن لماذا؟

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

⚡ لكن كيف؟

دعونا نتعرف على كل طريقة من طرق تدمير المصفوفة مع بعض الأمثلة!


1️⃣ تدمير المصفوفات ترتيبًا زمنيًا

هذه هي الطريقة الأكثر مباشرة لتدمير المصفوفات. يمكنك مطابقة المتغيرات مع عناصر المصفوفة بالترتيب الذي تظهر به.

const fruits = ['apple', 'mango', 'banana'];
const [apple, mango, banana] = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana

كيف يعمل:

  • تحتوي مجموعة الفواكه على ثلاثة عناصر.

  • باستخدام [apple, mango,banana]، نقوم بتفكيك المصفوفة إلى ثلاثة متغيرات، كل منها يتوافق مع عنصر في المصفوفة، بنفس الترتيب.


2️⃣ تدمير المصفوفات حسب الفهرس

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

const fruits = ['apple', 'mango', 'banana'];
const {0: apple, 1: mango, 2: banana} = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana

كيف يعمل:

  • نستخدم هنا بناء جملة يحاكي التدمير من خلال التعامل مع مؤشرات المصفوفة كمفاتيح. يعد هذا بمثابة حل بديل نظرًا لأن التدمير بواسطة المؤشرات غير مدعوم بشكل مباشر، ولكن الفكرة هي محاذاة عناصر المصفوفة مع المتغيرات من خلال المؤشرات.

3️⃣ تدمير المصفوفات داخل الكائنات

يمكنك أيضًا تدمير المصفوفات المتداخلة داخل الكائنات. يتيح لك هذا استهداف عناصر محددة في الهياكل المتداخلة.

const fruitsPerSeason = {
  summer: ['grapes', 'pineapple'],
  winter: ['kiwis', 'oranges']
};

const { summer: [grape, pineapple], winter: [kiwi, orange] } = fruitsPerSeason;

console.log(grape); // grapes
console.log(pineapple); // pineapple
console.log(kiwi); // kiwis
console.log(orange); // oranges

كيف يعمل:

  • fruitsPerSeason هو كائن حيث كل خاصية عبارة عن مصفوفة.

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


4️⃣ تدمير المصفوفات باستخدام الفهارس الديناميكية

لاتباع نهج أكثر ديناميكية، يمكنك الجمع بين التدمير والمتغيرات التي تحمل المؤشرات.

const fruitsPerSeason = {
  summer: ['pineapple', 'grapes'],
  winter: ['kiwis', 'oranges']
};

const pineappleIdx = 0, kiwisIdx = 0;
const { summer: [_, pineapple], winter: [_, kiwis] } = fruitsPerSeason;

console.log(pineapple); // pineapple
console.log(kiwis); // kiwis

كيف يعمل:

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

الختام:

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

هذا كل شيء يا رفاق! آمل أن تجد هذا التفصيل لتدمير المصفوفة مفيدًا وثاقبًا. ?

لا تتردد في متابعتي على GitHub وLinkedIn لمزيد من النصائح والحيل حول JavaScript!

جيت هاب

لينكد إن


ابق على البرمجة الرائعة والسعيدة! ✨

بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/smy/4-ways-to-destructure-array-in-javascript-make-your-code-look-clean-gjk?1 إذا كان هناك أي انتهاك، من فضلك اتصل بـ [email protected]
أحدث البرنامج التعليمي أكثر>

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

Copyright© 2022 湘ICP备2022001581号-3