Kể từ năm 2015, EcmaScript6 (ES6) đã mang lại nhiều tiến bộ trong thực hành mã hóa JavaScript. Nhiều khái niệm hiện đại đã được đưa vào JavaScript, cải thiện đáng kể trải nghiệm viết mã. Trong bài viết này, bạn sẽ tìm hiểu về trình lặp và trình tạo trong JavaScript.
Trình tạo lặp và trình tạo là hai khái niệm khác nhau, nhưng chúng được sử dụng theo những cách tương tự. Chúng được sử dụng để lặp qua các mảng và đối tượng trong JavaScript.
Trình lặp lại
Các trình lặp giống như các vòng lặp nâng cao có thể bị tạm dừng. Các trình lặp bao gồm hàm next () , hàm này trả về giá trị và trạng thái đã hoàn thành. Trường giá trị là giá trị trong mảng tại một chỉ số nhất định. done là giá trị boolean trả về trạng thái hoàn thành cho quá trình lặp qua vòng lặp.
Dưới đây là một ví dụ minh họa cách trình vòng lặp:
function fruitIter(fruits){ let index = 0; return { next: function(){ return index < fruits.length="" {="" value:="" fruits[index++],="" done:="" false="" }="" :="" {done:=""> } } } const fruitsArray = ["Mango", "Banana", "Grapes"]; const fruits = fruitIter(fruitsArray); console.log(fruits.next().value);
Đầu ra :
Trái xoài
Khi bạn vượt qua fruitsArray mảng trong fruitIter () phương pháp, nó sẽ trả về một iterator mà được lưu trữ trong các loại trái cây khác nhau. Biến chỉ mục trong phương thức fruitIter () được khởi tạo bằng 0. Phương thức này trả về hàm next () giúp lặp qua mảng . Hàm next () kiểm tra xem chỉ mục có nhỏ hơn độ dài fruitArray hay không . Nếu vậy, nó trả về hai biến: tên quả tại chỉ mục đó và trạng thái đã hoàn thành . Trong khi trả về các giá trị này, nó cũng làm tăng giá trị chỉ mục.
Để kiểm tra cách hoạt động của phương thức này và in tên quả, bạn cần gọi hàm next () trên trình lặp quả và nhận quyền truy cập vào giá trị của nó.
Liên quan: Chức năng trong lập trình là gì?
Máy phát điện
Trình tạo tương tự như Trình tạo lặp nhưng chúng trả về nhiều giá trị. Các giá trị này được gọi là giá trị năng suất. Các hàm của trình tạo được viết bằng cú pháp hàm * . * biểu thị rằng đó không phải là một chức năng bình thường, mà là một bộ tạo. Đây là một ví dụ về máy phát điện:
function* printFruits(){ yield "Mango"; yield "Banana"; yield "Grapes"; } const fruit = printFruits(); console.log(fruit.next());
Đầu ra :
{value: 'Mango', done: false}
Trong ví dụ này, lợi nhuận là trình vòng lặp. Khi bạn gọi hàm printFruits () và print fruit.next () , nó cung cấp cho bạn một đối tượng mà bạn nhận được giá trị. Các done biểu thị tình trạng cho dù tất cả các giá trị đã được lặp qua.
Tìm hiểu cấu trúc dữ liệu bằng cách sử dụng lớp ES6 trong JavaScript
JavaScript ES6 đã mang lại nhiều tiến bộ trong thực hành mã hóa. Không ít trong số đó là xây dựng cấu trúc dữ liệu bằng cách sử dụng các lớp ES6. Xô. bật lên và xếp chồng theo cách của bạn lên hàng đầu và trở thành một chuyên gia JavaScript!