0Pricing
Angular Academy · บทเรียน

ตัวดำเนินการกรองข้อมูล

กรองสตรีมด้วย filter, debounceTime และ distinctUntilChanged

ตัวดำเนินการกรองข้อมูล เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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: ควบคุมตามตำแหน่ง

ถัดไป: ตัวดำเนินการรวมค่า

คำถามที่พบบ่อย

บทเรียน “ตัวดำเนินการกรองข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวดำเนินการกรองข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวดำเนินการกรองข้อมูล”

กรองสตรีมด้วย filter, debounceTime และ distinctUntilChanged คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวดำเนินการกรองข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตัวดำเนินการแปลงข้อมูล
  2. ตัวดำเนินการกรองข้อมูล
  3. ตัวดำเนินการรวมข้อมูล
  4. ตัวดำเนินการจัดการข้อผิดพลาด
← กลับไปที่ Angular Academy