Trình lặp lại JavaScript và Trình lặp lại

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

Trình lặp lại và Trình lặp lại JavaScript

JavaScript cung cấp một giao thức để lặp lại các cấu trúc dữ liệu. Giao thức này xác định cách các cấu trúc dữ liệu này được lặp lại bằng cách sử dụng for… ofvòng lặp.

Khái niệm về giao thức có thể được chia thành:

  • có thể lặp lại
  • người lặp lại

Giao thức có thể lặp lại đề cập rằng một có thể lặp lại phải có Symbol.iteratorkhóa.

JavaScript lặp lại

Các cấu trúc dữ liệu có Symbol.iterator()phương thức này được gọi là các cấu trúc lặp. Ví dụ: Mảng, Chuỗi, Bộ, v.v.

Trình lặp lại JavaScript

Một trình lặp là một đối tượng được trả về bởi Symbol.iterator()phương thức.

Giao thức trình lặp cung cấp next()phương thức truy cập từng phần tử của cấu trúc dữ liệu có thể lặp lại (cấu trúc dữ liệu) tại một thời điểm.

Hãy xem xét một ví dụ về các tệp lặp có Symbol.Iterator()

 const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);

Đầu ra

 Array Iterator () StringIterator ()

Ở đây, việc gọi Symbol.iterator()phương thức của cả mảng và chuỗi sẽ trả về các trình vòng lặp tương ứng của chúng.

Lặp lại thông qua lặp lại

Bạn có thể sử dụng for… ofvòng lặp để lặp qua các đối tượng có thể lặp lại này. Bạn có thể lặp lại qua Symbol.iterator()phương thức như sau:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Đầu ra

 1 2 3

Hoặc bạn có thể chỉ cần lặp qua mảng như thế này:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Ở đây, trình lặp cho phép for… ofvòng lặp lặp qua một mảng và trả về từng giá trị.

Phương thức JavaScript next ()

Đối tượng vòng lặp có một next()phương thức trả về mục tiếp theo trong chuỗi.

Các next()phương pháp bao gồm hai thuộc tính: valuevà done.

  • giá trị
    Các valuetài sản có thể là bất kỳ kiểu dữ liệu và đại diện cho giá trị hiện tại trong chuỗi.
  • thực hiện
    Các donebất động sản là một giá trị boolean cho biết xem lặp hoàn tất hay không. Nếu quá trình lặp chưa hoàn thành, thuộc donetính được đặt thành false, nếu không, thuộc tính được đặt thành true.

Hãy xem một ví dụ về dãy lặp mảng:

 const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)

Bạn có thể gọi next()nhiều lần để lặp lại một arrIteratorđối tượng.

  • Các next()phương thức trả về một đối tượng với hai thuộc tính: valuevà done.
  • Khi next()phương thức đến cuối dãy, thì thuộc donetính được đặt thành false.

Hãy xem for… ofvòng lặp thực thi chương trình trên như thế nào . Ví dụ,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Đầu ra

 xin chào

Các for… ofvòng lặp thực hiện chính xác giống như các chương trình trên.

Các for… ofvòng lặp tiếp tục kêu gọi các next()phương pháp trên iterator. Khi nó đạt đến done:true, for… ofvòng lặp kết thúc.

Trình lặp do người dùng xác định

Bạn cũng có thể tạo trình lặp của riêng mình và gọi next()để truy cập phần tử tiếp theo. Ví dụ,

 function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());

Đầu ra

 (value: "h", done: false) (value: "e", done: false) (value: "l", done: false) (value: "l", done: false) (value: "o" , done: false) (value: undefined, done: true)

Trong chương trình trên, chúng ta đã tạo trình lặp của riêng mình. Các displayElements()trở về chức năng valuevà donebất động sản.

  • Mỗi lần next()phương thức được gọi, hàm được thực thi một lần và hiển thị giá trị của một mảng.
  • Cuối cùng, khi tất cả các phần tử của một mảng đã hết, thuộc donetính được đặt thành true, với valuenhư undefined.

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