معالجة التكرار في JavaScript
في هذه المقالة، سنشرح معالجة التكرار في JavaScript۔
YouTube Video
بيان for في JavaScript
الصياغة الأساسية
1for (initialization; condition; update) {
2 // Code to repeat
3}بيان for في JavaScript هو بناء نحوي لإجراء التكرار۔ يقوم بتنفيذ كتلة كود محددة بشكل متكرر طالما تم استيفاء شرط معين۔ باستخدام بيان for، يمكن تنفيذ نفس العملية بشكل فعال عدة مرات۔
- التهيئة (
initialization): الجزء الذي يتم تنفيذه مرة واحدة فقط قبل بدء الحلقة۔ تهيئة المتغيرات مثل عداد الحلقة۔ - الشرط (
condition): الشرط الذي يحدد ما إذا كان يجب استمرار الحلقة۔ إذا كانtrue، تستمر الحلقة؛ وإذا كانfalse، تنتهي۔ - التحديث (
update): يتم تنفيذه في نهاية كل حلقة لتحديث عداد الحلقة۔
مثال
1for (let i = 0; i < 5; i++) {
2 console.log(i);
3}في هذه الحالة، يبدأ i من 0 وتستمر الحلقة طالما أن i < 5 تساوي true۔ يرفع i بمقدار 1 في كل تكرار للحلقة باستخدام i++۔ وبالتالي، يتم عرض الأرقام من 0 إلى 4۔
نطاق عداد الحلقة
قم بتعريف أو تهيئة المتغيرات في جزء التهيئة من بيان for۔ المتغيرات التي تم تعريفها هنا صالحة فقط داخل الحلقة۔
1for (let i = 0; i < 3; i++) {
2 console.log(i); // Outputs 0, 1, 2
3}
4console.log(i); // ReferenceError
- كما هو موضح في هذا المثال، فإن الإشارة إلى متغير خارج عبارة
forستؤدي إلى خطأ۔
حلقة لا نهائية
تعيين شرط لا ينهي الحلقة يؤدي إلى حلقة لا نهائية۔ قد يشكل ذلك عبئاً على المتصفح أو النظام، لذا يلزم الحذر۔
1for (;;) {
2 console.log("Infinite loop");
3 break; // Exits the infinite loop with break
4}المصفوفات وبيان for
من الشائع استخدام بيان for بالتزامن مع المصفوفات۔ إنه مناسب لمعالجة كل عنصر في المصفوفة۔
مثال
1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"
بهذه الطريقة، يمكنك معالجة كل عنصر في المصفوفة باستخدام الفهارس۔
بُنى الحلقات الأخرى
تعليمة for...of
يُستخدم تعبير for...of لعناصر قابلة للتكرار مثل المصفوفات والسلاسل النصية۔
1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4 console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"
يتيح لك هذا معالجة كل عنصر بدون استخدام الفهارس۔
تعليمة for...in
يُستخدم تعبير for...in للتكرار عبر خصائص كائن ما۔
1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4 console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"
بهذه الطريقة، يمكنك تنفيذ العمليات على كل عنصر باستخدام المفاتيح۔
الملخص
- تعليمة
forهي بنية حلقة تتكون من ثلاثة أجزاء: التهيئة، الشرط والتحديث۔ - يمكنك التحكم في سلوك الحلقات باستخدام
breakأوcontinue۔ - عند دمجها مع المصفوفات أو الكائنات، يمكن معالجة العناصر أو الخصائص بكفاءة۔
تعليمة while في JavaScript
الصياغة الأساسية
1while (condition) {
2 // Code that repeats while the condition is true
3}تعليمة while في JavaScript هي بنية حلقة تُنفذ العمليات المتكررة طالما أن الشرط المحدد يساوي true۔ على غرار تعليمة for، تعليمة while تحدد فقط الشرط۔
- الشرط: اكتب التعبير الشرطي الذي يحدد ما إذا كان يجب استمرار الحلقة۔ تستمر الحلقة إذا كان الشرط يساوي
trueوتنتهي عندما يصبحfalse۔
مثال
1let i = 0;
2
3while (i < 5) {
4 console.log(i);
5 i++;
6}
7console.log(i); // 5
في هذا المثال، تبدأ الحلقة بالمُتغير i عند 0 وتنفذ طالما أن i < 5 يساوي true۔ في كل دورة من الحلقة، يتم زيادة i بمقدار 1، وعندما يصبح i يساوي 5، يصبح الشرط false وتنتهي الحلقة۔ ونتيجة لذلك، تعرض تعليمة while الأرقام من 0 إلى 4۔
على عكس تعليمة for، يتم كتابة تهيئة وتحديث المتغيرات في تعليمة while كتعليمات منفصلة۔ يمكنك أيضًا الرجوع إلى المتغير بعد تعليمة while۔ في هذه الحالة، يتم عرض الرقم 5 بعد انتهاء تعليمة while۔
حلقة لا نهائية
إذا كان الشرط دائمًا يساوي true، يحدث تكرار لانهائي لا ينتهي۔ يجب تجنب الحلقات اللانهائية، ولكن إذا استُخدمت عن قصد، يمكنك إنهاء الحلقة باستخدام تعليمة break۔
مثال
1while (true) {
2 console.log("Infinite loop");
3 break; // Ends the loop with `break`
4}معالجة المصفوفات باستخدام حلقة while
من الممكن أيضًا معالجة المصفوفات باستخدام تعليمة while۔
مثال
1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5 console.log(fruits[i]);
6 i++;
7}
8// Outputs "apple", "banana", "cherry"
تعليمة do...while
الصياغة الأساسية
1do {
2 // Code that is executed at least once
3} while (condition);تعليمة do...while، وهي نوع مختلف من تعليمة while، تتحقق من الشرط بعد تنفيذ الحلقة مرة واحدة على الأقل۔ بينما تتحقق تعليمة while من الشرط أولاً، تقوم تعليمة do...while بتنفيذ العملية مرة واحدة قبل التحقق من الشرط۔
مثال
1let i = 0;
2
3do {
4 console.log(i);
5 i++;
6} while (i < 5);في هذا المثال، يتم عرض i من 0 إلى 4۔ تختلف تعليمة do...while عن تعليمة while في أنها تُنفذ دائمًا مرة واحدة، حتى لو كان الشرط false۔
الملخص
- تُستخدم تعليمة
whileلتنفيذ الشيفرة بشكل متكرر طالما أن الشرطtrue۔ - احذر من الحلقات اللانهائية، ولكن يمكنك التحكم في تدفق الحلقات باستخدام
breakوcontinue۔ - تكون تعليمة
do...whileمفيدة عندما تريد تنفيذ الحلقة مرة واحدة على الأقل۔
break و continue
يمكنك استخدام break و continue داخل الحلقة۔
- تُستخدم
breakلإنهاء الحلقة مبكرًا۔ - تتخطى
continueالتكرار الحالي وتنتقل إلى التكرار التالي۔
مثال على break
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
في هذه الحالة، يتم تنفيذ break عندما تُصبح قيمة i تساوي 5۔ وبالتالي، يتم عرض الأرقام من 0 إلى 4۔
مثال على continue
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10while (i < 5) {
11 i++;
12 if (i === 3) {
13 continue; // Skips when i is 3
14 }
15 console.log(i);
16}
17// Outputs 1, 2, 4, 5
في هذه الحالة، يتم تنفيذ continue عندما تكون قيمة i تساوي 2۔ نتيجة لذلك، يتم عرض الأرقام التي لا تساوي 2۔
الحلقات المتداخلة في JavaScript
في برمجة JavaScript، الحلقات المتداخلة هي بنية تحتوي على حلقة واحدة داخل أخرى۔ تكون هذه الحلقات فعالة جدًا عندما تغطي بعض الخوارزميات أو العمليات أبعادًا أو طبقات متعددة۔ على سبيل المثال، معالجة مصفوفة متعددة الأبعاد تحتوي على مصفوفات داخل مصفوفات أخرى هو حالة نموذجية۔
هنا، سنشرح البنية الأساسية للحلقات المتداخلة، أمثلة الاستخدام، الاحتياطات، واعتبارات التحسين۔
البنية الأساسية للحلقات المتداخلة
البنية الأساسية للحلقة المتداخلة هي شكل يحتوي فيه حلقة واحدة أو أكثر داخل حلقة أخرى۔ في كل مرة يتم تنفيذ الحلقة الخارجية مرة واحدة، يتم تنفيذ الحلقة الداخلية هذا العدد من المرات۔
فيما يلي مثال أساسي على حلقتين متداخلتين۔
1for (let i = 0; i < 3; i++) {
2 console.log(`Outer loop iteration: ${i}`);
3
4 for (let j = 0; j < 2; j++) {
5 console.log(` Inner loop iteration: ${j}`);
6 }
7}
8// Output:
9// Outer loop iteration: 0
10// Inner loop iteration: 0
11// Inner loop iteration: 1
12// Outer loop iteration: 1
13// Inner loop iteration: 0
14// Inner loop iteration: 1
15// Outer loop iteration: 2
16// Inner loop iteration: 0
17// Inner loop iteration: 1
في الكود أعلاه، يتم عدّ i في الحلقة الخارجية ويتم عدّ j في الحلقة الداخلية۔ في كل مرة يتم تنفيذ الحلقة الخارجية مرة واحدة، يتم تنفيذ الحلقة الداخلية مرتين۔
مثال عملي للحلقات المتداخلة
الحلقات المتداخلة مفيدة بشكل خاص للتعامل مع المصفوفات متعددة الأبعاد۔ على سبيل المثال، عند معالجة مصفوفة ثنائية الأبعاد، تحتاج إلى التعامل مع كل من الصفوف (الحلقة الخارجية) والأعمدة (الحلقة الداخلية)۔
في المثال التالي، نتعامل مع مصفوفة ثنائية الأبعاد ونطبع كل عنصر۔
1const matrix = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row = 0; row < matrix.length; row++) {
8 for (let col = 0; col < matrix[row].length; col++) {
9 console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10 }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9
بهذه الطريقة، تتيح الحلقات المتداخلة الوصول إلى كل عنصر في المصفوفة ثنائية الأبعاد۔
ملاحظات
هناك بعض النقاط التي يجب الانتباه إليها عند استخدام الحلقات المتداخلة۔
-
مشكلات الأداء
كلما أصبحت الحلقات المتداخلة أعمق، يزداد وقت التنفيذ بشكل حاد۔ على سبيل المثال، إذا تم تنفيذ الحلقة الخارجية 100 مرة والحلقة الداخلية 100 مرة، فسيتم تنفيذ إجمالي 10,000 عملية۔ لذلك، إذا كان هناك العديد من تكرارات الحلقات، يجب النظر في تحسين الحلقات لتحقيق الكفاءة۔
-
تطبيق على الخوارزميات المعقدة
الحلقات المتداخلة قوية جدًا، ولكن عندما يصبح المعالجة معقدًا، قد يصبح الكود صعب الفهم۔ لذلك، للحفاظ على قابلية قراءة الكود، من المهم تنظيم المعالجة مع تعليقات ووظائف مناسبة۔
اعتبارات تحسين الأداء
عند استخدام الحلقات المتداخلة، يمكن النظر في التحسينات التالية۔
-
إنهاء مبكر للحلقة
إذا تم تحقق شرط معين داخل الحلقة، يمكنك استخدام عبارة
breakللخروج من الحلقة۔ يمكن أن يساعد ذلك في تجنب الحلقات غير الضرورية وتحسين الأداء۔
1for (let i = 0; i < 5; i++) {
2 for (let j = 0; j < 5; j++) {
3 if (i + j > 5) {
4 break;
5 }
6 console.log(`i: ${i}, j: ${j}`);
7 }
8}-
نقل الحسابات إلى الخارج
بدلاً من إجراء نفس الحساب داخل الحلقة في كل مرة، يمكنك إجراءه مرة واحدة خارج الحلقة واستخدام النتيجة لجعل العملية أكثر كفاءة۔
1let array = [1, 2, 3, 4, 5];
2
3// Inefficient example (calculating every time)
4for (let i = 0; i < array.length; i++) {
5 for (let j = 0; j < array.length; j++) {
6 let sum = array[i] + array[j];
7 console.log(sum);
8 }
9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14 for (let j = 0; j < arrayLength; j++) {
15 let sum = array[i] + array[j];
16 console.log(sum);
17 }
18}الملخص
الحلقات المتداخلة مفيدة جدًا للتعامل مع الهياكل والبيانات المعقدة والخوارزميات في JavaScript۔ ومع ذلك، إذا لم تُستخدم بشكل صحيح، فقد تؤدي إلى تدهور الأداء وانخفاض وضوح الكود۔ لاستخدام الحلقات المتداخلة بفعالية، من المهم السعي لتحسين الحلقات وتنظيم الكود، واتخاذ النهج المناسب بناءً على الحالة۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