أساسيات المصفوفات في جافاسكريبت

Q: هل يمكنني استخدام break داخل forEach ؟

لا. forEach ليس لديه آلية break . للخروج المبكر، استخدم حلقة for تقليدية أو for...of مع break .

Q: هل الوصول إلى فهرس خارج النطاق يُلقي خطأ؟

لا. arr[100] يُرجع undefined عندما يكون خارج النطاق — لا تُلقي استثناء. لكن هذا يمكن أن يخفي أخطاء،所以他 من الجيد التحقق من نطاق الفهرس قبل الوصول.

المصفوفة مثل صف أدراج مرقمة — كل درج له رقم (فهرس) ويحتوي شيئًا (بيانات). يمكنك التقاط العناصر بالرقم، أو استبدالها، أو إضافة جديدة في النهاية. المصفوفات هي بنية البيانات التي ستستخدمها أكثر في التطوير اليومي.

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

المصفوفة هي مجموعة مرتبة من القيم يمكنها احتواء أي نوع بيانات:

HTML

<script>
let arr = [1, 'مرحبا', true, null, undefined];
</script>

يمكن لمصفوفة واحدة خلط أنواع مختلفة، لكن في الممارسة ستخزن عادة نفس النوع لتسهيل المعالجة.

إنشاء المصفوفات

طريقتان:

HTML

<script>
// الطريقة 1: بناء الحرف (موصى بها — نظيف ومباشر)
let fruits = ['تفاحة', 'موزة', 'برتقالة'];

// الطريقة 2: منشئ المصفوفة
let nums = new Array(1, 2, 3);
let empty = new Array(5);  // يُنشئ مصفوفة فارغة بطول 5، وليس [5]!
</script>

⚠️ new Array(5) يُنشئ مصفوفة فارغة بطول 5، وليس مصفوفة تحتوي على الرقم 5! هذا يوقع كثيرًا من الناس،所以他 فقط التزم ببناء [].

الوصول إلى العناصر

فهارس المصفوفات تبدأ من 0، وليس 1. العنصر الأول هو [0]، والثاني هو [1]، وهكذا:

HTML

<script>
let fruits = ['تفاحة', 'موزة', 'برتقالة'];
fruits[0];   // 'تفاحة'
fruits[1];   // 'موزة'
fruits[2];   // 'برتقالة'
</script>

الوصول إلى فهرس غير موجود لن يُلقي خطأ — يُرجع undefined:

HTML

<script>
fruits[5];   // undefined
</script>

خاصية length

length تُرجع عدد العناصر في المصفوفة:

HTML

<script>
let arr = [10, 20, 30];
arr.length;   // 3
</script>

length دائمًا أكبر بأقل من أعلى فهرس (بما أن الفهارس تبدأ من 0). العنصر الأخير هو عند arr.length - 1.

تعديل العناصر

فقط عيّن قيمة جديدة عبر الفهرس:

HTML

<script>
let fruits = ['تفاحة', 'موزة', 'برتقالة'];
fruits[1] = 'عنب';  // استبدل 'موزة' بـ 'عنب'
// ['تفاحة', 'عنب', 'برتقالة']
</script>

يمكنك أيضًا إضافة عناصر بالفهرس (غير موصى به — يُنشئ فراغات):

HTML

<script>
fruits[5] = 'بطيخ';
// ['تفاحة', 'عنب', 'برتقالة', فارغ × 2, 'بطيخ']
</script>

مثال: عمليات المصفوفة الأساسية

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>عمليات المصفوفة الأساسية</h2>
  <div id="output"></div>
  <script>
    let fruits = ['تفاحة', 'موزة', 'برتقالة', 'عنب', 'بطيخ'];
    let html = '<strong>المصفوفة الأصلية:</strong>' + fruits.join(', ') + '<br>';
    html += '<strong>الطول:</strong>' + fruits.length + '<br>';
    html += '<strong>الأول:</strong>' + fruits[0] + '<br>';
    html += '<strong>الأخير:</strong>' + fruits[fruits.length - 1] + '<br><br>';

    fruits[1] = 'مانجو';
    html += '<strong>بعد تعديل الفهرس 1:</strong>' + fruits.join(', ') + '<br>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

