Angular Academy · درس

عوامل التحويل

استخدموا map وswitchMap وmergeMap وconcatMap

عوامل التحويل درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

ما هي operators

Operators هي دوال تركّبها داخل .pipe() لتحويل تدفق. تغيّر operators التحويلية كل قيمة صادرة أو تفرد observables الداخلية في الناتج.

map

تحوّل map كل قيمة صادرة، مثل Array.map ولكن عبر الزمن.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

لماذا نستخدم higher-order mapping

عندما تؤدي كل قيمة إلى تشغيل observable آخر، مثل استدعاء HTTP، تحصل على observable من observables. وتشترك operators التسطيح (switchMap وmergeMap وconcatMap) في الداخلي وتُصدر قيمه.

switchMap

تلغي switchMap الـ observable الداخلي السابق عند وصول قيمة جديدة. وهي مثالية للبحث أثناء الكتابة، إذ يتم تجاهل الطلبات القديمة.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

تشغّل mergeMap (الاسم البديل flatMap) الـ observables الداخلية بالتوازي وتدمج جميع إصداراتها. ولا يُلغى أي منها.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

تضع concatMap الـ observables الداخلية في قائمة انتظار وتشغّلها واحدًا تلو الآخر بالترتيب، منتظرةً اكتمال كل منها. استخدمها عندما يكون الترتيب مهمًا.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

تتجاهل exhaustMap القيم الجديدة ما دام observable داخلي قيد التشغيل. وهي مفيدة جدًا لمنع الإرسال المزدوج عند النقر على زر.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

اختيار أداة التسطيح المناسبة

switchMap: إلغاء السابق (البحث).
mergeMap: تنفيذ الكل بالتوازي (عمليات الكتابة المستقلة).
concatMap: بالترتيب، واحدًا تلو الآخر (عمليات الحفظ المتسلسلة).
exhaustMap: التجاهل أثناء الانشغال (زر تسجيل الدخول).

‏switchMap والإلغاء

لأن switchMap تلغي الـ observables الداخلية الجارية، فإنها تلغي الاشتراك في طلب HTTP الأساسي أيضًا، وهو ما يترجمه Angular إلى إيقاف الطلب — مما يوفر النطاق الترددي.

دمج map مع أداة تسطيح

غالبًا ما تستخدم map لاستخراج البيانات بعد التسطيح.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

تجنب الاشتراكات المتداخلة

لا تشترك داخل اشتراك آخر. استخدم operator للتسطيح بدلًا من ذلك؛ فهو يحافظ على تصريحية خط الأنابيب ويتولى التنظيف بطريقة صحيحة.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

تحقق سريع

اختبروا مدى فهمكم لمعاملات التحويل.

مراجعة: معاملات التحويل

تُحوّل map القيم؛ بينما تتعامل معاملات التسطيح مع الـ observables الداخلية.

switchMap: إلغاء العملية السابقة.
mergeMap: تنفيذ متوازٍ.
concatMap: تنفيذ تسلسلي مرتب.
exhaustMap: التجاهل أثناء انشغال العملية.

التالي: معاملات التصفية.

الأسئلة الشائعة

هل درس «عوامل التحويل» مجاني؟

نعم — نص درس «عوامل التحويل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «عوامل التحويل»؟

استخدموا map وswitchMap وmergeMap وconcatMap تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «عوامل التحويل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy