Angular Academy · درس

عوامل التصفية

صفّوا التدفقات باستخدام filter وdebounceTime وdistinctUntilChanged

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

وظيفة معاملات التصفية

تحدد معاملات التصفية القيم المنبعثة التي تمر، والقيم التي يتم إسقاطها، أو عدد المرات المسموح فيها بانبعاث القيم. وهي أساسية للحفاظ على تدفقات نظيفة وفعّالة.

filter

يبعث filter القيم التي تجتاز دالة الاختبار فقط — مثل Array.filter مع مرور الوقت.

import { of, filter } from 'rxjs';

of(1, 2, 3, 4).pipe(
  filter(n => n % 2 === 0)
).subscribe(v => console.log(v)); // 2, 4

debounceTime

ينتظر debounceTime فترة توقف في الانبعاثات، ثم يبعث أحدث قيمة. وهو الحل التقليدي لأحداث الإدخال كثيرة الضوضاء.

import { debounceTime } from 'rxjs';

searchInput$.pipe(
  debounceTime(300)
).subscribe(term => console.log('search', term));
// emits only after 300ms of silence

distinctUntilChanged

يسقط distinctUntilChanged القيمة إذا كانت مساوية للقيمة السابقة، لتجنب العمل المتكرر.

import { of, distinctUntilChanged } from 'rxjs';

of('a', 'a', 'b', 'b', 'a').pipe(
  distinctUntilChanged()
).subscribe(v => console.log(v)); // a, b, a

دمج المعاملات للبحث

يجمع مسار البحث التقليدي المعاملات الثلاثة لتقليل الطلبات إلى الحد الأدنى.

searchInput$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter(term => term.length > 2),
  switchMap(term => this.http.get('/api?q=' + term))
).subscribe(results => console.log(results));

take

يبعث take(n) أول n من القيم، ثم يُنهي التدفق — وهو مفيد لقراءة واحدة من مصدر مستمر.

import { interval, take } from 'rxjs';

interval(1000).pipe(
  take(3)
).subscribe(v => console.log(v)); // 0, 1, 2 then complete

first و last

يبعث first() القيمة الأولى، مع إمكانية مطابقتها لدالة اختبار، ثم يُنهي التدفق؛ أما last() فيبعث القيمة الأخيرة عند اكتمال التدفق.

import { of, first, last } from 'rxjs';

of(1, 2, 3).pipe(first()).subscribe(v => console.log(v)); // 1
of(1, 2, 3).pipe(last()).subscribe(v => console.log(v));  // 3

takeWhile و skip

يبعث takeWhile القيم ما دام الشرط متحققًا، ثم يُنهي التدفق؛ ويتجاهل skip(n) أول n من القيم.

import { of, takeWhile, skip } from 'rxjs';

of(1, 2, 3, 4, 1).pipe(takeWhile(n => n < 3))
  .subscribe(v => console.log(v)); // 1, 2
of(1, 2, 3).pipe(skip(1)).subscribe(v => console.log(v)); // 2, 3

throttleTime مقابل debounceTime

يبعث throttleTime القيمة الأولى، ثم يتجاهل القيم الأخرى خلال فترة زمنية محددة — وهو مناسب لتحديد معدل أحداث التمرير. أما debounceTime فينتظر فترة من الصمت — وهو مناسب للبحث. وهما ليسا متطابقين.

distinctUntilChanged مع مفتاح

بالنسبة إلى الكائنات، مرروا دالة مقارنة أو محدد مفتاح، بحيث تستند المساواة إلى الحقل ذي الصلة.

source$.pipe(
  distinctUntilChanged((a, b) => a.id === b.id)
).subscribe(v => console.log(v));

أهمية التصفية

تقلل التصفية طلبات HTTP وإعادة العرض والحسابات غير الضرورية. ويمكن لتدفق تمت تصفيته جيدًا أن يقلل طلبات ميزة البحث من عشرات الطلبات إلى بضعة طلبات فقط.

تحقق سريع

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

مراجعة: معاملات التصفية

تتحكم معاملات التصفية في القيم التي تتدفق وعدد مرات تدفقها.

filter: تمرير يعتمد على دالة اختبار.
debounceTime: الانتظار حتى الصمت.
distinctUntilChanged: إسقاط القيم المتكررة.
take/first/skip: التحكم الموضعي.

التالي: معاملات الدمج.

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

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

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

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

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

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

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

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

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

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

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

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

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