Iterables và Iterators

1.1 Các khái niệm cơ bản

Iterators và iterables trong JavaScript là những khái niệm cơ bản cho phép các đối tượng có thể được duyệt qua. Mấy cái này được dùng nhiều trong JavaScript hiện đại, đặc biệt trong các cấu trúc như vòng lặp for...of, spread operator, destructuring và nhiều thứ khác nữa. Trong bài giảng này, mình sẽ xem xét iterables và iterators, cách chúng hoạt động và cách tạo và dùng chúng.

Iterables (Đối tượng có thể lặp)

Đối tượng iterable là mấy cái đối tượng thực hiện giao thức lặp. Chúng cần có một phương thức đặc biệt với khóa [Symbol.iterator], nó sẽ trả về một đối tượng-iterator.

Iterators (Trình lặp)

Iterator là một đối tượng với phương thức next(), nó trả về một đối tượng với hai thuộc tính:

• value — giá trị của phần tử tiếp theo trong chuỗi
• done — giá trị boolean cho biết chuỗi đã kết thúc chưa (true) hay chưa (false)

Cùng xem mấy ví dụ dùng chúng nhé.

Đối tượng iterable tích hợp sẵn

JavaScript có vài đối tượng iterable tích hợp sẵn, bao gồm mảng, chuỗi, đối tượng Set và Map.

Ví dụ 1: Duyệt qua mảng

    
      const array = [1, 2, 3, 4, 5];

      for (const item of array) {
        console.log(item);
      }

      // Sẽ in ra: 1 2 3 4 5
    
  

Ví dụ 2: Duyệt qua chuỗi

    
      const string = 'hello';

      for (const char of string) {
        console.log(char);
      }

      // Sẽ in ra: h e l l o
    
  

1.2 Tạo iterators của riêng bạn

Bạn có thể tạo iterator của riêng bạn bằng cách thực hiện giao thức lặp — tạo phương thức next().

Ví dụ 1: Tạo một iterator

    
      function createIterator(array) {
        let index = 0;

        return {
          next: function() {
            if (index < array.length) {
              return { value: array[index++], done: false };
            } else {
              return { done: true };
            }
          }
        };
      }

      const myIterator = createIterator([1, 2, 3]);

      console.log(myIterator.next()); // { value: 1, done: false }
      console.log(myIterator.next()); // { value: 2, done: false }
      console.log(myIterator.next()); // { value: 3, done: false }
      console.log(myIterator.next()); // { done: true }
    
  

Tạo đối tượng iterable

Để một đối tượng trở thành iterable, nó phải thực hiện phương thức [Symbol.iterator]. Yep, cái tên nghe có vẻ phức tạp. Dưới đây là cách tạo nó.

Ví dụ 2: Tạo một đối tượng iterable

    
      const myIterable = {
        *[Symbol.iterator]() {
          yield 1;
          yield 2;
          yield 3;
        }
      };

      for (const value of myIterable) {
        console.log(value);
      }

      // Sẽ in ra: 1 2 3
    
  

1.3 Phương thức tích hợp sẵn

Hãy cùng xem các phương thức và toán tử tích hợp sẵn để làm việc với đối tượng iterable.

Ví dụ 1: Toán tử spread

Toán tử spread (...) được dùng để sao chép hoặc hợp nhất đối tượng iterable.

    
      const array = [1, 2, 3];
      const newArray = [...array, 4, 5, 6];

      console.log(newArray); // Sẽ in ra: [1, 2, 3, 4, 5, 6]
    
  

Ví dụ 2: Destructuring

Destructuring cho phép bạn lấy giá trị từ đối tượng iterable.

    
      const [first, second, third] = [1, 2, 3];

      console.log(first);  // Sẽ in ra: 1
      console.log(second); // Sẽ in ra: 2
      console.log(third);  // Sẽ in ra: 3
    
  

Ví dụ 3: Phương thức Array.from và Array.of

Phương thức Array.from() cho phép bạn tạo một mảng từ một đối tượng iterable.

    
      const set = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(set);

      console.log(array); // Sẽ in ra: [1, 2, 3, 4, 5]