Trình tạo JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về trình tạo JavaScript với sự trợ giúp của các ví dụ.

Trong JavaScript, trình tạo cung cấp một cách mới để làm việc với các hàm và trình vòng lặp.

Sử dụng máy phát điện,

  • bạn có thể dừng việc thực thi một hàm từ bất kỳ đâu bên trong hàm
  • và tiếp tục thực thi mã từ vị trí bị tạm dừng

Tạo trình tạo JavaScript

Để tạo một trình tạo, trước tiên bạn cần xác định một chức năng của trình tạo bằng function*biểu tượng. Các đối tượng của chức năng máy phát điện được gọi là máy phát điện.

 // define a generator function function* generator_function() (… ) // creating a generator const generator_obj = generator_function();

Lưu ý : Hàm máy phát được ký hiệu là *. Bạn có thể sử dụng function* generatorFunc() (… )hoặc function *generatorFunc()(… )tạo chúng.

Sử dụng lợi nhuận để tạm dừng thực thi

Như đã đề cập ở trên, bạn có thể tạm dừng thực thi một hàm của trình tạo mà không cần thực thi toàn bộ thân hàm. Đối với điều đó, chúng tôi sử dụng yieldtừ khóa. Ví dụ,

 // generator function function* generatorFunc() ( console.log("1. code before the first yield"); yield 100; console.log("2. code before the second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next());

Đầu ra

 1. mã trước sản lượng đầu tiên (giá trị: 100, thực hiện: sai)

Đây,

  • Một đối tượng trình tạo có tên generatorđược tạo.
  • Khi generator.next()được gọi, mã đầu tiên yieldđược thực thi. Khi yieldgặp phải, chương trình trả về giá trị và tạm dừng chức năng tạo.

Lưu ý : Bạn cần gán các đối tượng của trình tạo cho một biến trước khi sử dụng.

Làm việc của nhiều Báo cáo lợi nhuận

Các yieldbiểu thức trả về một giá trị. Tuy nhiên, không giống như returncâu lệnh, nó không kết thúc chương trình. Đó là lý do tại sao bạn có thể tiếp tục thực thi mã từ vị trí được tạo cuối cùng. Ví dụ,

 function* generatorFunc() ( console.log("1. code before first yield"); yield 100; console.log("2. code before the second yield"); yield 200; console.log("3. code after the second yield"); ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());

Đầu ra

 1. mã trước năng suất đầu tiên (giá trị: 100, thực hiện: sai) 2. mã trước năng suất thứ hai (giá trị: 200, thực hiện: sai) (giá trị: không xác định, thực hiện: đúng)

Đây là cách chương trình này hoạt động.

  • Câu generator.next()lệnh đầu tiên thực thi mã cho đến câu lệnh lợi nhuận đầu tiên và tạm dừng việc thực thi chương trình.
  • Cái thứ hai generator.next()bắt đầu chương trình từ vị trí tạm dừng.
  • Khi tất cả các phần tử được truy cập, nó sẽ trả về (value: undefined, done: true).
Hoạt động của hàm trình tạo trong JavaScript

Chuyển các đối số đến các hàm của trình tạo

Bạn cũng có thể chuyển các đối số cho một hàm trình tạo. Ví dụ,

 // generator function function* generatorFunc() ( // returns 'hello' at first next() let x = yield 'hello'; // returns passed argument on the second next() console.log(x); console.log('some code'); // returns 5 on second next() yield 5; ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next(6)); console.log(generator.next());

Đầu ra

 (giá trị: "xin chào", thực hiện: sai) 6 một số mã (giá trị: 5, thực hiện: sai) (giá trị: không xác định, thực hiện: đúng)

Trong chương trình trên,

  • Đầu tiên generator.next()trả về giá trị của yield(trong trường hợp này là 'hello'). Tuy nhiên, giá trị không được gán cho biến x tronglet x = yield 'hello';
     (giá trị: "xin chào", thực hiện: sai)
  • Khi generator.next(6)gặp phải, mã lại bắt đầu tại let x = yield 'hello';và đối số 6 được gán cho x. Ngoài ra, mã còn lại được thực thi đến giây yield.
     6 một số mã (giá trị: 5, thực hiện: sai)
  • Khi thứ ba next()được thực thi, chương trình trả về (value: undefined, done: true). Đó là bởi vì không có câu lệnh lợi nhuận nào khác.
     (giá trị: không xác định, thực hiện: đúng)

Trình tạo được sử dụng để triển khai lặp lại

Trình tạo cung cấp một cách dễ dàng hơn để triển khai trình vòng lặp.

Nếu bạn muốn triển khai trình vòng lặp theo cách thủ công, bạn phải tạo một trình vòng lặp với next()phương thức và lưu trạng thái. Ví dụ,

 // creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) for (const i of iterableObj) ( console.log(i); )

Đầu ra

 1 2 3

Vì trình tạo có thể lặp lại, bạn có thể triển khai trình lặp theo cách dễ dàng hơn. Sau đó, bạn có thể lặp lại qua các trình tạo bằng for… ofvòng lặp. Ví dụ,

 // generator function function* generatorFunc() ( yield 1; yield 2; yield 3; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )

Phương pháp máy phát điện

phương pháp Sự miêu tả
next() Trả về giá trị lợi nhuận
return() Trả về một giá trị và kết thúc trình tạo
throw() Ném lỗi và chấm dứt trình tạo

JavaScript trả về Vs từ khóa lợi nhuận

trả lại từ khóa từ khóa lợi nhuận
Trả về giá trị và kết thúc hàm. Trả về giá trị và tạm dừng hàm nhưng không kết thúc hàm.
Có sẵn trong cả chức năng bình thường và chức năng máy phát điện. Chỉ có sẵn trong các chức năng của máy phát điện.

Hàm tạo JavaScript có trả về

You can use the return statement in a generator function. The return statement returns a value and terminates the function (similar to regular functions). For example,

 // generator function function* generatorFunc() ( yield 100; return 123; console.log("2. some code before second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());

Output

 (value: 100, done: false) (value: 123, done: true) (value: undefined, done: true)

In the above program, when the return statement is encountered, it returns the value and done property becomes true, and the function terminates. Hence, the next() method after the return statement does not return anything.

Note: You can also use the return() method instead of the return statement like generator.return(123); in the above code.

JavaScript Generator Throw Method

Bạn có thể xử lý lỗi một cách rõ ràng trên hàm trình tạo bằng phương thức ném (). Việc sử dụng throw()phương thức ném ra một lỗi và kết thúc hàm. Ví dụ,

 // generator function function* generatorFunc() ( yield 100; yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); // throws an error // terminates the generator console.log(generator.throw(new Error('Error occurred.'))); console.log(generator.next());

Đầu ra

 (giá trị: 1, thực hiện: sai) Lỗi: Đã xảy ra lỗi.

Sử dụng máy phát điện

  • Trình tạo cho phép chúng tôi viết mã sạch hơn trong khi viết các tác vụ không đồng bộ.
  • Trình tạo cung cấp một cách dễ dàng hơn để triển khai trình vòng lặp.
  • Trình tạo chỉ thực thi mã của nó khi được yêu cầu.
  • Máy phát điện là bộ nhớ hiệu quả.

Máy phát điện đã được giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng máy phát điện. Để tìm hiểu thêm, hãy truy cập hỗ trợ Trình tạo JavaScript.

thú vị bài viết...