جاري التحميل...
جاري التحميل...
map، filter، reduce، find، Object.keys/values/entries، Optional Chaining
طرق المصفوفات والكائنات الحديثة هي مجموعة من الطرق القوية في جافاسكريبت تجعل العمل بالمصفوفات والكائنات بطريقة إعلانية ونظيفة.
بدلاً من كتابة حلقات مكررة، تقدم هذه الطرق المتخصصة بدائل أنظف ل: تحويل البيانات، تصفية العناصر، جمع النتائج، إيجاد عناصر محددة، والبحث.
هذه الطرق تعمل على المصفوفات: map() و filter() و reduce() و find() و findIndex() و every() و some(). و على الكائنات: Object.keys() و Object.values() و Object.entries(). بالإضافة إلى إضافات حديثة مثل Optional Chaining (?.) و Nullish Coalescing (??).
تخيل أن لديك مصفوفة مستخدمين وتحتاج لتحويلها إلى مصفوفة أخرى من عناصر JSX لعرضها في React. بدون هذه الطرق، ستحتاج لكتابة كود حلقات مطول.
الطريقة القديمة: إنشاء مصفوفة فارغة، إضافة عناصر في حلقة، إدارة فهرس الحلقة. الكود يقول 'كيف' تفعل بدلاً من 'ماذا' تريد.
الطريقة الحديثة مع map(): مختصرة ونظيفة، وتقول ما تريد: 'حول كل مستخدم إلى عنصر li'.
فكر في هذه الطرق كآلات مصانع. كل آلة متخصصة في مهمة واحدة:
map() = آلة التحويل: تأخذ كل قطعة وتحولها إلى شيء جديد.filter() = آلة التصفية: تحتفظ فقط بالقطع التي تجتزء اختبارًا معينًا.reduce() = آلة الجمع: تجمع جميع القطع في نتيجة واحدة.find() = آلة البحث: تجد أول قطعة تطابق الاختبار.every() / some() = آلة التحقق: تسأل 'هل كل/أي قطعة تجتزء الاختبار؟'💡 مهم::
لا شيء من هذه الطرق يعدّل المصفوفة الأصلية. map() تنشئ مصفوفة جديدة، filter() تنشئ مصفوفة أقصر، و reduce() تنشئ قيمة واحدة. هذا يمنع الأخطاء ويجعل الكود أكثر تنبؤًا.
مثال سريع لكل طريقة رئيسية:
دعنا نرى مثالًا عمليًا يشبه ما سنستخدمه مع React في مشروع حقيقي:
دعنا نرى مثالًا تفصيليًا على reduce() يبني قيمة واحدة من عدة عناصر:
طرق الكائنات و Optional Chaining:
مثال عملي: تصفية وتحويل البيانات في مكون React.
مع كل استدعاء لطريقة، تنشئ جافاسكريبت مصفوفة جديدة (الأصلية تبقى دون تغيير). هذا هو السر وراء هذه الطرق.
map() تنشئ مصفوفة جديدة بنفس الطول. لكل عنصر، يتم استدعاء الدالة والنتيجة تصبح العنصر الجديد.
reduce() تكرر عبر كل عنصر وتبني قيمة واحدة تدريجيًا.
💡 تحذير مهم::
كل طريقة تنشئ مصفوفة جديدة. هذا يستهلك ذاكرة إضافية. لكن في الحالات العادية، هذه الممارسة أكثر أمانًا من استخدام الحلقات التي تعدّل المصفوفة الأصلية.
map() لتحويل كل عنصر وإرجاع مصفوفة جديدة.filter() لتصفية العناصر حسب شرط محدد.reduce() لجمع العناصر في قيمة واحدة أو تجميعها.find() لإيجاد أول عنصر يطابق شرطًا.every() للتأكد من مرور كل العناصر بشرط، و some() لعنصر واحد على الأقل.Object.keys() / Object.values() / Object.entries() لتحويل الكائنات إلى مصفوفات يمكن تكرارها.ما هو الفرق الجوهري بين map() و forEach()؟
ما هي القيمة النهائية لـ reduce() في هذا الكود؟ const arr = [2, 4, 6]; const result = arr.reduce((acc, val) => acc + val, 10);
طبّق جميع الطرق التي تعلمتها في هذا الدرس لإيجاد بيانات متجر إلكترونيات.
الحل:
// بيانات المنتجات
const products = [
{ id: 1, name: "لابتوب", price: 3500, category: "إلكترونيات", rating: 4.5 },
{ id: 2, name: "هاتف", price: 2000, category: "إلكترونيات", rating: 4.8 },
{ id: 3, name: "كتاب JS", price: 80, category: "كتب", rating: 4.2 },
{ id: 4, name: "سماعات", price: 300, category: "إلكترونيات", rating: 3.9 },
{ id: 5, name: "قلم", price: 15, category: "كتب", rating: 4.0 },
{ id: 6, name: "تابلت", price: 1500, category: "إلكترونيات", rating: 4.3 },
];
// المطلوب:
// 1. حساب متوسط سعر المنتجات من فئة "إلكترونيات" باستخدام reduce()
// 2. تجميع المنتجات حسب الفئة (Object key) باستخدام reduce()
// 3. إيجاد أول منتج تقييمه أكبر من 4.5 باستخدام find()
// 4. التحقق هل جميع المنتجات تقييمها أكبر من 3.0 باستخدام every()
// 5. تحويل المنتجات التي سعرها أقل من 500 لمصفوفة أسماء باستخدام filter() ثم map()map()
المدخل: مصفوفة | المخرج: مصفوفة جديدة (بنفس الطول) | تعدّل: لا
filter()
المدخل: مصفوفة | المخرج: مصفوفة جديدة (مجموعة فرعية) | تعدّل: لا
reduce()
المدخل: مصفوفة | المخرج: قيمة واحدة | تعدّل: لا
find()
المدخل: مصفوفة | المخرج: عنصر أو undefined | تعدّل: لا
every() / some()
المدخل: مصفوفة | المخرج: قيمة منطقية | تعدّل: لا
طرق الكائن
Object.keys() المفاتيح | Object.values() القيم | Object.entries() أزواج المفتاح-القيمة
العمليات
obj?.prop Optional Chaining | value ?? افتراضي Nullish Coalescing