جاري التحميل...
جاري التحميل...
إنشاء وإدارة المصفوفات والكائنات، Destructuring، Spread/Rest، Template Literals
في البرمجة، نحتاج دائمًا إلى تخزين مجموعات البيانات. تخيل أنك تريد تخزين أسماء 10 طلاب - هل ستنشئ 10 متغيرات منفصلة؟ هذا غير عملي!
هنا تأتي المصفوفات والكائنات كحلول أساسية لتنظيم البيانات في جافاسكريبت.
💡 المصفوفة::
قائمة مرتبة من العناصر، مثل قائمة التسوق: ['تفاح'، 'موز'، 'حليب']. كل عنصر له فهرس يبدأ من 0.
💡 الكائن::
مجموعة من القيم المسماة، مثل بطاقة هوية: لها اسم وعمر وتخصص. كل قيمة لها مفتاح وقيمة.
سنتعلم أيضًا أدوات ES6+ الحديثة مثل التفكيك وSpread/Rest وقوالب النصوص التي تجعل العمل بالبيانات أسهل بكثير.
تخيل بناء تطبيق تجارة إلكترونية وحاجتك لتخزين المنتجات. بدون المصفوفات والكائنات، ستحتاج متغيرًا لكل خاصية لكل منتج!
المصفوفات والكائنات يحلان هذه المشكلة من خلال تمكينك من تنظيم البيانات في هياكل منطقية سهلة القراءة والتعديل.
أولًا: المصفوفات - قائمة مرتبة من العناصر محاطة بأقواس مربعة []. كل عنصر له فهرس يبدأ من 0.
ثانيًا: الكائنات - مجموعة من القيم المسماة محاطة بأقواس معقوفة {}. كل قيمة لها مفتاح وقيمة مفصولة بنقطتين.
💡 تشبيه بسيط::
المصفوفة مثل طابور: كل شخص له رقم تسلسلي. الكائن مثل بطاقة هوية: كل معلومة لها اسم واضح.
الفرق الرئيسي - المصفوفات تُ-access بالفهرس العددي، الكائنات بالمفتاح النصي. المصفوفات مرتبة، الكائنات غير مرتبة.
عمليات المصفوفات الأساسية: push و unshift و pop و shift و indexOf و includes
Splice و Slice: splice يعدّل المصفوفة الأصلية، slice يُرجع مصفوفة جديدة دون تعديل الأصلية.
عمليات الكائن الأساسية: إضافة خاصية، تعديل قيمة، حذف خاصية، التحقق من وجود الخاصية، الكائنات المتداخلة.
دعنا نبني مثالًا عمليًا يجمع بين المصفوفات والكائنات في تطبيق قائمة مهام بسيط:
💡 ماذا تعلمنا؟:
كيف نستخدم كائنًا لتمثيل مهمة واحدة، ومصفوفة لتخزين قائمة المهام، ودوال مع المصفوفات والكائنات، وforEach للتكرار، وfind وfilter للبحث والتصفية.
كيف تعمل المصفوفات في الذاكرة: يُخصّص المتصفح الذاكرة، ويخزن الفهرسات، وفي الكائنات، تخزن المفاتيح مراجع للقيم في الذاكرة.
العمل الداخلي لـ push و pop: push يضيف عنصرًا في النهاية، pop يُزيل آخر عنصر ويرجعه، splice أكثر تعقيدًا - يعدّل من أي موضع.
💡 هل تعلم؟:
المصفوفات في جافاسكريبت ليست مصفوفات ثنائية مثل في C. إنها كائنات خاصة بخصائص مثل length وطرق مثل push و pop.
حلقة for الكلاسيكية: الطريقة التقليدية مع تحكم كامل.
for...of: تكرار على القيم مباشرة (أسهل وأوضح).
طريقة forEach: تأخذ دالة callback تُنفذ لكل عنصر.
تكرار الكائنات: for...in - تكرار على المفاتيح.
💡 أيهم نستخدم؟:
استخدم for...of لتكرار القيم فقط. استخدم forEach عندما تحتاج أيضًا الفهرس. استخدم for العادية عندما تحتاج تحكمًا كاملًا (مثل التخطي أو العكس).
التفكيك من أهم ميزات ES6. يسمح لك باستخراج قيم من المصفوفات أو الكائنات وتخزينها في متغيرات في سطر واحد.
1) تفكيك المصفوفة - استخراج القيم حسب الموضع، تخطي العناصر، استخدام القيم الافتراضية.
2) تفكيك الكائن - استخراج القيم حسب اسم المفتاح، إعادة تسمية المتغيرات، استخدام القيم الافتراضية.
3) التفكيك المتداخل - تفكيك الكائنات والمصفوفات المتداخلة بعمق.
Spread (...) يوسّع مصفوفة أو كائنًا إلى عناصر منفصلة. يُستخدم للنسخ والدمج وإضافة العناصر.
معاملات Rest (...) تجمع العناصر المتبقية في مصفوفة واحدة. عكس Spread - تجمع بدلاً من التوسيع.
💡 الفرق الرئيسي::
Spread (...) على يمين التعيين (=) يوسع العناصر. Rest (...) على يسار التعيين (=) يجمع العناصر.
قوالب النصوص طريقة حديثة لكتابة النصوص في جافاسكريبت باستخدام علامات ال backtick بدلاً منعلامات الاقتباس.
1) استيفاء التعبيرات - تضمين المتغيرات والتعبيرات في النصوص.
2) النصوص متعددة الأسطر - كتابة النصوص عبر عدة أسطر بشكل طبيعي.
3) القوالب الموسومة - معالجة متقدمة للقوالب.
ما هي نتيجة الكود التالي؟
ما هو الفرق بين splice و slice؟
ما هو الفرق الأساسي بين Spread و Rest؟
أنشئ نظام إدارة طلاب بسيطًا باستخدام المصفوفات والكائنات: 1. أنشئ مصفوفة تحتوي على 3 كائنات طلاب، 2. استخدم التفكيك لاستخراج اسم وتقييم أول طالب، 3. استخدم Spread لإنشاء نسخة وإضافة طالب جديد، 4. استخدم قوالب النصوص لطباعة معلومات كل طالب.
الحل:
const students = [
{ name: "أحمد", grade: 92, subject: "رياضيات" },
{ name: "فاطمة", grade: 88, subject: "علوم" },
{ name: "محمد", grade: 76, subject: "تاريخ" },
{ name: "نورة", grade: 95, subject: "رياضيات" },
{ name: "خالد", grade: 82, subject: "علوم" }
];
const excellent = students.filter(s => s.grade >= 90);
console.log("الطلاب الممتازون:", excellent);
const names = students.map(s => s.name);
console.log("أسماء الطلاب:", names);
const total = students.reduce((sum, s) => sum + s.grade, 0);
const average = total / students.length;
console.log("المعدل:", average.toFixed(2));
const mathStudents = students.filter(s => s.subject === "رياضيات");
console.log("طلاب الرياضيات:", mathStudents);
function addStudent(name, grade, subject) {
const exists = students.some(s => s.name === name);
if (!exists) {
students.push({ name, grade, subject });
console.log(`تمت إضافة ${name}`);
} else {
console.log(`${name} موجود مسبقاً`);
}
return students;
}
addStudent("سارة", 89, "علوم");
console.log("القائمة المحدثة:", students);أنشئ نظامًا يدير سجلات الطلاب:
💡 استخدم filter و map و reduce و عمليات Spread معًا.
طرق المصفوفة:
.filter() - تُرجع مصفوفة جديدة بالعناصر المطابقة.map() - تُرجع مصفوفة جديدة بتحويل كل عنصر.reduce() - تُحول المصفوفة إلى قيمة واحدة.find() - تُرجع أول عنصر مطابق.some() - تتحقق مما إذا كان عنصر واحد على الأقل يجتزء.every() - تتحقق مما إذا كان كل العناصر تجتزءعمليات الكائن:
Object.keys() - تُرجع مصفوفة بالمفاتيحObject.values() - تُرجع مصفوفة بالقيمObject.entries() - تُرجع أزواج المفتاح-القيمة{...obj} - تنسخ الخصائص