الدرس 6: المصفوفات والكائنات

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

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

💡 متى نستخدم المصفوفات؟

🛒 قائمة منتجات في عربة التسوق
👥 أسماء المستخدمين المسجلين
📊 نتائج اختبارات الطلاب
📝 مهام في قائمة To-Do
🎵 قائمة تشغيل موسيقى

مثال من الحياة: تخيل قائمة الطعام في مطعم. كل طبق له رقم (1, 2, 3...) واسم وصورة وسعر. المصفوفة هي هذه القائمة المنظمة.

🛠️ إنشاء المصفوفات والوصول للعناصر

هناك عدة طرق لإنشاء مصفوفة في JavaScript:

// الطريقة 1: Array Literal (الأشهر)
let fruits = ["تفاح", "موز", "برتقال"];

// الطريقة 2: Array Constructor
let numbers = new Array(1, 2, 3);

// الطريقة 3: Array.of (ES6)
let scores = Array.of(85, 90, 78);

// الوصول للعناصر (يبدأ الفهرس من 0)
fruits[0];    // "تفاح" — العنصر الأول
fruits[1];    // "موز" — العنصر الثاني
fruits[2];    // "برتقال" — العنصر الثالث

// عدد العناصر
fruits.length;  // 3

// آخر عنصر
fruits[fruits.length - 1];  // "برتقال"

// تعديل عنصر
fruits[0] = "تفاح أحمر";
            

❌ خطأ شائع:

المصفوفات تبدأ من 0 وليس 1! fruits[0] هو العنصر الأول، fruits[1] هو الثاني. هذا مصدر 80% من أخطاء المبتدئين.

🎯 دوال المصفوفات الأساسية

JavaScript توفر دوالاً قوية لإدارة المصفوفات. هذه الأكثر استخداماً:

إضافة وإزالة العناصر

let fruits = ["تفاح", "موز"];

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

// pop — إزالة من النهاية
let last = fruits.pop();     // last = "برتقال"

// unshift — إضافة في البداية
fruits.unshift("فراولة");    // ["فراولة", "تفاح", "موز"]

// shift — إزالة من البداية
let first = fruits.shift();  // first = "فراولة"
            

الدالة	الوظيفة	الموقع	تُرجع
`push(x)`	إضافة عنصر	النهاية	الطول الجديد
`pop()`	إزالة عنصر	النهاية	العنصر المُزال
`unshift(x)`	إضافة عنصر	البداية	الطول الجديد
`shift()`	إزالة عنصر	البداية	العنصر المُزال

⚠️ ملاحظة الأداء:

push و pop سريعتان (O(1)). لكن unshift و shift بطيئتان (O(n)) لأنهما تُعيد ترقيم كل العناصر. في المصفوفات الكبيرة، تجنب unshift/shift المتكرر.

🔍 البحث في المصفوفات

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

// indexOf — فهرس أول ظهور
fruits.indexOf("موز");       // 1
fruits.indexOf("عنب");       // -1 (غير موجود)

// lastIndexOf — فهرس آخر ظهور
fruits.lastIndexOf("موز");   // 3

// includes — هل يحتوي؟
fruits.includes("تفاح");    // true
fruits.includes("عنب");      // false

// find — البحث بشرط
let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(num => num > 10);  // 12 (أول قيمة > 10)

// findIndex — فهرس العنصر المُوجد
let index = numbers.findIndex(num => num > 10);  // 1
            

🔄 تحويل المصفوفات: map, filter, reduce

هذه الدوال الثلاث هي أقوى أدوات JavaScript لمعالجة البيانات. تُستخدم في كل تطبيق حديث.

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

تُنشئ مصفوفة جديدة بتطبيق دالة على كل عنصر:

let numbers = [1, 2, 3, 4, 5];

// ضاعف كل رقم
let doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

// تحويل لنصوص
let labels = numbers.map(num => `رقم ${num}`);
console.log(labels);  // ["رقم 1", "رقم 2", ...]
            

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

تُنشئ مصفوفة جديدة بالعناصر التي تُحقق الشرط:

let ages = [15, 22, 18, 12, 30, 17];

// الأعمار ≥ 18 فقط
let adults = ages.filter(age => age >= 18);
console.log(adults);  // [22, 18, 30]

// الأرقام الزوجية
let evens = [1, 2, 3, 4, 5].filter(n => n % 2 === 0);
console.log(evens);  // [2, 4]
            

reduce — تجميع القيم

تُقلل المصفوفة لقيمة واحدة (مجموع، حاصل ضرب، إلخ):

let prices = [100, 200, 300, 50];

// حساب المجموع
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total);  // 650

// حساب حاصل الضرب
let product = [2, 3, 4].reduce((acc, n) => acc * n, 1);
console.log(product);  // 24

// إيجاد الأكبر
let max = [5, 12, 8, 130, 44].reduce((max, n) => n > max ? n : max, 0);
console.log(max);  // 130
            

✅ القاعدة الذهبية:

map = تحويل كل عنصر.
filter = اختيار بعض العناصر.
reduce = تجميع كل شيء في قيمة واحدة.

📦 ما هي الكائنات ولماذا نحتاجها؟

الكائن (Object) يخزن البيانات في أزواج مفتاح-قيمة (Key-Value Pairs). تخيله كبطاقة هوية: الاسم مفتاح، "أحمد" قيمة.

