الدرس التاسع: المصفوفات في JavaScript – تنظيم البيانات ببساطة

الدرس التاسع: المصفوفات في JavaScript – تنظيم البيانات ببساطة 🗂️

العنوان:

كيفية تخزين البيانات المرتبة في قوائم باستخدام المصفوفات (Arrays).

المقدمة:

المصفوفات (Arrays) هي طريقة لتنظيم البيانات بشكل منظم. تخيل إنك عايز تخزن قائمة من الأسماء أو الأرقام في كودك. بدل ما تعمل متغير لكل اسم أو رقم، المصفوفات بتوفر طريقة فعالة لتخزينهم مع بعض. في الدرس ده، هنتعرف على أساسيات المصفوفات وكيفية التعامل معها بطرق عملية.

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

المصفوفة هي قائمة مرتبة من العناصر.
يمكن أن تحتوي على:
- أرقام (Numbers).
- نصوص (Strings).
- قيم منطقية (Booleans).
- أو حتى مصفوفات أخرى (Nested Arrays).
يتم الوصول إلى العناصر باستخدام الفهرس (Index).

كيفية تعريف المصفوفات:

تعريف مصفوفة بسيطة:


let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits);

النتيجة:

["Apple", "Banana", "Cherry"]

الوصول إلى عنصر معين:


console.log(fruits[0]); // "Apple"
console.log(fruits[2]); // "Cherry"

ملاحظة:

الفهرس يبدأ من 0.
fruits[0] يعني أول عنصر.

التعامل مع المصفوفات:

1. إضافة عناصر:

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


fruits.push("Orange");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Orange"]

باستخدام unshift (لإضافة عنصر في البداية):


fruits.unshift("Strawberry");
console.log(fruits); // ["Strawberry", "Apple", "Banana", "Cherry", "Orange"]

2. حذف عناصر:

باستخدام pop (لحذف آخر عنصر):


fruits.pop();
console.log(fruits); // ["Strawberry", "Apple", "Banana", "Cherry"]

باستخدام shift (لحذف أول عنصر):


fruits.shift();
console.log(fruits); // ["Apple", "Banana", "Cherry"]

الخواص والوظائف الأساسية:

1. طول المصفوفة (`length`):


console.log(fruits.length); // 3

2. المرور على العناصر باستخدام الحلقات:

باستخدام for:


for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

باستخدام for...of:


for (let fruit of fruits) {
  console.log(fruit);
}

3. البحث داخل المصفوفة (`indexOf`):


console.log(fruits.indexOf("Banana")); // 1
console.log(fruits.indexOf("Grapes")); // -1 (غير موجود)

4. التأكد من وجود عنصر (`includes`):


console.log(fruits.includes("Cherry")); // true
console.log(fruits.includes("Mango")); // false

المصفوفات المتداخلة (Nested Arrays):

تعريف:

مصفوفة تحتوي على مصفوفات أخرى.


let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][2]); // 6

شرح الكود:

matrix[1] يشير إلى الصف الثاني: [4, 5, 6].
matrix[1][2] يشير إلى العنصر الثالث في الصف الثاني: 6.

تطبيق عملي: إنشاء قائمة مهام (To-Do List):

كود HTML مع JavaScript:


<!DOCTYPE html>
<html>
  <body>
    <script>
      let tasks = [];
      tasks.push("Buy groceries");
      tasks.push("Clean the house");
      tasks.push("Finish homework");
      console.log("Your tasks:");
      for (let task of tasks) {
        console.log("- " + task);
      }
    </script>  </body>
</html>

النتيجة:

يتم عرض قائمة بالمهام في الـ Console.

تمارين عملية:

عرف مصفوفة بأسماء أصدقائك واطبع كل اسم مع رسالة "Hi, [Name]!".
أنشئ مصفوفة بأرقام من 1 إلى 10، واطبع الأرقام الزوجية فقط.
قم بإنشاء مصفوفة تحتوي على أسماء أفلامك المفضلة، واحذف آخر فيلم وأضف فيلم جديد.

وختامًا:

في الدرس ده، تعلمنا أساسيات المصفوفات وكيفية التعامل معها. في الدرس الجاي، هنستعرض الكائنات (Objects)، اللي هتساعدك تخزن بيانات أكتر تعقيدًا وتنظمها بشكل أفضل. استعد لاستكشاف المزيد! 🚀

تعديل المقال

WiseSyntax

الدرس التاسع: المصفوفات في JavaScript – تنظيم البيانات ببساطة