Các trình trợ giúp Iterator đã trở thành Baseline mới có sẵn

Jeremy Wagner

Ngày phát hành: 1 tháng 5 năm 2025

Nếu viết JavaScript, bạn sẽ phải lặp lại nhiều lần. Bạn đang viết vòng lặp để xử lý mảng hoặc sử dụng các phương thức lập trình hàm như map, filter và các phương thức tương tự khác để xử lý mọi loại dữ liệu.

Tuy nhiên, một điểm khó khăn khi sử dụng các phương thức này là chúng chỉ có trên các mảng. Nếu muốn sử dụng các phương thức này trên một đối tượng có thể lặp lại, bạn phải chuyển đổi đối tượng đó thành một mảng, sau đó gọi phương thức bạn cần. Điều này có thể gây lãng phí hoặc không thể thực hiện được trong trường hợp dữ liệu có thể lặp lại đại diện cho tập dữ liệu vô hạn bằng cách sử dụng hàm tạo. Tuy nhiên, giờ đây, trình trợ giúp trình lặp đã trở thành Baseline New (Cơ sở mới), cuối cùng thì tính năng này cũng có trên các trình duyệt.

Trình trợ giúp trình lặp hoạt động như thế nào?

Các trình trợ giúp Iterator được hiển thị bằng cách xác định các phương thức mới trên prototype của đối tượng Iterator. Các phương thức này phù hợp với nhiều phương thức lập trình hàm mà bạn thường sử dụng, chẳng hạn như map, filter, reduce và các phương thức tương tự khác.

Ví dụ: bạn có thể sử dụng trình trợ giúp trình lặp trên phương thức filter để lọc các mục danh sách theo nội dung của thuộc tính innerText cho một tập hợp các nút DOM, sau đó bạn có thể sử dụng trong vòng lặp for:

const posts = document.querySelectorAll("ul#specific-list > li")
  .values()
  .filter(item => item.textContent.includes("kiwi"));

// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
  console.log(post.textContent);
}

Trong đoạn mã trước, phương thức trợ giúp trình lặp cho filter được dùng để lặp lại trên tất cả các phần tử <li> trong một phần tử <ul> cụ thể. Tiêu chí lọc là nội dung văn bản của mỗi phần tử phải chứa một chuỗi con của "kiwi".

Bạn cũng có thể sử dụng trình trợ giúp Iterator với các hàm trình tạo. Trong ví dụ này, một hàm trình tạo tính tích luỹ, nhưng sử dụng trình trợ giúp trình lặp để lọc ra các giá trị chia hết cho 8 và ghi lại 5 giá trị được lọc đầu tiên vào bảng điều khiển:

function* factorials (n) {
  let result = 1;

  for (let i = 1; i <= n; i++) {
    result *= i;

    yield result;
  }
}

const filteredFactorials = factorials(128).filter(x => x % 8 === 0);

console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);

Cụ thể, đoạn mã trước là ví dụ về một điều không thể thực hiện được với trình trợ giúp trình lặp, vì số lượng số giai thừa là vô hạn và không phải là điều bạn có thể chuyển đổi thành một mảng!

Tuỳ thuộc vào trường hợp của bạn, trình trợ giúp trình lặp có rất nhiều tiềm năng và chúng có sẵn cho từng phương thức lặp lại sau:

Có rất nhiều trường hợp sử dụng trình trợ giúp trình lặp và có thể giúp nhà phát triển cải thiện đáng kể về mặt công thái học. Giờ đây, khi chúng đã có sẵn trong Baseline mới, bạn sẽ ngày càng tự tin rằng có thể sử dụng các API này mà không lo ngại về vấn đề tương thích. Để biết thêm thông tin, hãy tham khảo các tài nguyên sau: