JS For Loop التعليمي - كيفية التكرار عبر مصفوفة في JavaScript

ستزودك هذه المقالة بفهم قوي لكيفية التكرار بالضبط عبر بنية بيانات صفيف في JavaScript.

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

ما هي المصفوفة؟

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

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

تحتوي مجموعة الأمثلة هذه على أنواع مختلفة من السيارات ، ويمكن الرجوع إليها carsبالمتغير.

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

إليك كيف سنتعامل مع التكرار عبر المصفوفات في JavaScript:

  1. قم بتمييز 5 طرق شائعة للتكرار عبر مصفوفة
  2. اعرض بعض الأفكار حول كل طريقة تكرارية
  3. قدم بعض التعليمات البرمجية التي يمكنك استخدامها لاختبارها أيضًا!

تقليدي للحلقة

ما هو For Loop؟

تعرف ويكيبيديا حلقة For على النحو التالي:

"في علوم الكمبيوتر ، تعد حلقة for-loop (أو حلقة for ) عبارة عن بيان تدفق تحكم لتحديد التكرار ، مما يسمح بتنفيذ التعليمات البرمجية بشكل متكرر."

حلقة for هي طريقة لتنفيذ التعليمات البرمجية بشكل متكرر. بدلاً من الكتابة console.log(“hi”)خمس مرات ، يمكنك لفها داخل حلقة for.

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

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

انتاج:

Tesla Ferrari Lamborghini Audi

عند الغوص في الشفرة ، نقوم بتمرير ثلاثة خيارات إلى الحلقة for

  • متغير المكرر - let i = 0;
  • حيث يجب أن يتوقف المكرر - i < card.length
  • كم يتم زيادة مكرر كل حلقة - i++

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

الميزة الرئيسية لحلقة for التقليدية هي أن لديك المزيد من التحكم.

من الممكن الوصول إلى عناصر مختلفة داخل المصفوفة ، أو التكرار عبر المصفوفة بطريقة معقدة لحل مشكلة معقدة. على سبيل المثال ، يمكن تخطي كل عنصر آخر في المصفوفة بسهولة تامة باستخدام حلقة for التقليدية.

طريقة forEach

ما هي طريقة forEach؟

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

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

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

حائط اللوب

ما هي حلقة while؟

تعرف Wikipedia حلقة while Loop على أنها:

" حلقة while عبارة عن بيان تدفق تحكم يسمح بتنفيذ التعليمات البرمجية بشكل متكرر بناءً على شرط منطقي معين. في حين حلقة يمكن التفكير فيه باعتباره تكرار إذا البيان. "

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

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

بينما مثال التكرار (جيد):

let i = 0 while (i < 5) { console.log(i); i++; }

الإخراج :

0 1 2 3 4

حلقة while loop's if i < 5، أو تُنطق بصوت عالٍ ، "i أقل من 5". iيتزايد المتغير في كل مرة تعمل فيها الحلقة.

بعبارات بسيطة ، هذا يعني أنه يتم إضافة 1 إلى المتغير في iكل مرة تقوم فيها الحلقة بتكرار كامل. في التكرار الأول ، iيساوي 0 ، ونطبع "0" إلى وحدة التحكم.

أكبر خطر لاستخدام حلقة while هو كتابة شرط لا يتحقق أبدًا.

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

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

تحذير: لا تقم بتشغيل هذا الرمز.

مثال الحلقة اللانهائية (سيء):

let i = 0 while (i < 5) { console.log(i); }

انتاج:

قد تختلف النتائج.

هل أثناء التكرار

ما هي حلقة do while؟

تعرف ويكيبيديا حلقة Do-while على أنها:

" حلقة do while هي بيان تدفق تحكم ينفذ كتلة من التعليمات البرمجية مرة واحدة على الأقل ، ثم ينفذ بشكل متكرر الكتلة ، أو لا ، اعتمادًا على حالة منطقية معينة في نهاية الكتلة."

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

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

مثال التكرار (جيد):

let i = 0; do { console.log(i); i++; } while (i < 5);

الإخراج :

0 1 2 3 4

أكبر مخاطر استخدام حلقة التنفيذ هي كتابة شرط لم يتم الوفاء به أبدًا. (كما هو الحال مع حلقة while Loop.)

تحذير: لا تقم بتشغيل هذا الرمز.

مثال الحلقة اللانهائية (سيء):

let i = 0; do { console.log(i); } while (i < 5);

الإخراج :

قد تختلف النتائج.

هل تريد نقل معرفتك بلغة JavaScript إلى المستوى التالي؟ تعرف mapعلى الشيء نفسه forEach، ولكن مع مكافأة !! ؟

مثال المكافأة (التكرار مع الخريطة)

ما هي الخريطة؟

تعرف ويكيبيديا الخريطة على أنها:

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

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

استنتاج

أحسنت! لقد تعلمت خمس طرق مختلفة للتكرار عبر مصفوفة في JavaScript. هذه هي اللبنات الأساسية التي ستؤهلك للنجاح في رحلة برمجة JavaScript.

لقد تعرضت أيضًا لمفهوم متقدم map، والذي يستخدم غالبًا في تطبيقات البرامج واسعة النطاق.

لذا ، سأترككم مع هذا: كيف ستستخدمون المصفوفات في مشاريعكم؟ وما طريقة التكرار التي وجدتها أكثر إثارة؟  

شكرا للقراءة!

إذا أعجبك مقالتي ، فيرجى متابعي و / أو إرسال رسالة إلي!  

تويتر • متوسط ​​• جيثب