الوحدة 6: المصفوفات (Arrays) في JavaScript

إليك كورس كامل عن الوحدة 6: المصفوفات (Arrays) في JavaScript، التي تشرح مفهوم المصفوفات وكيفية العمل معها. سنغطي المفاهيم الأساسية بشكل مفصل مع الأمثلة والتمارين العملية.

الوحدة 6: المصفوفات (Arrays) في JavaScript

الدرس 1: مقدمة في المصفوفات

• المفهوم الأساسي: المصفوفات هي نوع من أنواع البيانات في JavaScript تُستخدم لتخزين مجموعة من القيم في هيكل واحد. يمكن أن تحتوي المصفوفة على أنواع بيانات مختلفة مثل الأرقام، النصوص، والكائنات.

1. تعريف مصفوفة

• يتم تعريف المصفوفة باستخدام الأقواس المربعة [] مع القيم داخلها.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
console.log(fruits); // ["تفاحة", "موز", "برتقال"]


2. الوصول إلى عناصر المصفوفة

• يتم الوصول إلى عناصر المصفوفة باستخدام الفهرس (index) الذي يبدأ من الصفر.
  javascript

  Copy code

  console.log(fruits[0]); // "تفاحة"
console.log(fruits[1]); // "موز"
console.log(fruits[2]); // "برتقال"


الدرس 2: إضافة وتعديل عناصر المصفوفة

• المفهوم: يمكنك إضافة عناصر إلى المصفوفة أو تعديل العناصر الموجودة.

1. إضافة عناصر إلى المصفوفة

• يمكنك إضافة عناصر إلى المصفوفة باستخدام push() لإضافة العناصر إلى نهاية المصفوفة، أو unshift() لإضافتها إلى بداية المصفوفة.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز"];
  fruits.push("برتقال"); // إضافة إلى النهاية
  console.log(fruits); // ["تفاحة", "موز", "برتقال"]

  fruits.unshift("عنب"); // إضافة إلى البداية
console.log(fruits); // ["عنب", "تفاحة", "موز", "برتقال"]


2. تعديل عناصر المصفوفة

• يمكن تعديل أي عنصر في المصفوفة عن طريق الوصول إليه باستخدام الفهرس.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
fruits[1] = "كيوي"; // تعديل العنصر في الفهرس 1
console.log(fruits); // ["تفاحة", "كيوي", "برتقال"]


الدرس 3: حذف عناصر من المصفوفة

• المفهوم: يمكن حذف عناصر من المصفوفة باستخدام pop() و shift() لحذف العناصر من النهاية أو البداية، على التوالي.

1. استخدام pop() لحذف العنصر الأخير

• تقوم هذه الدالة بحذف العنصر الأخير من المصفوفة.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
fruits.pop(); // حذف العنصر الأخير
console.log(fruits); // ["تفاحة", "موز"]


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

• تقوم هذه الدالة بحذف العنصر الأول من المصفوفة.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
fruits.shift(); // حذف العنصر الأول
console.log(fruits); // ["موز", "برتقال"]


الدرس 4: التكرار عبر عناصر المصفوفة

• المفهوم: يمكنك التكرار عبر عناصر المصفوفة باستخدام حلقة for أو طرق أخرى مثل forEach().

1. استخدام حلقة for للتكرار عبر المصفوفة

• يمكنك استخدام حلقة for للتكرار عبر المصفوفة وتنفيذ عملية على كل عنصر.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // طباعة كل عنصر في المصفوفة
}


2. استخدام forEach() للتكرار عبر المصفوفة

• تعتبر forEach() طريقة مدمجة للتكرار عبر المصفوفة.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
fruits.forEach(function(fruit) {
console.log(fruit); // طباعة كل عنصر في المصفوفة
});


الدرس 5: البحث في المصفوفة

• المفهوم: يمكنك البحث عن عناصر في المصفوفة باستخدام عدة طرق.

1. استخدام indexOf() للبحث عن العنصر

• تقوم هذه الدالة بالبحث عن العنصر في المصفوفة وإرجاع فهرسه إذا وجد.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
console.log(fruits.indexOf("موز")); // 1
console.log(fruits.indexOf("عنب")); // -1 (لم يتم العثور عليه)


2. استخدام includes() للتحقق من وجود العنصر

• تقوم هذه الدالة بالتحقق إذا كانت المصفوفة تحتوي على العنصر.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
console.log(fruits.includes("موز")); // true
console.log(fruits.includes("عنب")); // false


الدرس 6: ترتيب المصفوفة

• المفهوم: يمكنك ترتيب المصفوفة باستخدام دالة sort()، ويمكنك عكس ترتيبها باستخدام reverse().

1. ترتيب المصفوفة باستخدام sort()

• تقوم هذه الدالة بترتيب المصفوفة بشكل افتراضي وفقًا لترتيب الحروف.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
fruits.sort();
console.log(fruits); // ["موز", "تفاحة", "برتقال"]


2. عكس ترتيب المصفوفة باستخدام reverse()

• تقوم هذه الدالة بعكس ترتيب المصفوفة.
  javascript

  Copy code

  let fruits = ["تفاحة", "موز", "برتقال"];
fruits.reverse();
console.log(fruits); // ["برتقال", "موز", "تفاحة"]


الدرس 7: دمج المصفوفات

• المفهوم: يمكنك دمج مصفوفات متعددة في مصفوفة واحدة باستخدام concat().

الدرس 8: استخدام map(), filter(), و reduce()

• المفهوم: تقدم JavaScript عدة طرق مدمجة للعمل مع المصفوفات مثل map(), filter(), و reduce().

1. استخدام map() لتعديل العناصر

• تقوم هذه الدالة بإنشاء مصفوفة جديدة بعد تطبيق دالة على كل عنصر.
  javascript

  Copy code

  let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16]


2. استخدام filter() لتصفية العناصر

• تقوم هذه الدالة بإنشاء مصفوفة جديدة تحتوي فقط على العناصر التي تحقق شرطًا معينًا.
  javascript

  Copy code

  let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]


3. استخدام reduce() لتجميع العناصر

• تقوم هذه الدالة بتركيب قيمة واحدة بناءً على العناصر في المصفوفة.
  javascript

  Copy code

  let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10


الدرس 9: تلخيص الوحدة

• المصفوفات: هي بنية بيانات تُستخدم لتخزين مجموعة من العناصر.
• إضافة وتعديل العناصر: يمكنك إضافة وتعديل عناصر المصفوفة باستخدام push(), unshift(), و تعديل العناصر مباشرة.
• حذف العناصر: يمكنك حذف العناصر باستخدام pop() و shift().
• البحث والتكرار: يمكنك البحث في المصفوفات باستخدام indexOf() و includes(), والتكرار عبر المصفوفات باستخدام forEach() و for.
• الترتيب والدمج: يمكنك ترتيب المصفوفات باستخدام sort()، وعكس ترتيبها باستخدام reverse()، ودمج المصفوفات باستخدام concat().

المشاريع العملية للوحدة 6:

• مشروع 1: بناء برنامج لإدارة قائمة مهام يستخدم المصفوفات لإضافة وحذف المهام.
• مشروع 2: كتابة تطبيق يستخدم map() لتحويل مصفوفة من الأرقام إلى مربعاتها.
• مشروع 3: بناء تطبيق فهرس مكتبة يتيح إضافة الكتب وعرضها باستخدام المصفوفات.