54. العوامل المشتركة (Operators): map و filter

العوامل هي دوال نقية تأخذ Observable كمدخل وتُرجع Observable جديداً. يتم ربطها باستخدام طريقة pipe().

1. دالة pipe()

تُستخدم pipe() لتسلسل عوامل متعددة، وتطبيق منطق التحويل أو التصفية واحداً تلو الآخر.

typescript import { of } from 'rxjs'; import { map, filter } from 'rxjs/operators';

of(1, 2, 3, 4, 5).pipe( // operator 1 // operator 2 // ... ).subscribe(...);

2. عامل map (التحويل)

map مكافئ لأسلوب مصفوفة JavaScript map. يطبق دالة على كل قيمة يطلقها Observable المصدر ويطلق النتيجة.

مثال: مضاعفة الأرقام

typescript of(1, 2, 3).pipe( map(value => value * 2) // يحول 1 -> 2, 2 -> 4, 3 -> 6 ).subscribe(result => console.log('Mapped:', result)); // الإخراج: 2، 4، 6

// الاستخدام العملي: تحويل هيكل استجابة API: this.http.get<User[]>(...).pipe( map(users => users.map(user => user.name)) // استخراج الأسماء فقط );

3. عامل filter (الاختيار)

يحدد filter القيم التي تمر عبر تدفق Observable بناءً على دالة شرطية (predicate function) (دالة تُرجع قيمة منطقية).

مثال: تصفية الأرقام الزوجية

typescript of(1, 2, 3, 4, 5).pipe( filter(value => value % 2 === 0) // يحتفظ بـ 2 و 4 فقط ).subscribe(result => console.log('Filtered:', result)); // الإخراج: 2، 4

// مثال مدمج: const clicks$ = fromEvent(document, 'click'); clicks$.pipe( filter((event: MouseEvent) => event.clientY > 100), // النقرات أسفل علامة 100 بكسل فقط map(event => event.clientX) ).subscribe(x => console.log('X position:', x));