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

آخر تحديث: 2026-10-13

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

دوال المصفوفات ذات صلة：Array.isArray() unshift() forEach shift() filter push() reduce pop() map for...of typeof for

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

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

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

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

طريقتان:

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

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

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

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

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

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

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

3. خاصية length

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

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

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

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

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

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

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

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

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

5. الأساليب الأساسية

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

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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>

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

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

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

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

7. forEach للتكرار

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

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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>

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

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

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

دوال المصفوفات ذات صلة：Array.isArray() unshift() forEach shift() filter push() reduce pop() map for...of typeof for

❓ أسئلة شائعة

📖 ملخص

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

📝 تمارين

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

فريق Web-Tutorial التقني

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

من نحن