الجزء الثامن – المصفوفات (Arrays) في JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 130 دقيقة واحدة

✅ المصفوفات (Arrays) في JavaScript

🔶 يعني إيه مصفوفة؟

المصفوفة (Array) هي نوع بيانات بيخزن أكتر من قيمة في متغير واحد.
بدل ما تعمل متغير لكل عنصر

let student1 = "أحمد";
let student2 = "منى";
let student3 = "يوسف";

تقدر تستخدم مصفوفة:

let students = ["أحمد", "منى", "يوسف"];

✳️ إنشاء المصفوفة (Array Creation)

✅ الطريقة الأولى (الأشهر)

let colors = ["أحمر", "أخضر", "أزرق"];

✅ الطريقة الثانية (باستخدام new Array):

let numbers = new Array(1, 2, 3, 4);

✅ الوصول للعناصر (Indexing)

العنصر الأول: array[0]
العنصر الثاني: array[1]
وهكذا..

console.log(colors[0]); // "أحمر"

✳️ أهم الدوال (Methods) الخاصة بالمصفوفات:

الدالة	الوظيفة
`push()`	يضيف عنصر في آخر المصفوفة
`pop()`	يحذف آخر عنصر
`shift()`	يحذف أول عنصر
`unshift()`	يضيف عنصر في أول المصفوفة
`indexOf()`	يرجع موقع العنصر
`includes()`	يرجع true لو العنصر موجود

✅ أمثلة:

let fruits = ["تفاح", "موز", "برتقال"];

fruits.push("عنب");         // ["تفاح", "موز", "برتقال", "عنب"]
fruits.pop();               // ["تفاح", "موز", "برتقال"]
fruits.unshift("كيوي");     // ["كيوي", "تفاح", "موز", "برتقال"]
fruits.shift();             // ["تفاح", "موز", "برتقال"]
console.log(fruits.indexOf("موز"));    // 1
console.log(fruits.includes("تفاح"));  // true

✅ التكرار على المصفوفات (Looping)

🔹 باستخدام `for` loop

let cities = ["القاهرة", "الإسكندرية", "أسوان"];

for (let i = 0; i < cities.length; i++) {
  console.log("مدينة:", cities[i]);
}

🔹 باستخدام forEach():

cities.forEach(function(city, index) {
  console.log(index + ": " + city);
});

✅ 💯 مثال كامل وعملي على كل الكلام اللي فوق:

<!DOCTYPE html>
<html>
<head>
  <title>المصفوفات في JavaScript</title>
</head>
<body>
  <h2>افتح الكونسول (F12) علشان تشوف النتيجة</h2>

  <script>
    // إنشاء مصفوفة
    let fruits = ["تفاح", "موز", "برتقال"];
    console.log("المصفوفة الأصلية:", fruits);

    // استخدام push
    fruits.push("عنب");
    console.log("بعد push:", fruits);

    // استخدام pop
    fruits.pop();
    console.log("بعد pop:", fruits);

    // استخدام unshift
    fruits.unshift("كيوي");
    console.log("بعد unshift:", fruits);

    // استخدام shift
    fruits.shift();
    console.log("بعد shift:", fruits);

    // استخدام indexOf
    let index = fruits.indexOf("موز");
    console.log("موقع 'موز':", index);

    // استخدام includes
    let hasOrange = fruits.includes("برتقال");
    console.log("هل تحتوي على برتقال؟", hasOrange);

    // التكرار باستخدام for
    console.log("التكرار بـ for:");
    for (let i = 0; i < fruits.length; i++) {
      console.log(fruits[i]);
    }

    // التكرار باستخدام forEach
    console.log("التكرار بـ forEach:");
    fruits.forEach(function(fruit, index) {
      console.log(index + ": " + fruit);
    });
  </script>
</body>
</html>

الكود ده بيغطي إنشاء المصفوفة + أهم الدوال + طرق التكرار.