- التعامل مع المصفوفات Arrays
- التعامل مع الـmethod في المصفوفات
- التعرف على الـفانكشن
- التعرف على العبارات الشرطية في جافاسكربت
تعتبر المصفوفة Array من المواضيع المهمة في البرمجة والتي تستخدم بكثرة وتخدم المبرمج في جوانب عدة وتسهل عمله وتختصر عليه الكثير من الوقت والجهد، ويمكننا القول بأن المصفوفة Array هي عبارة عن مجموعة من القيم محفوظة ومخزنة في ذات المتغير، ويتم ترقيم هذه القيم بشكل تلقائي عند الإنشاء لتسهيل عملية الوصول إليها.
ببساطة، يمكننا القول بأن.. المصفوفة Array: هي عبارة عن متغير أو ثابت يتكون من مجموعة من القيم المرتبة، ويمكن الوصول لكل خانة أو قيمة من تلك القيم من خلال رقم يدعى index وهو ترتيب القيمة بين القيم. دعنا الآن نقوم بإنشاء مصفوفة تحتوي على ثلاث عناصر، ويتم ذلك بالشكل الموضح في المثال التالي:
let colors = [«red», «green», «blue»];
console.log(colors);
ببساطة، قمنا بتعريف متغير وأسميناه colors ثم أسندنا له ثلاث قيم. لاحظ كيف استخدمنا الأقواس المربعة [] ووضعنا القيم بداخلها وأننا فصلنا بين كل قيمة والأخرى بفاصلة. ثم قمنا في السطر الثاني بكتابة أمر طباعة يقوم بطباعة عناصر المصفوفة. والآن وعند تنفيذ الأسطر السابقة ستكون المُخرجات على النحو التالي:
[ ‹red›, ‹green›, ‹blue› ]
لاحظ هنا أن المخرجات طبعت بين قوسن.
ذكرنا سابقاً أن المصفوفة تحتوي على أكثر من قيمة، وأن كل قيمة مُرتبطة برقم يُسمى index، والذي يساعدنا على الوصول إلى تلك القيمة سواء لجلبها أو لتغييرها إلى قيمة أخرى. يبدأ ترقيم خانات وقيم المصفوفة من اليسار لليمين، ويبدأ التعداد من رقم صفر . لتوضيح الفكرة، سنقوم بوضع رقم index فوق كل خانة أو قيمة من قيم المصفوفة كما هو موضح في المثال التالي:
//index: 0 1 2
let colors = ["red", "green", "blue"];
الآن، لو أردنا الوصول للقيمة green لطباعتها مثلاً، فسنجد أن رقم index الخاص بها هو 1، لذلك، سنستخدم اسم المصفوفة colors مع الرقم 1 للوصول إليها، على النحو التالي:
console.log(colors[1]);
في المثال أعلاه، قمنا بطباعة قيمة المتغير colors الموجود في index رقم 1، وستكون المخرجات على النحو التالي:
green
فكر في المصفوفة Array على أنها متغير أو ثابت يحتفظ بمجموعة من القيم أو العناصر بشكل مرتب، و يمكن الوصول لكل عنصر باستخدام رقم يُسمى index و الذي يمثل ترتيب العنصر في المصفوفة
يعتبر حساب عدد عناصر المصفوفة من العمليات المستخدمة بشكلٍ كبير عند التعامل مع المصفوفات. في هذا الدرس سوف نتطرق للحديث عن الخاصية المستخدمة لحساب عدد عناصر المصفوفة length، أهميتها وكيفية كتابتها.
الخاصية length تُوجد عند اإنشاء أي مصفوفة، وتحتوي هذه الخاصية على عدد العناصر لهذه المصفوفة. المصفوفة التي لا تحتوي على عناصر تكون قيمة الخاصية length فيها تساوي صفر.
يمكننا معرفة عدد العناصر الموجودة داخل مصفوفة معينة عن طريق استخدام خاصية length. لتوضيح الفكرة، لاحظ معي المثال التالي:
let groceryList = ["Milk", "Flour", "Rice"];
console.log(groceryList.length);
نلاحظ في السطر الأول تم إنشاء مصفوفة تحتوي على 3 عناصر ومن ثم حفظها داخل المتغير groceryList. بعد ذلك، قمنا بطباعة طول تلك المصفوفة باستخدام length مع متغير المصفوفة groceryList كما هو موضح في السطر الثاني، وستكون المخرجات بالشكل التالي:
3
لاحظ انه تم طباعة الرقم ٣ وذلك لأن المصفوفة groceryList بالفعل تحتوي على ثلاث عناصر.
يمكن استخدام خاصية length مباشرة مع المصفوفة، بدلاً من استخدامها مع المتغير التابع للمصفوفة. لتوضيح الفكرة ، لاحظ معي المثال التالي:
let totalStudents = ["Sara", "Abeer", "Nada"].length;
console.log(totalStudents);
نلاحظ في المثال السابق اننا قمنا باستخدام length مباشرةً مع المصفوفة، ومن ثم قمنا بحفظ النتيجة داخل المتغير totalStudents وطباعته لتصبح النتيجة كما هو موضح في المخرجات التالية:
3
تستخدم الخاصية length عادةً في عمليات التكرار loops وذلك للمرور على جميع عناصر المصفوفة وتنفيذ عمليةٍ ما عليها. لتوضح الفكرة لاحظ معي المثال التالي:
let values = ["One", "Two", "three", "Four"]
for(let i = 0; i < values.length; i++){
console.log(values[i]);
}
نلاحظ في السطر الأول قمنا بإنشاء مصفوفة تحتوي على 4 عناصر وحفظها في المتغير values. بعد ذلك قمنا بإنشاء عملية التكرار باستخدام for وذلك لغرض المرور على جميع عناصر المصفوفة وطباعة قيمها. عند استخدام for يجب علينا تحديد متى تتوقف عملية التكرار، وفي هذه الحالة ستتوقف عند انتهاء عدد عناصر المجموعة. إذاً سنقوم بالاستعانه بخاصية length عن طريق وضع شرط انتهاء عملية التكرار عندما يصل التكرار الى قيمة تساوي طول المصفوفة او أكثر. تقوم عملية التكرار بطباعة عناصر المجموعة وستكون المخرجات على الشكل التالي:
One
Two
three
Four
نلاحظ أعلاه انه تم طباعة جميع عناصر المصفوفة وذلك عن طريق المرور على كل عنصر باستخدام عملية التكرار for وتوقف عملية التكرار عندما تنتهي عناصر المصفوفة.
تعلمنا في هذا الدرس طريقة حساب عدد عناصر المصفوفة باستخدام خاصية length.
تمكنك لغة JavaScript من تحديث العناصر داخل المصفوفة عن طريق استخدام رقم الخانة للعنصر او مايسمى index.
عند رغبتنا في تعديل أو تحديث قيمة عنصر معين داخل المصفوفة سنقوم باستخدام index العنصر اي بنفس طريقة الوصول إليه. ولتوضيح هذه الفكرة لاحظ معي المثال التالي:
const trafficLight = ["red", "yellow", "green"];
trafficLight[1] = "orange";
console.log(trafficLight);
في السطر الأول قمنا بإنشاء مصوففة بإسم trafficLight تحتوي على ثلاث عناصر red, yellow, green، وفي السطر الثاني قمنا بتحديث قيمة العنصر رقم 1 إلى orange وعند طباعة المصفوفة trafficLight ستكون المخرجات على النحو التالي:
["red", "orange", "green"]
لاحظ أنه تم تعديل قيمة عنصر رقم 1 من yellow إلى orange. تعلمنا في هذا الدرس على طريقة تحديث عنصر معين داخل المصفوفة بإستخدام index العنصر.
سنتعرف في هذا الدرس على كيفية إضافة عنصر جديد إلى المصفوفة، ويجب التنويه إلى أن هناك العديد من الطرق المستخدمة لإضافة العناصر إلى المصفوفات، حيث تعتبر هذه العملية من أهم العمليات التي تتم على المصفوفات
يمكننا إضافة عنصر إلى المصفوفة بإستخدام دالة push. تقوم هذه الدالة بإضافة العنصر إلى نهاية المصفوفة. لتوضيح الفكرة، لاحظ معي المثال التالي:
let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);
في المثال السابق قمنا بإنشاء مصفوفة باسم numbers تحتوي على ثلاث عناصر، ثم قمنا بإضافة عنصر جديد بإستخدام دالة push و ستكون المخرجات على النحو التالي:
[1, 2, 3, 4]
كما تلاحظ تم إضافة العنصر الجديد في نهاية مصفوفة numbers و هذا لأننا قمنا بإستخدام دالة push.
في هذا المثال سوف نقوم بانشاء مصفوفة تحتوي على لونين ثم سنقوم بإضافة اللون الأبيض و الأسود إلى نهايتها، لاحظ معي المثال التالي:
let colors = ["green", "grey"];
colors.push("white");
colors.push("black");
console.log(colors);
كما ترى فإننا قمنا بإنشاء مصفوفة باسم colors و جعلناها تحتفظ باللونين الأخضر و الرمادي ثم في السطر الثاني قمنا بإضافة اللون الأبيض و بعد ذلك في السطر الرابع قمنا بإضافة اللون الأسود و أخيرا قمنا بطباعة محتوى المصفوفة colors
[ "green", "grey", "white", "black" ]
كما ترى تمت إضافة اللون الأبيض و الأسود إلى نهاية المصفوفة
تعلمنا في هذا الدرس كيفية إضافة عنصر جديد إلى مصفوفة بإستخدام دالة push والتي تقوم بإضافة العنصر إلى نهاية المصفوفة
في هذا الدرس سوف نتعرف على طريقة إزالة آخر عنصر في المصفوفة و كيف يمكن أن نحتفظ و نتعامل مع القيمة المزالة.
يمكن استخدام دالة pop لإزالة آخر عنصر في المصفوفة.لتوضيح الفكرة، لاحظ معي المثال التالي:
let numbers = [1,2,3,4];
numbers.pop();
console.log(numbers);
في المثال السابق انشأنا مصفوفة باسم numbers، ثم في السطر الثاني قمنا بإزالة العنصر الأخير باستخدام دالة pop، و ستكون المخرجات على النحو التالي:
[1,2,3]
كما ترى فإن المصفوفة numbers أصبحت تحتوي على ثلاث عناصر فقط.
تقوم دالة pop بإرجاع العنصر الذي تمت إزالته حتى نتمكن من الإحتفاظ بها أو استخدامها بطريقة أخرى. لتوضيح الفكرة، لاحظ معي المثال التالي:
let colors = [ "green", "grey", "white", "black" ];
let removedItem = colors.pop();
console.log(colors);
console.log(removedItem);
في السطر الثاني من المثال السابق انشأنا متغير باسم removedItem و جعلناه يحتفظ بقيمة العنصر المزال من مصفوفة colors باستخدام دالة pop، ثم قمنا بطباعة محتوى المصفوفة و قيمة المتغير removedItem و ستكون المخرجات على النحو التالي:
[ ‹green›, ‹grey›, ‹white› ]
black
كما ترى فإن المصفوفة colors أصبحت تحتوي على ثلاث عناصر و العنصر الرابع تمت إزالته من المصفوفة ثم تمت طباعة قيمة المتغير removedItem.
تعرفنا في هذا الدرس على طريقة حذف آخر عنصر في المصفوفة والاحتفاظ بقيمته.
أثناء التعامل مع المصفوفات قد ترغب في دمج أكثر من مصفوفة معاً. مثلاً في المثال أدناه مصفوفتين كل مصفوفة مكونة من مجموعة من الألوان، وفي حال أردنا دمج تلك المصفوفتين توفر لنا لغة Javascript دالة concat والتي تستخدم لدمج مصفوفتين أو أكثر دون التأثير على المصفوفات الموجودة، أي تقوم بترجيع مصفوفة جديدة مكونة من جميع عناصر المصفوفات التي أردنا دمجها.
const primaryColors = ['red', 'yellow', 'blue']
const secondaryColors = ['green', 'orange', 'violet']
سنقوم الآن بدمج المصفوفتين primaryColors و secondaryColors بداخل مصفوفة جديدة باسم colors عن طريق تحديد اسم المصفوفة الأولى ثم استخدام الدالة concat مع إعطائها اسم المصفوفة الثانية بالشكل التالي:
const primaryColors = ['red', 'yellow', 'blue']
const secondaryColors = ['green', 'orange', 'violet']
const colors = primaryColors.concat(secondaryColors)
console.log(colors) //output: [ 'red', 'yellow', 'blue', 'green', 'orange', 'violet' ]
في المثال أعلاه تم دمج عناصر المصفوفة الأولى ['red', 'yellow', 'blue'] مع عناصر المصفوفة الثانية ['green', 'orange', 'violet'] وعند طباعة المصفوفة الجديدة أصبحت المخرجات كالتالي:
//output: [ 'red', 'yellow', 'blue', 'green', 'orange', 'violet' ]
لنفترض أن لدينا مصفوفة ونريد أن نقوم بالبحث عن عناصر معينة من هذهِ المصفوفة وتخزينها في مصفوفة جديدة. توفر لنا لغة JavaScript دالة باسم filter تساعدنا في هذا الغرض، بحيث تقوم هذهِ الدالة بفلترة عناصر المصفوفة بناءً على شرط معين وتخزين العناصر التي تطابق الشرط في مصفوفة جديدة.
const numbers = [2, 3, 7, 4, 9]
لدينا هنا مصفوفة مكونة من أرقام، سنقوم بتطبيق دالة filter عليها لاستخراج الأعداد الزوجية وتخزينها في مصفوفة جديدة، الدالة filter يمرر لها 3 قيم بحيث أن المدخل الأول هو العنصر الحالي (ابتداءً من العنصر 2 وحتى العنصر 9)، المدخل الثاني هو قيمة index للعنصر الحالي، وأخيرًا المدخل الثالث هو المصفوفة.
const numbers = [2, 3, 7, 4, 9]
const evenNumbers = numbers.filter(function(currentValue, index, array) {
return currentValue % 2 === 0
})
في المثال أعلاه الشرط الذي بداخل الدالة filter سيتم تطبيقه على جميع عناصر المصفوفة عنصر ويليه العنصر الآخر، مثلًا سيتم أولًا أخذ العنصر الأول 2 ثم سيتم اختبار الشرط عليه، هل باقي قسمة العدد 2 على 2 يساوي الصفر؟ إذا كان الجواب نعم سيتم تخزين العدد 2 بداخل مصفوفة باسم evenNumbers ثم الانتقال للعنصر التالي، أما إذا كان الجواب لا سيتم الانتقال للعنصر الآخر مباشرة دون تخزين العدد في المصفوفة الجديدة evenNumbers.
لنفترض أن لدينا مصفوفة تتكون من عدة عناصر، ونريد أن نحصل على أول عنصر الذي يطبق شرط معين، سنقوم الآن بتطبيقها باستخدام if statement.
const numbers = [11, 7, 9, 15]
for(let i = 0; i <= numbers.length; i++){
if(numbers[i]%3 === 0){
console.log(numbers[i])
break;
}
}
في Javascript بإمكاننا استخدام الدالة find لنفس الغرض وبشكل أبسط وأقصر في الكتابة. بحيث أن هذه الدالة تقوم بترجيع أول عنصر ينطبق عليه الشرط الذي تم وضعه. هذه الدالة تستقبل callback function تستدعيها في كل مرة تمر على أحد عناصر المصفوفة numbers وتقوم باختبار الشرط على هذا العنصر، في حال طابق الشرط ستقوم بترجيع قيمته.
const numbers = [11, 7, 9, 15]
const el = numbers.find(function(element) {
return element % 3 === 0
})
في المثال أعلاه تم تطبيق الدالة find على المصفوفة numbers. تستقبل Callback function وتتنفذ على كل عنصر من المصفوفة، مما يعني سيتم أخذ أول عنصر 11 ثم سيتم التحقق منه، هل يقبل القسمة على 3؟ إذا كان نعم سيتم تخزين قيمته في الثابت el ويتوقف التنفيذ. أما إذا كان لا سيتم الانتقال للعنصر الذي يليه.
الآن القيمة المخزنة بداخل الثابت el هي 9 لأنه أول عدد في المصفوفة يقبل القسمة على 3.
عند التعامل مع المصفوفات قد تحتاج إلى طباعة عناصرها بالكامل، في المثال التالي مصفوفة من ٣ عناصر وتم المرور على تلك العناصر من خلال for loop لطباعتها:
const colors = ['red', 'green', 'blue']
for(let i = 0; i < colors.length; i++){
console.log(colors[i])
}
المخرجات:
red
green
blue
هناك أيضًا دوال للتعامل مع المصفوفات بشكل خاص، تساعد في المرور على عناصر المصفوفة وتطبيق أي عملية عليها، مثل دالة forEach. هذه الدالة تستقبل callback function تقبل ما بين مدخل إلى ثلاث مدخلات بحيث أن:
- المدخل الأول: يمثل العنصر الحالي التي تمر عليه الدالة، لأنها تبدأ من أول عنصر وفي كل مرة تنتقل للعنصر الذي يليه لتطبق عليه عملية ما.
- المدخل الثاني: يمثل index الخاص بالعنصر الحالي التي تمر الدالة عليه.
- المدخل الثالث: المصفوفة نفسها.
سنقوم الآن بتطبيقها على المصفوفة colors.
const colors = ['red', 'green', 'blue']
colors.forEach((currentValue, index, array) => {
console.log(index, currentValue)
})
في المثال أعلاه تم تطبيق دالة forEach على المصفوفة colors.forEach ومن ثم تم تحديد ٣ مدخلات وهي العنصر، عنوان العنصر index والمصفوفة. وبداخل الدالة تم طباعة عنوان العنصر مع محتوى العنصر، بحيث أن الدالة forEach ستقوم أولاً بالمرور على العنصر الأول، طباعة عنوانه 0 مع محتواه red ثم تنتقل للعنصر الآخر وهكذا إلى أن تنتهي عناصر المصفوفة. المخرجات ستكون كالتالي:
0 red
1 green
2 blue
لنفترض أن لدينا مصفوفة معينة، ونريد البحث عن عنصر ما إن كان متواجد في تلك المصفوفة أم لا. هناك دالة includes تساعدك في هذا الغرض، لنفترص أن لدينا المصفوفة التالية:
// index 0 1 2
const colors = ['red', 'green', 'blue']
ونريد البحث هل هذه المصفوفة تحتوي على العنصر red أم لا، سنقوم باستخدام دالة includes ونقوم بإعطائها القيمة red لتقوم بالبحث عنها. ولأن الدالة includes ترجع قيمة boolean (أي True في حال وجدت العنصر و False في حال لم تجد العنصر) سنقوم بتعريف متغير باسم containsRed لتخزين قيمة مخرج الدالة.
// index 0 1 2
const colors = ['red', 'green', 'blue']
const isContainRed = colors.includes('red')
console.log(isContainRed) //output: true
المخرج من عملية البحث في المثال السابق true لأن العنصر red موجود فعليًا في المصفوفة colors.
الدالة includes من الممكن أن تستقبل مدخل آخر غير قيمة العنصر الذي ستبحث عنه، وهو قيمة index للبدء في عملية البحث، مثلاً نستطيع أن نطلب من الدالة القيام بالبحث عن العنصر red ابتداءً من index = 1 بالشكل التالي:
// index 0 1 2
const colors = ['red', 'green', 'blue']
const isContainRed = colors.includes('red', 1)
console.log(isContainRed) //output: false
في هذه الحالة سيكون المخرج False لأن العنصر red موجود في index = 0 والدالة includes قامت بتخطي index = 0 وبدأت من عند index = 1.
لنفترض أنه لدينا مصفوفة ما، ونريد جمع عناصر تلك المصفوفة بداخل نص String. في هذه الحالة توفر لغة Javascript دالة Join والتي تقوم بإنشاء وترجيع نص جديد يتكون من عناصر المصفوفة مفصولة بفاصلة (Comma) أو أي رمز آخر. في المثال التالي لدينا مصفوفة باسم arrColors:
const arrColors = ['red', 'green', 'blue']
الدالة Join تستقبل مُدخل رمز اختياري والذي يمثل الفواصل بين عناصر المصفوفة بداخل النص. بحيث أنه إذا لم يتم إعطاء الرمز للدالة ستقوم الدالة بوضع فاصلة بين كل عنصر والآخر ويصبح شكل النص كالتالي red,green,blue، وفي حال كان المُدخل عبارة عن نص فارغ سيتم جمع عناصر المصفوفة دون أي رمز بينهما. سنقوم الآن بجمع عناصر المصفوفة arrColors باستخدام الدالة Join دون إعطائها أي مُدخل بداخل نص جديد باسم strColors.
const arrColors = ['red', 'green', 'blue']
const strColors = arrColors.join()
console.log(strColors) //output: red,green,blue
بما أنه لم يتم إعطاء أي مدخل للدالة Join ستقوم بوضع فاصلة بين كل عنصر والآخر، وستكون المخرجات كالتالي:
//output: red,green,blue
الآن سنقوم بإعطاء الدالة مُدخل نص فارغ مما يجعلها تقوم بجمع العناصر دون أي رمز بينهما، كما يلي:
const arrColors = ['red', 'green', 'blue']
const strColors = arrColors.join('')
console.log(strColors) //outpt: redgreenblue
أصبحت العناصر متلاصقة بداخل النص بالشكل التالي:
//outpt: redgreenblue
الآن، سنقوم بإعطاء الدالة مُدخل نص وبداخله مسافة (whitespace) حتى تقوم بوضع مسافة بين كل عنصر والآخر بداخل النص.
const arrColors = ['red', 'green', 'blue']
const strColors = arrColors.join(' ')
console.log(strColors) //output: red green blue
عندها ستصبح المخرجات كما يلي:
//output: red green blue
عند التعامل مع المصفوفات من أكثر التطبيقات عليها هو المرور على عناصرها ومن ثم تطبيق بعض العمليات عليها. من أكثر الدوال استخدامًا لهذا الغرض هي الدالة map والتي ينتج عنها مصفوفة جديدة مكونة من عناصر مصفوفة أخرى لكن بعد تطبيق بعض العمليات على كل عنصر منها. مثلاً في المثال أدناه مصفوفة مكونة من عدة أرقام نريد ضرب كل عنصر من تلك المصفوفة في العدد ٢:
const array1 = [1, 4, 9, 16];
من الممكن الاستعانة بالدالة map لضرب كل عنصر بالعدد ٢ ومن ثم تخزين هذا العنصر في مصفوفة جديدة. ثم الانتقال للعنصر الآخر وتكرار نفس الخطوات. الدالة map تستقبل callback function والتي بدورها تستقبل ٣ مدخلات وهي currentValue, index, array. نحتاج هنا فقط currentValue والذي يمثل العنصر الحالي الذي تمر عليه الدالة map
من المصفوفة array1. بحيث أنها تبدأ من العنصر الأول، أي أن قيمة currentValue في المرة الأولى=1، تضرب هذا العنصر في العدد ٢ ثم تنتقل للعنصر الآخر وهكذا.
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function(currentValue) {
return currentValue * 2
})
console.log(map1) //output: [ 2, 8, 18, 32 ]
إذًا باختصار الدالة map قامت بالمرور على جميع عناصر المصفوفة array وتطبيق عملية الضرب بالعدد 2 على جميع العناصر، وتخزين هذه العناصر في مصفوفة جديدة باسم map1. فأصبحت المخرجات كالتالي:
//output: [ 2, 8, 18, 32 ]
هناك طريقة أبسط وأقصر في تنفيذ هذه العملية، وهي استخدام Arrow function مع الدالة map كما في المثال أدناه:
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
نلاحظ أن المثال أصبح أقصر وأبسط في القراءة دون التأثير على المخرجات.
//output: [ 2, 8, 18, 32 ]
لنفترض أن لدينا المصفوفة التالية مكونة من أرقام مكتوبة تصاعديًا، ونريد عكسها أو تخزينها بشكل تنازلي:
const numbers = [1, 2, 3, 4, 5]
في هذه الحالة تساعدنا الدالة reverse في هذا الغرض، والتي تستخدم لعكس عناصر المصفوفة نفسها دون إنشاء مصفوفة جديدة.
const numbers = [1, 2, 3, 4, 5]
numbers.reverse()
console.log(numbers) //output: [ 5, 4, 3, 2, 1 ]
بهذا الشكل تم عكس جمع عناصر المصفوفة numbers باستخدام الدالة reverse ليصبح شكل المصفوفة كالتالي:
//output: [ 5, 4, 3, 2, 1 ]
لنفترض أن لدينا نص string معين ونريد تقسيم هذا النص إلى عناصر بداخل مصفوفة.
const strColors = 'red green blue black'
توفر لغة Javascript دالة split والتي تقوم بتقسيم النص على عدة أقسام نصية مرتبة وتخزينها في مصفوفة جديدة. الآن سنقوم بتقسيم النص strColor إلى عدة ألوان، بحيث كل لون يمثل عنصر بداخل مصفوفة جديدة باسم arrColors بالشكل التالي:
const strColors = 'red green blue black'
const arrColors = strColors.split(' ')
console.log(arrColors) //output: [ 'red', 'green', 'blue', 'black' ]
في المثال أعلاه، قمنا بإعطاء الدالة split مُدخل علامات تنصيص بداخلها مسافة whitespace، وهذا يعني أن الدالة ستقوم بأخذ النص حتى ترى مسافة whitespace، ستتوقف وتخزن النص كعنصر في المصفوفة، وتقوم بالاستمرار بعد المسافة في أخذ نص جديد لتخزينه كعنصر في المصفوفة. وهذا يعني أنها ستأخذ الكلمة red بعدها سترى مسافة فتتوقف وتقوم بتخزين الكلمة red كعنصر في المصفوفة، ثم تكمل بعد المسافة وتأخذ الكلمة green وتخزنها في المصفوفة، وهكذا حتى تنتهي من النص strColors، فتصبح المخرجات كالتالي:
//output: [ 'red', 'green', 'blue', 'black' ]
إذًا الدالة split نقوم بإعطائها المُدخل الذي نريد منها أن تتوقف عنده بداخل النص والاستمرار من بعده. مثلاً لو كان النص لدينا كما في المثال التالي، ونريد تخزين كل لون على حِده:
const strColors = 'red ; green ; blue ; black'
سنقوم بإعطاء الدالة المُدخل ; حتى تتمكن من أخذ كل لون على شكل عنصر في المصفوفة الجديدة بالشكل التالي:
const strColors = 'red ; green ; blue ; black'
const arrColors = strColors.split(' ; ')
console.log(arrColors) //output: [ 'red', 'green', 'blue', 'black' ]
كما نستطيع أن نخبر الدالة split أن تتوقف بعد أخذ عدد معين من العناصر، وذلك عن طريق إعطائها مدخل آخر يمثل عدد العناصر التي ستتوقف بعد تخزينها. فإن أردنا تخزين فقط أول لونين red و green سنقوم بإعطائها العدد ٢ كالتالي:
const strColors = 'red ; green ; blue ; black'
const arrColors = strColors.split(' ; ', 2)
console.log(arrColors) //output: [ 'red', 'green' ]
أثناء قيامك بكتابة البرنامج، ستواجه عدداً من الحالات التي تريد فيها تنفيذ أوامر معينة عند تحقق شرط محدد، أي أنك لا تريد تنفيذ تلك الأوامر مباشرة، بل تريد أن يتم تنفيذها ”فقط” عند تحقق شرط أو مجموعة من الشروط. لتوضيح الفكرة، افرض أنك تريد تنفيذ مجموعة من الأوامر في حال كان عمر الطالب أكبر من 20 وتريد تنفيذ أوامر أخرى في حال لم يكن كذلك، في هذه الحال يمكنك استخدام if statement لتحقيق هذا الغرض.
إحدى الطرق التي تمكنك من ربط الأوامر بالشروط هي جُملة if. ببساطة، كل ما عليك القيام به هو ربط مجموعة من الأوامر بشرط ما أو بمجموعة من الشروط، وعندها، لن يتم تنفيذ تلك الأوامر إلا إذا تحقق الشرط. لفهم الفكرة لاحظ معي الشكل العام لجملة if في المثال التالية:
if(condition){
statement1
statement2
...
statementN
}
سيتم تنفيذ جميع الأوامر - الموجودة بين الأقواس {}، والمشار إليها هنا بكلمة statement- فقط عندما يتحقق الشرط الذي أُشير إليه بكلمة condition. جميع الأوامر الموجودة بداخل جملة if، هي أوامر لن يتم تنفيذها حتى يتحقق الشرط condition، أي عندما تكون نتيجته true، عدا ذلك، سيتم تجاوزه تلك الأوامر. توضح الأسطر التالية مثال على استخدام جملة if :
let age = 25;
if(age > 18){
console.log("You are an adult");
}
في هذا المثال، ستتم طباعة الرسالة في حالة واحدة فقط، وهي أن يكون age أكبر من 18، وبما أن الشرط تحقق فعلاً في هذه الحالة، فستتم طباعة الرسالة.
You are an adult
في حال لم يتحقق الشرط في if statement فسيتم تجاهل الأوامر، ولكن ماذا لو أردنا تنفيذ أوامر برمجية أخرى في حال عدم تحقق الشرط، يمكننا استخدام else لهذا الغرض. لتوضيح الفكرة، دعنا نُعيد كتابة المثال السابق ليحتوي على else على النحو الموضح في الأسطر التالية:
let age = 17;
if(age > 18){
console.log("You are an adult");
} else {
console.log(‹You are a minor›);
}
في هذه الحالة، ستتم طباعة الرسالة الموجودة في جزء else، لأن الشرط الموجود في if لم يتحقق، وذلك لكون العمر المخزن في المتغير age أقل من 18 .
You are a minor
هناك حالات برمجية نحتاج فيها إلى اختبار أكثر من مسار وليس مسارين فقط مثل if-else. لتوضيح الفكرة، دعنا ننظر إلى إشارة المرور على سبيل المثال، ففيها سنجد أن لدينا ثلاث خيارات أحمر، أصفر، أخضر. في كل حالة أو لون من ألوان الإشارة سيكون لدينا أمر أو أكثر سيتبعه أصحاب المركبات. ففي حالة الأحمر، قف، وفي حالة الأصفر، خفض السرعة، وفي حالة الأخضر، سر. يمكنك استخدام else if مع جملة if في حال كان لديك أكثر من شرط. والآن سنقوم بكتابة مثال إشارة المرور على النحو الموضح في الأسطر التالية:
let trafficLight = "yellow";
if(trafficLight == "green"){
console.log("Go!");
}else if(trafficLight == "yellow"){
console.log("Slow Down");
}else{
console.log("Stop!");
}
لاحظ كيف تم استخدام else if والتي سيتم التحقق منها في حال لم يتحقق الشرط الموجود في if ، اي انه سيتم اختبار الشرط الأول، وإذا لم يتحقق، سيتم الانتقال للشرط الثاني ، و بالتالي سوف تكون المخرجات على النحو التالي:
Slow Down
لان قيمة المتغير trafficLight هي اللون الاصفر yellow ، تم تنفيذ الاوامر التابع للشرط الثاني .
تعلمنا في هذا الدرس على طريقة استخدام الجمل الشرطية لتنفيذ أوامر معينة عند تحقق شرط محدد، و طريقة اختبار اكثر من شرط باستخدام else-if و التعامل مع الحالات الغير متوقعة باستخدام else.
في هذا الدرس سوف نتعرف على جملة switch واستخداماتها للتحكم بمسار البرنامج و كيف يمكننا اختبار اكثر من حالة و طريقة التعامل مع الحالات الغير متوقعة. و سنتعرف على الفرق بين switch statement و if statement.
تستخدم switch عند الحاجة لاتخاذ قرار في حال وجود احتمالات متعددة . تستقبل switch قيمة و تقارنها بعدد من الإحتمالات، و تنفذ مجموعة التعليمات البرمجية التابعة للحالة case المتوافقة. لتوضيح الفكرة لاحظ معي المثال التالي :
let trafficLight = "red";
switch (trafficLight) {
case "green":
console.log("Go!");
break;
case "yellow":
console.log("Slow Down");
break;
case "red":
console.log("Stop!");
break;
}
المخرجات:
Stop!
في المثال السابق قمنا بإنشاء متغير trafficLight و اسندنا إليه القيمة red، ثم قمنا باستخدام switch واسندنا إليها قيمة trafficLight لتتم عملية المقارنة عليها وتنفيذ مجموعة التعليمات البرمجية التابعة للحالة المطابقة لها حتى تصل إلى break و التي بدورها سوف تنهي عملية switch إن لم تكن break موجودة فإن البرنامج سوف يستمر في تنفيذ الأوامر إلى نهاية switch statement.
تستخدم default في نهاية switch وتقوم بالتعامل مع الحالات الغير متوقعة مما يعني أنها تنفذ في حال لم تتحقق أي case من الحالات السابقة ، لفهم هذا الأمر لاحظ معي المثال التالي:
let trafficLight = "blue";
switch (trafficLight) {
case "green":
console.log("Go!");
break;
case :"yellow":
console.log("Slow Down");
break;
case "red":
console.log("Stop!");
break;
default:
console.log("Invalid light");
}
المخرجات:
Invalid light
في المثال السابق قمنا بتعديل قيمة المتغير trafficLight و اسندنا إليه القيمة blue، لاحظ أنه في أثناء عملية المقارنة لم تتطابق القيمة المسندة مع أي case وبالتالي تم تنفيذ مجموعة التعليمات التابعة للحالة الافتراضية default.
تستقبل switch statement قيمة value و يتم تنفيذ الأوامر التابعة للحالة case المتطابقة، بينما تستقبل if statement شرط condition و يتم تنفيذ الأوامر التابعة للشرط المتحقق
يمكنك إستخدام switch بدلا من if بل إنه قد يفضل في بعض الحالات إستخدام switch حيث أنها تستخدم لمقارنة قيمة متغير واحد فقط بعدة حالات
تعلمنا في هذا الدرس على طريقة استخدام switch statement لتنفيذ أوامر التابعة للحالة المطابقة، و طريقة التعامل مع الحالات الغير متوقعة باستخدام default، و تعرفنا على الفرق بين switch statement و if statement و متى يفضل استخدام كل واحد منهم