Asosiy operatorlar

Daraja:

Operatorlar Observable oqimini o'zgartiradi — map qilish, filtrlash, cheklash va vaqt boshqaruvi. Angular'da search input, pagination va HTTP zanjirlarida kundalik ishlatiladi.

map, filter, tap, take, first, last

Junior

Nima bu?

map — har qiymatni transform qiladi (Array.map ga o'xshash). filter — shartga mos qiymatlarni o'tkazadi. tap — side effect (log, debug) qo'shadi, oqimni o'zgartirmaydi. take(n) — birinchi n ta qiymat, keyin complete. first — birinchi qiymat (yoki default). last — oxirgi qiymat (stream complete bo'lishi kerak).

Kod misoli

import { of } from 'rxjs';
import { map, filter, tap, take, first, last } from 'rxjs/operators';

interface User {
  id: number;
  name: string;
  active: boolean;
}

const users$ = of<User>(
  { id: 1, name: 'Ali', active: true },
  { id: 2, name: 'Vali', active: false },
  { id: 3, name: 'Guli', active: true }
);

users$
  .pipe(
    tap((list) => console.log('Raw:', list)),
    filter((u) => u.active),
    map((u) => u.name.toUpperCase()),
    take(2)
  )
  .subscribe(console.log); // ALI

// HttpClient bilan
this.http.get<Product[]>('/api/products').pipe(
  map((products) => products.filter((p) => p.inStock)),
  map((products) => products.map((p) => ({ ...p, priceWithTax: p.price * 1.12 })))
);

// first — bitta element (HttpClient odatda shu)
this.http.get<User>('/api/me').pipe(first()).subscribe();

Imtihonda

  • map va tap farqi nima?
  • take(1) va first() qachon bir xil natija beradi?

Yodlash uchun

map = transform; filter = tanlash; tap = kuzatish; take/first/last = miqdor cheklash.

debounceTime, distinctUntilChanged

JuniorMiddle

Nima bu?

debounceTime(ms) — faqat N ms davomida yangi qiymat kelmasa oxirgisini o'tkazadi. Search input uchun ideal — har harf bosilganda emas, yozish to'xtaganda so'rov. distinctUntilChanged — ketma-ket takrorlanuvchi qiymatlarni o'tkazmaydi. Birgalikda API chaqiruvlarini sezilarli kamaytiradi.

Kod misoli

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, switchMap, filter } from 'rxjs/operators';

@Component({
  template: `
    <input [formControl]="searchCtrl" placeholder="Qidirish..." />
    @if (results$ | async; as results) {
      @for (item of results; track item.id) {
        <li>{{ item.name }}</li>
      }
    }
  `,
})
export class SearchComponent {
  searchCtrl = new FormControl('', { nonNullable: true });

  results$ = this.searchCtrl.valueChanges.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    filter((term) => term.length >= 2),
    switchMap((term) => this.api.search(term))
  );

  constructor(private api: SearchApiService) {}
}

Imtihonda

  • Search input uchun nima uchun debounceTime kerak?
  • distinctUntilChanged va distinctUntilChanged((a, b) => a.id === b.id) farqi?

Yodlash uchun

debounce = to'xtagandan keyin; distinct = takror emas. Search = debounce + distinct + switchMap.

FormControl `valueChanges` darhol emit qiladi — debounceTime'siz har keystroke'da HTTP ketadi.

delay, throttleTime

Middle

Nima bu?

delay(ms) — har qiymatni N ms kechiktiradi (animatsiya, retry kutish). throttleTime(ms) — vaqt oralig'ida faqat birinchi qiymatni o'tkazadi (scroll, resize, mousemove). debounce — oxirgisini kutadi; throttle — birinchi va interval cheklaydi. Scroll infinite load uchun throttle, search uchun debounce.

Gotcha: throttleTime(ms) standart holatda faqat leading edge'ni chiqaradi — interval oxiridagi so'nggi qiymat yo'qoladi (masalan, scroll to'xtagan joydagi aniq pozitsiya o'tkazib yuboriladi). Oxirgi qiymatni ham olish uchun throttleTime(ms, asyncScheduler, { leading: true, trailing: true }) kerak — bu interview'da tez-tez tushib qoladigan tafsilot.

Kod misoli

import { fromEvent } from 'rxjs';
import { throttleTime, delay, map } from 'rxjs/operators';

// Scroll — throttle (har 200ms da bir marta)
fromEvent(window, 'scroll')
  .pipe(
    throttleTime(200),
    map(() => window.scrollY)
  )
  .subscribe((y) => this.checkLoadMore(y));

// Animatsiya — delay
this.showNotification$
  .pipe(delay(500))
  .subscribe((msg) => this.toast.show(msg));

// Retry pattern
this.http.get('/api/data').pipe(
  retry({ count: 3, delay: 1000 }) // har urinish orasida 1s
);

Imtihonda

  • debounceTime va throttleTime qachon ishlatiladi?
  • Scroll event uchun qaysi biri mos?

Yodlash uchun

debounce = oxirgi (search). throttle = birinchi + interval (scroll, click spam).