Cách sử dụng đối tượng Iterables trong JavaScript

Khi làm việc với Generators

• Generator là một dạng Iterable giúp tạo dữ liệu từng phần thay vì tải toàn bộ vào bộ nhớ.

Cách hoạt động của Iterables trong JavaScript

Giải thích về giao thức Iterable (Iterable Protocol)

Trong JavaScript, giao thức Iterable (Iterable Protocol) là một quy tắc cho phép một đối tượng được lặp qua từng phần tử của nó một cách tuần tự. Một đối tượng được coi là Iterable nếu nó có phương thức Symbol.iterator.

Giao thức Iterable hoạt động như sau:

• Một đối tượng có thể được duyệt qua bằng vòng lặp for...of, spread operator (...), Array.from(), v.v.
• Khi vòng lặp hoặc phương thức yêu cầu một Iterable, nó sẽ tìm phương thức Symbol.iterator() trên đối tượng đó.
• Phương thức Symbol.iterator() phải trả về một Iterator (một đối tượng có phương thức next() để lấy phần tử tiếp theo).
• Mỗi lần gọi next(), Iterator trả về một object có hai thuộc tính:
  • value: Giá trị của phần tử hiện tại.
  • done: true nếu đã duyệt hết phần tử, false nếu vẫn còn phần tử tiếp theo.

Ví dụ một Iterator thủ công:

