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

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

للحلقة
المزايا:

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

قبل تقديم حلقة for...of، كانت حلقة for التقليدية هي الطريقة القياسية لتكرار المصفوفة. ومع ذلك، يمكن أن يكون عرضة للأخطاء، مثل بدء الفهرس عند 1 بدلاً من 0 أو استخدام arr.length بدلاً من arr.length - 1 عن طريق الخطأ. كما تقترح MDN، " من الأفضل عادةً استخدامه ل... إذا استطعت."

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

لـ...
المزايا:

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

متى يجب الاستخدام:
عندما تحتاج فقط إلى العمل مع القيم ولا تحتاج إلى الوصول إلى المؤشرات.

Array.prototype.map()
المزايا:

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

متى يجب الاستخدام:
عندما تريد تطبيق دالة على كل عنصر في مصفوفة وتحتاج إلى النتيجة كمصفوفة جديدة.

Array.prototype.forEach()
المزايا:

• لا توجد قيمة إرجاع: forEach() يسمح لك بتنفيذ دالة على كل عنصر دون إرجاع مصفوفة جديدة. غالبًا ما يُستخدم لتنفيذ تأثيرات جانبية، مثل التسجيل أو تحديث المتغيرات أو معالجة DOM.

متى يجب الاستخدام:
عندما تريد تطبيق دالة على كل عنصر في المصفوفة ولكنك لا تحتاج إلى إرجاع مصفوفة جديدة.

Array.prototype.entries()
المزايا:

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

متى يجب الاستخدام:
عندما تحتاج إلى الوصول إلى كل من مؤشرات وقيم عناصر المصفوفة.

Array.prototype.keys()
المزايا:

• الوصول إلى الفهارس: تقوم المفاتيح () بإرجاع مكرر لمؤشرات المصفوفة. يكون هذا مفيدًا عندما تحتاج فقط إلى المؤشرات وليس القيم. في المصفوفات المتفرقة، سيتضمن [...arr.keys()] مؤشرات للفتحات الفارغة أيضًا (حيث تكون القيمة غير محددة).

متى يجب الاستخدام:
عندما تحتاج إلى مكرر يوفر فقط مؤشرات عناصر المصفوفة.

Array.prototype.values()
المزايا:

• الوصول إلى القيم: تقوم القيم () بإرجاع مكرر لقيم المصفوفة. يشبه هذا استخدام for...of مع المصفوفات ولكنه يوفر مكررًا بدلاً من حلقة.

متى يجب الاستخدام:
عندما تحتاج إلى مكرر يوفر فقط قيم عناصر المصفوفة.

ما هي مكررات المصفوفة:
تقوم Array.prototype.entries() وArray.prototype.keys() وArray.prototype.values() بإرجاع كائنات مكررة صفيف جديدة. تسمح لك هذه التكرارات باجتياز مجموعة تشبه المصفوفة عنصرًا واحدًا في كل مرة. أنها تأتي مع طريقة next() التي توفر القيمة التالية في التسلسل، والتي يمكن استدعاؤها حسب الحاجة، مما يساعد على توفير الذاكرة.

إليك مثال باستخدام الإدخالات ():

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }
console.log(iterator.next()); // { value: undefined, done: true }

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