- vừa được xem lúc

Khám phá sức mạnh của Generators trong JavaScript

0 0 2

Người đăng: Gung Typical

Theo Viblo Asia

Generators, một loại hàm đặc biệt trong JavaScript, cho phép bạn tạm dừng và tiếp tục thực thi mã theo ý muốn. Hãy cùng tìm hiểu cách Generators có thể tối ưu hóa code và mở ra những khả năng mới cho lập trình JavaScript của bạn.

Generators là gì?

Nói một cách đơn giản, Generators là những hàm có khả năng "tạm dừng" và "tiếp tục" quá trình thực thi. Không giống như các hàm thông thường chạy từ đầu đến cuối, Generators mang đến sự kiểm soát linh hoạt hơn cho lập trình viên nhờ cú pháp function* và từ khóa yield.

VD:

function* myFirstGenerator() { yield "Hello 🌟"; yield "Generators are awesome!"; yield "Goodbye 👋";
} // Let's use it!
const gen = myFirstGenerator(); console.log(gen.next()); // { value: 'Hello 🌟', done: false }
console.log(gen.next()); // { value: 'Generators are awesome!', done: false }
console.log(gen.next()); // { value: 'Goodbye 👋', done: false }
console.log(gen.next()); // { value: undefined, done: true }

Giải thích:

  • Từ khóa yield đóng vai trò như điểm tạm dừng trong hàm của bạn.
  • Mỗi lần gọi gen.next() sẽ di chuyển hàm tới hàm yield tiếp theo.
  • Khi không còn câu lệnh yield nào nữa, trình tạo sẽ trả về { done: true }.

Các trường hợp sử dụng Generators trong thực tế

1. Bộ tạo chuỗi vô hạn

Một trong những trường hợp sử dụng phổ biến là tạo chuỗi số vô hạn mà không gây tràn bộ nhớ.

VD:

function* infiniteNumbers() { let num = 1; while (true) { yield num++; }
} const numbers = infiniteNumbers(); console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
console.log(numbers.next().value); // 3
// ... and so on

2. Lặp lại có kiểm soát để lấy dữ liệu

Ngoài ra, Generators còn hữu ích trong việc kiểm soát việc lặp lại để lấy dữ liệu.

VD:

function* fetchInChunks(data) { for (let i = 0; i < data.length; i += 2) { yield data.slice(i, i + 2); }
} const chunks = fetchInChunks([1, 2, 3, 4, 5, 6, 7, 8]); console.log(chunks.next().value); // [1, 2]
console.log(chunks.next().value); // [3, 4]
console.log(chunks.next().value); // [5, 6]

3. Hữu ích với trình tạo ủy quyền

Một tính năng thú vị khác của Generators là khả năng gọi các Generators khác bằng từ khóa yield*. Điều này cho phép kết hợp nhiều Generators để tạo ra các luồng xử lý phức tạp hơn. Ví dụ dưới đây minh họa cách Generators lồng nhau hoạt động.

function* innerGenerator() { yield "I’m the inner generator 🎯";
} function* outerGenerator() { yield "I’m the outer generator 🌟"; yield* innerGenerator(); yield "Back to the outer generator 👋";
} const gen = outerGenerator(); for (const value of gen) { console.log(value);
}

Output:

I’m the outer generator 🌟 I’m the inner generator 🎯 Back to the outer generator 👋 

Vậy tại sao nên sử dụng Generators?

  • Thứ nhất, Generators hỗ trợ lazy evaluation, tức là chỉ tạo giá trị khi cần thiết.
  • Thứ hai, Generators giúp cải thiện hiệu suất bằng cách tránh tính toán tất cả kết quả cùng một lúc.
  • Cuối cùng, Generators có thể kết hợp với async/await để viết code asynchronous gọn gàng và dễ đọc hơn.

Tóm lại, Generators là một công cụ mạnh mẽ trong JavaScript, tuy ban đầu có vẻ khó hiểu nhưng với việc luyện tập, bạn sẽ nhanh chóng thành thạo. Hãy bắt đầu với những ví dụ đơn giản, khám phá các khả năng của Generators, và bạn sẽ sớm sử dụng chúng như một chuyên gia.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 528

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 436

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 158

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 149

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 113

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 249