المصفوفات والكائنات في JavaScript — دليل شامل 2026

في المقال السابق، تعلمت الدوال وكيف تنظم الكود. لكن البرامج الحقيقية تحتاج إلى تخزين مجموعات من البيانات — قوائم، سجلات، جداول. هنا تأتي المصفوفات (Arrays) و الكائنات (Objects).

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

ما هي المصفوفة (Array)؟

المصفوفة هي قائمة مرتبة من القيم. كل قيمة لها فهرس (index) يبدأ من 0.

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

شرح:

• []: أقواس مربعة لتعريف مصفوفة.
• "تفاح": عنصر (element).
• fruits[0]: الوصول للعنصر الأول (الفهرس يبدأ من 0).

لماذا نحتاج المصفوفات؟

بدون المصفوفات:

const fruit1 = "تفاح";
const fruit2 = "موز";
const fruit3 = "برتقال";

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

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

الفوائد:

• تجميع البيانات: كل العناصر في متغير واحد.
• سهولة المرور: استخدام الحلقات.
• الطرق الجاهزة: push, pop, map, filter...
• المرونة: يمكن إضافة أو حذف عناصر.

إنشاء مصفوفة

1. الطريقة المباشرة:

const numbers = [1, 2, 3, 4, 5];
const names = ["أحمد", "محمد", "علي"];
const mixed = ["نص", 25, true, null];

2. باستخدام new Array():

const arr = new Array(1, 2, 3);

⚠️ نصيحة: استخدم الطريقة المباشرة [] — أبسط وأسرع.

3. مصفوفة فارغة:

const empty = [];

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

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

console.log(fruits[0]);  // تفاح
console.log(fruits[1]);  // موز
console.log(fruits[2]);  // برتقال
console.log(fruits[3]);  // undefined (لا يوجد)

آخر عنصر:

console.log(fruits[fruits.length - 1]);  // برتقال

الطول (length):

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

تعديل المصفوفة

إضافة عنصر في النهاية (push):

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

حذف آخر عنصر (pop):

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

إضافة في البداية (unshift):

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

حذف من البداية (shift):

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

تعديل عنصر:

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

الطرق الشائعة للمصفوفات

1. map — تحويل كل عنصر

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((n) => n * 2);

console.log(doubled);  // [2, 4, 6, 8]

2. filter — تصفية العناصر

const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter((n) => n % 2 === 0);

console.log(even);  // [2, 4, 6]

3. find — إيجاد أول عنصر يطابق الشرط

const numbers = [10, 20, 30, 40];
const found = numbers.find((n) => n > 25);

console.log(found);  // 30

4. reduce — تجميع المصفوفة إلى قيمة واحدة

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);

console.log(sum);  // 10

5. forEach — المرور على العناصر

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

fruits.forEach((fruit) => {
  console.log(fruit);
});

6. includes — التحقق من وجود عنصر

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

7. indexOf — إيجاد فهرس عنصر

const fruits = ["تفاح", "موز", "برتقال"];
console.log(fruits.indexOf("موز"));  // 1
console.log(fruits.indexOf("عنب"));  // -1 (غير موجود)

8. slice — نسخ جزء من المصفوفة

const numbers = [1, 2, 3, 4, 5];
const part = numbers.slice(1, 4);

console.log(part);  // [2, 3, 4]

9. splice — حذف/إضافة عناصر

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1);  // احذف عنصراً واحداً من الفهرس 2

console.log(numbers);  // [1, 2, 4, 5]

10. sort — ترتيب المصفوفة

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort((a, b) => a - b);

console.log(numbers);  // [1, 1, 2, 3, 4, 5, 6, 9]

11. reverse — عكس المصفوفة

const numbers = [1, 2, 3, 4];
numbers.reverse();

console.log(numbers);  // [4, 3, 2, 1]

12. join — تحويل المصفوفة إلى نص

const fruits = ["تفاح", "موز", "برتقال"];
const str = fruits.join(", ");

console.log(str);  // "تفاح, موز, برتقال"

جدول طرق المصفوفات الأساسية

الطريقة	الوظيفة
push()	إضافة في النهاية
pop()	حذف من النهاية
unshift()	إضافة في البداية
shift()	حذف من البداية
map()	تحويل كل عنصر
filter()	تصفية العناصر
find()	إيجاد أول عنصر
reduce()	تجميع إلى قيمة
forEach()	المرور على العناصر
includes()	التحقق من وجود عنصر
indexOf()	فهرس عنصر
slice()	نسخ جزء
splice()	حذف/إضافة
sort()	ترتيب
reverse()	عكس
join()	تحويل إلى نص