💡 متى نستخدم الكائنات؟

👤 تخزين بيانات مستخدم (اسم، بريد، عمر)
🚗 وصف منتج (ماركة، موديل، سعر، لون)
⚙️ إعدادات التطبيق (theme, language, notifications)
📅 بيانات حدث (تاريخ، وقت، مكان، مدعوون)

🔑 الوصول للخصائص وتعديلها

// تعريف كائن
let person = {
    name: "أحمد",
    age: 25,
    email: "ahmed@example.com",
    isStudent: true
};

// الوصول بالنقطة (Dot Notation) — الأشهر
person.name;       // "أحمد"
person.age;        // 25

// الوصول بالأقواس (Bracket Notation) — للمفاتيح الديناميكية
person["email"];   // "ahmed@example.com"

// تعديل قيمة
person.age = 26;

// إضافة خاصية جديدة
person.city = "القاهرة";

// حذف خاصية
delete person.isStudent;

// التحقق من وجود خاصية
"name" in person;   // true
person.hasOwnProperty("age");  // true
            

⚠️ متى تستخدم Bracket Notation؟

استخدم person["name"] إذا كان المفتاح:
• يحتوي على مسافات: person["first name"]
• ديناميكي (متغير): person[key]
• يبدأ برقم: person["1stPlace"]

⚙️ الدوال داخل الكائنات (Methods)

الدالة داخل كائن تسمى Method. تستخدم this للوصول لخصائص الكائن نفسه:

let user = {
    firstName: "محمد",
    lastName: "علي",
    age: 30,
    
    // Method: دالة داخل الكائن
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    
    greet() {
        console.log(`أهلاً ${this.fullName()}! عمرك ${this.age}`);
    },
    
    // Method مع معاملات
    isAdult(minAge = 18) {
        return this.age >= minAge;
    }
};

user.fullName();     // "محمد علي"
user.greet();       // "أهلاً محمد علي! عمرك 30"
user.isAdult();     // true
user.isAdult(21);   // true
            

❌ فخ this:

في Arrow Functions، this لا يشير للكائن! استخدم function عادية للـ Methods داخل الكائنات.

🔧 دوال Object الثابتة

JavaScript توفر دوالاً مفيدة للتعامل مع الكائنات:

let car = { 
    brand: "Toyota", 
    model: "Camry", 
    year: 2023,
    color: "أبيض"
};

// Object.keys — جميع المفاتيح
Object.keys(car);      // ["brand", "model", "year", "color"]

// Object.values — جميع القيم
Object.values(car);    // ["Toyota", "Camry", 2023, "أبيض"]

// Object.entries — أزواج [مفتاح, قيمة]
Object.entries(car);  // [["brand", "Toyota"], ["model", "Camry"], ...]

// Object.assign — نسخ/دمج كائنات
let defaults = { color: "أسود", fuel: "بنزين" };
let merged = Object.assign({}, car, defaults);
// { brand: "Toyota", model: "Camry", year: 2023, color: "أسود", fuel: "بنزين" }
            

⚖️ متى تستخدم Array ومتى تستخدم Object؟

الحالة	استخدم	السبب
قائمة مرتبة من العناصر المتشابهة	Array	فهرس رقمي، ترتيب مهم
بيانات متنوعة لوصف شيء واحد	Object	مفاتيح وصفية، سهولة الوصول
قائمة مستخدمين	Array of Objects	[{name, age}, {name, age}]
إعدادات التطبيق	Object	settings.theme, settings.lang

💼 أمثلة واقعية من التطبيقات

1. عرض منتجات في متجر إلكتروني

let products = [
    { id: 1, name: "هاتف", price: 5000, category: "إلكترونيات" },
    { id: 2, name: "لابتوب", price: 15000, category: "إلكترونيات" },
    { id: 3, name: "قميص", price: 300, category: "ملابس" }
];

// تصفية الإلكترونيات فقط
let electronics = products.filter(p => p.category === "إلكترونيات");

// عرض الأسماء فقط
let names = products.map(p => p.name);

// حساب إجمالي الأسعار
let total = products.reduce((sum, p) => sum + p.price, 0);
            

2. إدارة سلة المشتريات

let cart = [
    { product: "هاتف", price: 5000, quantity: 1 },
    { product: "سماعات", price: 500, quantity: 2 },
    { product: "شاحن", price: 150, quantity: 1 }
];

// حساب الإجمالي لكل منتج
let itemTotals = cart.map(item => ({
    ...item,
    total: item.price * item.quantity
}));

// حساب إجمالي السلة
let cartTotal = itemTotals.reduce((sum, item) => sum + item.total, 0);
console.log(`إجمالي السلة: ${cartTotal} ج.م`);  // 6150
            

🚀 الخطوة التالية: DOM Manipulation

في الدرس السابع، ستتعلم كيف تتحكم في صفحة HTML باستخدام JavaScript:

🌲 الوصول للعناصر: getElementById, querySelector
✏️ تعديل المحتوى: innerHTML, textContent
🎨 تغيير الأنماط: style, classList
👂 التعامل مع الأحداث: addEventListener

📚 مصادر إضافية:

📚 المصفوفات (Arrays) والكائنات (Objects) في JavaScript

📋 محتويات الدرس