تعلم البرمجة باستخدام JavaScript


الدرس: تجميع البيانات الخاصة بك مع الجداول والعناصر


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

إذا كان عليك فقط إدارة دعوتين للفنان الرئيسي ، فيمكنك أن تتخيل استخدام متغيرين فقط مع أسماء المدعوين. يمكن أن يبدو الكود كما يلي:


let firstFrontRowGuest;

 

let secondFrontRowGuest;
 
بعد ذلك ، عندما يعطيك الفنان المعلومات ، يمكنك فقط تعيين اسم لكل متغير. على سبيل المثال ، قد يكون لديك:

firstFrontRowGuest = "Sarah Kate";

 

secondFrontRowGuest = "Audrey Simon";
 
ولكن ماذا لو كان الصف الأول به 30 مقعدًا؟ ألن يكون من الأسهل استخدام متغير واحد يحتوي على كل هذه المعلومات؟

يوجد نوع لهذا في JavaScript : المصفوفة .

استخدم مصفوفة لحفظ قائمة مرتبة من العناصر



لإنشاء مصفوفة فارغة وحفظها في متغير ، استخدم زوجًا من الأقواس المربعة:


let guests = [];
 
يمكنك أيضًا إنشاء مصفوفة ممتلئة بوضع العناصر المرغوبة داخل الأقواس التالية:

let guests = ["Sarah Kate", "Audrey Simon", "Will Alexander"];
 
يمكنك بعد ذلك الوصول إلى عناصر هذه المصفوفة من خلال فهرسها:

let firstGuest = guests[0]; // "Sarah Kate"

 

let thirdGuest = guests[2]; // "Will Alexander"

 

let undefinedGuest = guests[12] // undefined
 
لا تنس أن تبدأ من الفهرس 0!

تدرب على إنشاء مصفوفة


JavaScript
تدرب على إنشاء لوحة لتسجيل حلقات المسلسل التلفزيوني الخاص بك باستخدام محرر CodePen هذا . 

في تمرين سابق ، قمت بإنشاء ثلاث مثيلات للفئة    Episode  في متغيرات منفصلة. في هذا التمرين ، ستقوم بتجميع هذه المتغيرات في مصفوفة واحدة.

  1. 1.       قم بإنشاء مصفوفة مخزنة في متغير حلقات(episodes) ، وقم بتعبئتها بالمتغيرات الثلاثة    firstEpisode  ،    secondEpisode  و    thirdEpisode  .
  2. 2.      حاول تغيير الترتيب الذي أضفته للحلقات ، وشاهد ما يحدث عند التحديث. 
تذكر أن الكود الخاص بك سينتقل بين تعليقات "===" في التمرين.

الحل المقترح



استخدم القيم بدلاً من المراجع



في JavaScript ، يتم تمرير الأنواع الأولية مثل الأرقام والقيم المنطقية والسلاسل حسب القيمة . هذا يعني أنك عندما تفعل شيئًا مثل:


let numberOfGuests = 20;

 

let totalNumberOfGuests = numberOfGuests; // 20
 
... يتم نسخ القيمة 20 في المتغير الجديد (totalNumberOfGuests) ، ولا يتم الاحتفاظ بأي ارتباط بين المتغيرين.

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


let artistProfile = {

 

name: "Tao Perkington",

 

age: 27,

 

available: true

 

};

 

let allProfiles = [artistProfile]; // مصفوفة جديدة تحتوي على الكائن أعلاه

 

artistProfile.available = false; // تعديل الكائن

 

console.log(allProfiles) // { nom: "Tao Perkington", âge: 27, disponible: false } طباعة 
 
على الرغم من أننا أنشأنا المصفوفة وقمنا بتمرير الكائن قبل تعديل هذا الكائن ، فإنك تراه في المصفوفة. هذا لأنه عندما نستخدم المصفوفات والكائنات ، فإننا نقوم بتمرير المراجع إلى الكائنات بدلاً من قيمة البيانات التي تحتوي عليها. المتغيرات artistProfileو   allProfiles هو مبين أعلاه تحتوي على مراجع إلى كائن ومجموعة في الذاكرة.

قد يبدو الأمر معقدًا بعض الشيء لمعرفة ذلك ، ولكن مع الممارسة ستعتاد على ذلك!

لمعرفة المزيد حول أنواع التمرير حسب القيمة وأنواع تمرير المراجع في JavaScript إليك مقالة بالانجليزية  أجدها مكتوبة جيدًا وسهلة الفهم.

العمل على المصفوفات (الجداول)



المصفوفات في JavaScript قوية جدًا ولديها الكثير من السمات والطرق المفيدة جدًا. هنا مقدمة موجزة عن عدد قليل منهم.

عد العناصر


تشير خاصية    length  المصفوفة إلى عدد العناصر التي تحتوي عليها:


let guests = ["Will Alexander", "Sarah Kate", "Audrey Simon"];

 

let howManyGuests = guests.length; // 3
 
استخدم تدوين النقطة للوصول إلى الخاصية    length  للمصفوفة الخاصة بك. قد لا يكون هذا مفيدًا جدًا في هذا المثال (لأننا نعرف عدد الضيوف الذين وضعناهم في المصفوفة!) ، ولكن في كثير من الحالات لن تعرف مسبقًا عدد العناصر الموجودة في المصفوفة.

إضافة وإزالة العناصر


لإضافة عنصر إلى نهاية المصفوفة ، استخدم التابع push :


guests.push("Tao Perkington"); 
 
يمكنك استخدام الترميز النقطي للوصول إلى طريقة    push  للمصفوفة ، وإحاطة العنصر لإضافته بين قوسين.

لإضافة عنصرك في بداية المصفوفة بدلاً من نهايتها ، استخدم الطريقة    unshift  :


guests.unshift("Tao Perkington"); 
 
لإزالة العنصر الأخير من مصفوفة ، استدع pop  ، دون تمرير أي متغيرات:


guests.pop(); // إزالة العنصر الأخير من المصفوفة
 

تدرب على العمل مع المصفوفات

JavaScript
انتقل إلى محرر CodePen هذا واتبع الخطوات التالية. 

في هذا التمرين ،    تم بالفعل إنشاء مصفوفة فارغة episodes     .

  1. باستخدام طريقة    push  للجدول   episodes  ، أضف الحلقات واحدة تلو الأخرى. أضف الحلقة الثالثة مرتين.
  2. باستخدام الطريقة   pop  ، قم بإزالة الحلقة الزائدة من اللوحة    episodes  .
  3. قم بإنشاء متغير يسمى    numberOfEpisodes  يحتوي على    length  من المصفوفة   episodes  .
  4. استمتع بإضافة الحلقات وإزالتها ، وتحقق من أن كل شيء يعمل بشكل صحيح.

الحل المقترح



باختصار



في هذا الفصل :

  • عليك أن تعرف المجموعات (collections)؛
  • لقد استكشفت المجموعة الأكثر شيوعًا في JavaScript : المصفوفة ؛
  • لقد تعلمت إنشاء الجداول وملئها ورأيت بعض الأدوات الأساسية للتعامل معها.
ستجد في الفصل التالي عن ملخص لهذا الجزء الأول من الدورة.