ما هو الكائن (Object)؟

الكائن هو مجموعة من أزواج "مفتاح: قيمة". يُستخدم لتمثيل كيان له خصائص متعددة.

const person = {
  name: "أحمد",
  age: 25,
  city: "عمان",
  isStudent: true,
};

console.log(person.name);  // أحمد
console.log(person.age);   // 25

شرح:

• {}: أقواس معقوفة لتعريف كائن.
• name: مفتاح (key).
• "أحمد": قيمة (value).
• :: فاصل بين المفتاح والقيمة.
• ,: فاصل بين الخصائص.

الوصول إلى خصائص الكائن

1. باستخدام النقطة (Dot Notation):

console.log(person.name);  // أحمد

2. باستخدام الأقواس المربعة (Bracket Notation):

console.log(person["name"]);  // أحمد

متى تستخدم الأقواس؟ عندما يكون المفتاح متغيراً:

const key = "name";
console.log(person[key]);  // أحمد

تعديل الكائن

إضافة خاصية جديدة:

person.email = "[email protected]";
console.log(person.email);  // [email protected]

تعديل خاصية موجودة:

person.age = 26;
console.log(person.age);  // 26

حذف خاصية:

delete person.isStudent;
console.log(person.isStudent);  // undefined

طرق الكائنات

1. Object.keys() — الحصول على المفاتيح

const person = { name: "أحمد", age: 25, city: "عمان" };
console.log(Object.keys(person));  // ["name", "age", "city"]

2. Object.values() — الحصول على القيم

console.log(Object.values(person));  // ["أحمد", 25, "عمان"]

3. Object.entries() — الحصول على الأزواج

console.log(Object.entries(person));
// [["name", "أحمد"], ["age", 25], ["city", "عمان"]]

4. Object.assign() — دمج الكائنات

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const merged = Object.assign({}, obj1, obj2);
console.log(merged);  // { a: 1, b: 2, c: 3, d: 4 }

5. Spread Operator — نسخ ودمج

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2);  // { a: 1, b: 2, c: 3 }

المصفوفات داخل الكائنات

يمكن دمج المصفوفات والكائنات:

const user = {
  name: "أحمد",
  age: 25,
  hobbies: ["قراءة", "برمجة", "رياضة"],
  address: {
    city: "عمان",
    country: "الأردن",
  },
};

console.log(user.hobbies[0]);        // قراءة
console.log(user.address.city);      // عمان

المصفوفات من الكائنات

const users = [
  { name: "أحمد", age: 25 },
  { name: "محمد", age: 30 },
  { name: "علي", age: 20 },
];

// الوصول
console.log(users[0].name);  // أحمد
console.log(users[1].age);   // 30

// التصفية
const adults = users.filter((u) => u.age >= 25);
console.log(adults);
// [{ name: "أحمد", age: 25 }, { name: "محمد", age: 30 }]

// التحويل
const names = users.map((u) => u.name);
console.log(names);  // ["أحمد", "محمد", "علي"]

تمارين عملية

تمرين 1: إنشاء مصفوفة

أنشئ مصفوفة بأسماء 5 فواكه، ثم اطبع أول وآخر فاكهة.

الحل:

const fruits = ["تفاح", "موز", "برتقال", "عنب", "فراولة"];

console.log(fruits[0]);                    // تفاح
console.log(fruits[fruits.length - 1]);   // فراولة

تمرين 2: مجموع الأرقام

احسب مجموع مصفوفة أرقام.

الحل:

const numbers = [10, 20, 30, 40, 50];
const sum = numbers.reduce((acc, n) => acc + n, 0);

console.log(sum);  // 150

تمرين 3: التصفية

من مصفوفة أرقام، استخرج الأرقام الأكبر من 10.

الحل:

const numbers = [5, 15, 8, 20, 3, 25];
const bigNumbers = numbers.filter((n) => n > 10);

console.log(bigNumbers);  // [15, 20, 25]

تمرين 4: إنشاء كائن

أنشئ كائناً book يحتوي على:

• title, author, year, price

الحل:

const book = {
  title: "تعلم JavaScript",
  author: "أحمد محمد",
  year: 2026,
  price: 49.99,
};

console.log(book.title);   // تعلم JavaScript
console.log(book.author);  // أحمد محمد

تمرين 5: مصفوفة كائنات

أنشئ مصفوفة بـ 3 طلاب (اسم، عمر، درجة)، ثم:

• اطبع أسماء الطلاب.
• احسب متوسط الدرجات.

الحل:

const students = [
  { name: "أحمد", age: 20, grade: 85 },
  { name: "محمد", age: 22, grade: 90 },
  { name: "علي", age: 21, grade: 78 },
];