▶ جرّب الكود

الأساليب الأساسية

أساليب المصفوفة الأكثر استخدامًا لإضافة العناصر وحذفها:

الأسلوب	الإجراء	الإرجاع
`push()`	إضافة إلى النهاية	الطول الجديد
`pop()`	حذف من النهاية	العنصر المحذوف
`unshift()`	إضافة إلى البداية	الطول الجديد
`shift()`	حذف من البداية	العنصر المحذوف

HTML

<!DOCTYPE html>
<html lang="ar">
<head><meta charset="UTF-8"><title>أساليب المصفوفة</title></head>
<body>
<pre id="output"></pre>
<script>
let arr = ['a', 'b', 'c'];

arr.push('d');       // ['a','b','c','d']  يُرجع 4
arr.pop();           // ['a','b','c']      يُرجع 'd'
arr.unshift('z');    // ['z','a','b','c']  يُرجع 4
arr.shift();         // ['a','b','c']      يُرجع 'z'

document.getElementById('output').textContent = JSON.stringify(arr);
</script>
</body>
</html>

💡 حيلة الذاكرة: push/pop تعملان على الذيل; unshift/shift تعملان على الرأس. الأساليب التي تبدأ بـ p تؤثر على النهاية; تلك التي تبدأ بـ s تؤثر على البداية. الأساليب السابقة بـ un تضيف; بدون un تحذف.

مثال: مدير قائمة الفاكهة

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>مدير قائمة الفاكهة</h2>
  <input type="text" id="fruitInput" placeholder="أدخل اسم فاكهة">
  <button onclick="addFruit()">إضافة إلى النهاية</button>
  <button onclick="removeLast()">حذف الأخير</button>
  <p id="output"></p>
  <script>
    let fruits = ['تفاحة', 'موزة', 'برتقالة'];

    function showFruits() {
      let html = '<strong>قائمة الفاكهة الحالية:</strong><br>';
      if (fruits.length === 0) {
        html += '(قائمة فارغة)';
      } else {
        for (let i = 0; i < fruits.length; i++) {
          html += `[${i}] ${fruits[i]}<br>`;
        }
      }
      html += `<br>الإجمالي: ${fruits.length} فاكهة`;
      document.getElementById('output').innerHTML = html;
    }

    function addFruit() {
      let name = document.getElementById('fruitInput').value.trim();
      if (name) {
        fruits.push(name);
        document.getElementById('fruitInput').value = '';
        showFruits();
      }
    }

    function removeLast() {
      if (fruits.length > 0) {
        let removed = fruits.pop();
        showFruits();
      }
    }

    showFruits();
  </script>
</body>
</html>

▶ جرّب الكود

التحقق من المصفوفات: Array.isArray() مقابل typeof

typeof يُرجع "object" للمصفوفات، مما يجعله غير مفيد للتمييز بين المصفوفات والكائنات العادية:

HTML

<script>
let arr = [1, 2, 3];
typeof arr;              // "object"  ← غير مفيد!
Array.isArray(arr);      // true      ← الطريقة الصحيحة
</script>

⚠️ typeof غير موثوق للمصفوفات — استخدم دائمًا Array.isArray().

forEach للتكرار

forEach هي الطريقة الأكثر شيوعًا لتكرار المصفوفات — أكثر إعلانية من حلقة for:

HTML

<!DOCTYPE html>
<html lang="ar">
<head><meta charset="UTF-8"><title>forEach</title></head>
<body>
<pre id="output"></pre>
<script>
let fruits = ['تفاحة', 'موزة', 'برتقالة'];
let result = '';
fruits.forEach(function(fruit, index) {
  result += index + ' ' + fruit + '\n';
});
document.getElementById('output').textContent = result;
</script>
</body>
</html>