const customIterable = {
    data: [1, 2, 3],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.data.length) {
                    return { value: this.data[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

const iterator = customIterable[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { done: true }

Giải thích:

• Đối tượng customIterable có phương thức Symbol.iterator(), trả về một Iterator.
• Mỗi lần gọi next(), nó trả về một giá trị và trạng thái done.
• Khi hết dữ liệu, done chuyển thành true, báo hiệu kết thúc vòng lặp.

Phương thức Symbol.iterator và cách hoạt động

Symbol.iterator là một thuộc tính đặc biệt trong JavaScript, dùng để định nghĩa cách một đối tượng sẽ được lặp qua.
Khi một đối tượng có Symbol.iterator, nó sẽ trở thành một Iterable, có thể sử dụng với for...of, Array.from(), và các kỹ thuật lặp khác.

Ví dụ với mảng (Array), vốn có sẵn Symbol.iterator:

const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { done: true }

JavaScript tự động sử dụng Symbol.iterator() khi ta dùng các cơ chế duyệt dữ liệu.

Cách JavaScript sử dụng Iterables trong vòng lặp for...of và các phương thức khác

Vòng lặp for...of

Vòng lặp for...of tự động gọi Symbol.iterator() và duyệt qua từng phần tử của Iterable.

Ví dụ với một Set:

const mySet = new Set(["apple", "banana", "cherry"]);

for (let fruit of mySet) {
    console.log(fruit);
}

Output:

apple
banana
cherry

Lưu ý:

• for...of chỉ hoạt động với các Iterable (Array, String, Set, Map, v.v.).
• Không thể dùng for...of với một Object thông thường (trừ khi có Symbol.iterator).

spread operator (...)

Toán tử ... có thể mở rộng một Iterable thành các phần tử riêng lẻ.
Ví dụ với Set:

const mySet = new Set([1, 2, 3]);
const arr = [...mySet];  
console.log(arr); // [1, 2, 3]

const nodeList = document.querySelectorAll("p");
const elementsArray = Array.from(nodeList);
console.log(elementsArray); // Chuyển thành mảng để dùng các phương thức như map(), filter()

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then(console.log); // [1, 2, 3]

const fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
    console.log(fruit);
}

apple
banana
cherry

fruits.forEach((fruit, index) => {
    console.log(index, fruit);
});

0 apple
1 banana
2 cherry

const word = "Hello";

for (let char of word) {
    console.log(char);
}

H
e
l
l
o

console.log([...word]); // ["H", "e", "l", "l", "o"]

const mySet = new Set(["apple", "banana", "apple", "cherry"]);

for (let fruit of mySet) {
    console.log(fruit);
}

apple
banana
cherry

console.log([...mySet]); // ["apple", "banana", "cherry"]

const myMap = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["city", "New York"]
]);

for (let [key, value] of myMap) {
    console.log(`${key}: ${value}`);
}

name: Alice
age: 25
city: New York

for (let key of myMap.keys()) {
    console.log(key);
}
for (let value of myMap.values()) {
    console.log(value);
}

const typedArray = new Uint8Array([10, 20, 30]);

for (let num of typedArray) {
    console.log(num);
}

10
20
30

function sum() {
    let total = 0;
    for (let num of arguments) {
        total += num;
    }
    return total;
}

console.log(sum(1, 2, 3, 4)); // 10

function sum(...args) {
    return args.reduce((total, num) => total + num, 0);
}

obj[Symbol.iterator] = function() {
    return {
        next() {
            // Trả về { value, done }
        }
    };
};

const range = {
    from: 1,
    to: 5,
    
    [Symbol.iterator]() {
        let current = this.from;
        let last = this.to;

        return {
            next() {
                if (current <= last) {
                    return { value: current++, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

// Sử dụng vòng lặp for...of để lặp qua Iterable
for (let num of range) {
    console.log(num);
}

1
2
3
4
5

const fibonacci = {
    [Symbol.iterator]() {
        let a = 0, b = 1;
        return {
            next() {
                let temp = a;
                a = b;
                b = temp + b;
                return { value: temp, done: false };
            }
        };
    }
};

// Giới hạn chỉ lấy 10 số đầu tiên
let count = 0;
for (let num of fibonacci) {
    if (count++ >= 10) break;
    console.log(num);
}

0
1
1
2
3
5
8
13
21
34

const orders = {
    data: ["Order #1", "Order #2", "Order #3"],
    
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => index < this.data.length 
                ? { value: this.data[index++], done: false } 
                : { done: true }
        };
    }
};

for (let order of orders) {
    console.log(order);
}

Order #1
Order #2
Order #3

const paginatedAPI = {
    currentPage: 1,
    totalPages: 3,

    [Symbol.iterator]() {
        return {
            next: () => {
                if (this.currentPage > this.totalPages) {
                    return { done: true };
                } else {
                    return { value: `Fetching page ${this.currentPage++}`, done: false };
                }
            }
        };
    }
};

// Lấy dữ liệu từng trang từ API giả định
for (let page of paginatedAPI) {
    console.log(page);
}

Fetching page 1
Fetching page 2
Fetching page 3

const numbers = Array.from(range);
console.log(numbers); // [1, 2, 3, 4, 5]

console.log([...range]); // [1, 2, 3, 4, 5]

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5, 6];

console.log(moreNumbers); // [1, 2, 3, 4, 5, 6]

const str = "hello";
const letters = [...str];

console.log(letters); // ['h', 'e', 'l', 'l', 'o']

const set = new Set([1, 2, 3, 3, 4]);
const arrayFromSet = [...set];

console.log(arrayFromSet); // [1, 2, 3, 4]

const numbers = [10, 20, 30, 40];
const [first, second, ...rest] = numbers;

console.log(first);  // 10
console.log(second); // 20
console.log(rest);   // [30, 40]

const [first, second, ...remaining] = "JavaScript";

console.log(first);     // 'J'
console.log(second);    // 'a'
console.log(remaining); // ['v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

const numbers = [10, 20, 30];

for (let num of numbers) {
    console.log(num);
}

10
20
30

const str = "Code";

for (let char of str) {
    console.log(char);
}

C
o
d
e

const set = new Set(["apple", "banana", "orange"]);
const arrayFromSet = Array.from(set);

console.log(arrayFromSet); // ["apple", "banana", "orange"]

const userMap = new Map([
    ["name", "John"],
    ["age", 25],
    ["city", "New York"]
]);

for (let [key, value] of userMap) {
    console.log(`${key}: ${value}`);
}

name: John
age: 25
city: New York

const uniqueNumbers = new Set([1, 2, 3, 3, 4]);

for (let num of uniqueNumbers) {
    console.log(num);
}

1
2
3
4