// الأسماء
const names = students.map((s) => s.name);
console.log(names);  // ["أحمد", "محمد", "علي"]

// المتوسط
const avg = students.reduce((acc, s) => acc + s.grade, 0) / students.length;
console.log(avg);  // 84.33

تمرين 6: دمج المصفوفات

ادمج مصفوفتين في واحدة.

الحل:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];

console.log(merged);  // [1, 2, 3, 4, 5, 6]

تمرين 7: البحث في مصفوفة كائنات

ابحث عن طالب باسم "محمد".

الحل:

const students = [
  { name: "أحمد", age: 20 },
  { name: "محمد", age: 22 },
  { name: "علي", age: 21 },
];

const found = students.find((s) => s.name === "محمد");
console.log(found);  // { name: "محمد", age: 22 }

تمرين 8: ترتيب المصفوفة

رتب مصفوفة أرقام تصاعدياً وتنازلياً.

الحل:

const numbers = [5, 2, 8, 1, 9, 3];

// تصاعدي
const asc = [...numbers].sort((a, b) => a - b);
console.log(asc);  // [1, 2, 3, 5, 8, 9]

// تنازلي
const desc = [...numbers].sort((a, b) => b - a);
console.log(desc);  // [9, 8, 5, 3, 2, 1]

حل المشاكل الشائعة

🔴 المشكلة 1: undefined عند الوصول

السبب: الفهرس خارج نطاق المصفوفة، أو الخاصية غير موجودة.

const arr = [1, 2, 3];
console.log(arr[10]);  // undefined

const obj = { name: "أحمد" };
console.log(obj.age);  // undefined

الحل: تحقق من الوجود:

if (arr[10] !== undefined) { /* ... */ }
if ("age" in obj) { /* ... */ }

🔴 المشكلة 2: تعديل مصفوفة أثناء المرور عليها

السبب: إضافة/حذف عناصر أثناء forEach أو for...of.

الحل: انسخ المصفوفة أولاً:

const arr = [1, 2, 3];
[...arr].forEach((item) => {
  arr.push(item * 2);  // آمن
});

🔴 المشكلة 3: مقارنة مصفوفات

السبب: المصفوفات تُقارن بالمرجع، وليس بالقيمة.

console.log([1, 2] === [1, 2]);  // false

الحل: استخدم JSON.stringify أو مقارنة عنصراً بعنصر:

console.log(JSON.stringify([1, 2]) === JSON.stringify([1, 2]));  // true

🔴 المشكلة 4: sort لا يعمل كما تتوقع

السبب: sort الافتراضي يحول العناصر إلى نصوص.

const numbers = [10, 2, 5, 1];
numbers.sort();
console.log(numbers);  // [1, 10, 2, 5] ⚠️

الحل: استخدم دالة مقارنة:

numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 2, 5, 10]

جدول الأوامر الأساسية

الأمر	الوظيفة
const arr = [1, 2, 3];	إنشاء مصفوفة
const obj = { key: "value" };	إنشاء كائن
arr.push(x)	إضافة عنصر
arr.map(fn)	تحويل العناصر
arr.filter(fn)	تصفية العناصر
arr.reduce(fn, init)	تجميع إلى قيمة
obj.key	الوصول لخاصية
Object.keys(obj)	المفاتيح
Object.values(obj)	القيم

قائمة تحقق نهائية

المهمة	الحالة
فهم المصفوفات وكيفية إنشائها	⬜
استخدام push, pop, shift, unshift	⬜
استخدام map, filter, reduce	⬜
فهم الكائنات وكيفية إنشائها	⬜
الوصول للخصائص وتعديلها	⬜
استخدام Object.keys, values, entries	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت المصفوفات والكائنات، أنت جاهز للمقال التالي:

1. DOM — التفاعل مع صفحات الويب.
2. المشاريع العملية — بناء تطبيقات حقيقية.
3. Async/Await — البرمجة غير المتزامنة.

الخلاصة

في هذا المقال، تعلمت:

• ✅ ما هي المصفوفات وكيفية إنشائها.
• ✅ الوصول للعناصر وتعديلها.
• ✅ الطرق الشائعة: push, pop, map, filter, reduce...
• ✅ ما هي الكائنات وكيفية إنشائها.
• ✅ الوصول للخصائص وتعديلها.
• ✅ Object.keys, values, entries.
• ✅ دمج المصفوفات والكائنات.

تذكر: المصفوفات والكائنات هما العمود الفقري لأي تطبيق JavaScript. أتقنهما جيداً.

هل أتقنت المصفوفات والكائنات؟ شاركنا في التعليقات!