الدوال السهمية تجعلها أكثر اختصارًا:

HTML

<script>
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});
</script>

مثال: forEach في العمل

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>تكرار المصفوفة بـ forEach</h2>
  <div id="output"></div>
  <script>
    let students = [
      { name: 'سارة', score: 92 },
      { name: 'أحمد', score: 85 },
      { name: 'محمد', score: 78 },
      { name: 'ليلى', score: 96 }
    ];

    let html = '<table border="1" cellpadding="8" style="border-collapse:collapse">';
    html += '<tr><th>#</th><th>الاسم</th><th>الدرجة</th><th>التقدير</th></tr>';

    students.forEach((s, i) => {
      let grade = s.score >= 90 ? 'A' : s.score >= 80 ? 'B' : 'C';
      let color = s.score >= 90 ? 'green' : s.score >= 80 ? 'blue' : 'orange';
      html += `<tr>
        <td>${i + 1}</td>
        <td>${s.name}</td>
        <td>${s.score}</td>
        <td style="color:${color}">${grade}</td>
      </tr>`;
    });

    html += '</table>';

    let total = 0;
    students.forEach(s => total += s.score);
    html += `<p>المتوسط: ${(total / students.length).toFixed(1)}</p>`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

▶ جرّب الكود

⚠️ أساليب الترتيب الأعلى مثل map وfilter وreduce أكثر قوة — تُغطى في الدرس التالي.

📖 ملخص

أنشئ المصفوفات ببناء [] — تجنب new Array() (سهل أن تخلط)
الفهارس تبدأ من 0; العنصر الأخير هو عند الفهرس length - 1
push/pop تعملان على الذيل; unshift/shift تعملان على الرأس
استخدم Array.isArray() للتحقق مما إذا كان شيئًا مصفوفة — typeof يُرجع "object" وغير موثوق
forEach أكثر إعلانية من for، لكن لا يمكنك استخدام break للخروج المبكر

❓ أسئلة شائعة

س ماذا تُرجع push وunshift؟

ج كلاهما يُرجع الطول الجديد للمصفوفة، وليس المصفوفة المعدلة. كثير من الناس يتوقعون المصفوفة نفسها — let arr = [1].push(2) يُعطيك 2 (الطول)، وليس [1, 2].

س هل يمكنني استخدام break داخل forEach؟

ج لا. forEach ليس لديه آلية break. للخروج المبكر، استخدم حلقة for تقليدية أو for...of مع break.

س هل الوصول إلى فهرس خارج النطاق يُلقي خطأ؟

ج لا. arr[100] يُرجع undefined عندما يكون خارج النطاق — لا تُلقي استثناء. لكن هذا يمكن أن يخفي أخطاء،所以他 من الجيد التحقق من نطاق الفهرس قبل الوصول.

📝 تمارين

أنشئ مصفوفة بأسماء 5 مدن واستخدم forEach لعرض رقم واسم كل مدينة على الصفحة
ابنِ قائمة مهام: أدخل مهام لإضافتها إلى النهاية، انقر "تم" لحذف المهمة الأخيرة، واعرض القائمة في الوقت الفعلي
اكتب برنامجًا يأخذ 5 أرقام كمدخل، يخزنها في مصفوفة، ويعرض مجموعها ومتوسطها

404 Not Found

أساسيات المصفوفات في جافاسكريبت

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

إنشاء المصفوفات

الوصول إلى العناصر

خاصية length

تعديل العناصر

مثال: عمليات المصفوفة الأساسية

الأساليب الأساسية

مثال: مدير قائمة الفاكهة

التحقق من المصفوفات: Array.isArray() مقابل typeof

forEach للتكرار

مثال: forEach في العمل

📖 ملخص

❓ أسئلة شائعة

📝 تمارين