Sử dụng Generator trong ES6

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về Generator của ES6. Lần lượt giới thiệu và và đi qua các ví dụ về Generator được sử dụng trong ES6.

1. Giới thiệu về Generator

Các dòng code trong phương thức javascript được thực thi từ trên xuống dưới và nó không thể dừng lại giữ chừng. Anh lấy ví dụ về phương thức foo() như sau

1
2
3
4
5
function foo() {
    console.log('I');
    console.log('cannot');
    console.log('pause');
}

Khi chương trình chạy anh sẽ nhận được kết quả là I cannot pause.

ES6 cung cấp một loại phương thức kiểu mới giúp chúng ta có thể dừng lại (pause) bất kỳ đâu trong phương thức. Nó được gọi là generator, anh có ví dụ về generator như sau

1
2
3
4
5
6
function* generate() {
    console.log('invoked 1st time');
    yield 1;
    console.log('invoked 2nd time');
    yield 2;
}

Đầu tiên để khai báo 1 phương thức là generator anh sẽ sử dụng đấu * ở phía sau chữ function sau đó là tên phương thức function* generate. Sau khi in ra console.log đầu tiên thì anh sử dụng 1 từ khoá thứ 2 đó là yield cái này sẽ trả về giá trị tại điểm đang dừng.

Như vậy khi tạo một phương thức generator chúng ta cần 2 từ khoá đó là * và yield. Chúng ta gọi phương thức generator như sau.

1
let gen = generate();

Chúng ta sẽ console.log biến gen xem nó là gì ?

1
console.log(gen);

Kết quả ta nhận được sẽ là Object [Generator] {} . Như vậy biến gen của ta làm một đối tượng Generator. Để lấy giá trị dừng đầu tiên ta sử dụng phương thức next().

1
2
3
4
5
6
7
let result = gen.next();
console.log(result);

Kết quả là 

invoked 1st time
{ value: 1, done: false }

Như vậy ta lấy được kết quả mà phương thức generate() dừng tại vị trí đầu tiên. Nếu muốn lấy tiếp giá trị dừng tiếp theo chúng ta sử dụng tiếp phương thức next().

1
2
3
4
5
6
7
result = gen.next();
console.log(result);

Kết quả là 

invoked 2nd time
{ value: 2, done: false }

Nếu chúng ta next thêm 1 lần nữa thì sẽ nhận được kết quả undefined vì phương thức generate() chỉ dừng lại có 2 lần (yield)

1
2
3
4
5
6
result = gen.next();
console.log(result);

Kết quả là 

{ value: undefined, done: true }

2. Duyệt qua Generator

Generator là một đối tượng iterable nên chúng ta có thể duyệt qua nó bằng vòng lặp for of như sau.

1
2
3
4
5
6
7
8
9
10
for (const g of gen) {
    console.log(g);
}

kết quả là

invoked 1st time
1
invoked 2nd time
2

3. Demo Video

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments