Angular Academy · पाठ

फ़िल्टरिंग ऑपरेटर

filter, debounceTime और distinctUntilChanged से स्ट्रीम फ़िल्टर करें।

पाठ 2, कुल 4 में से13 चरण

फ़िल्टरिंग ऑपरेटर, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह 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: क्रम-आधारित नियंत्रण।

अगला विषय: संयोजन ऑपरेटर।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “फ़िल्टरिंग ऑपरेटर” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “फ़िल्टरिंग ऑपरेटर” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़िल्टरिंग ऑपरेटर” में मैं क्या सीखूँगा?

filter, debounceTime और distinctUntilChanged से स्ट्रीम फ़िल्टर करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“फ़िल्टरिंग ऑपरेटर” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