JavaScript Iterators và Iterables: Nắm bắt Sức Mạnh của Lặp Lại

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

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

• có thể lặp
• trình lặp

Giao thức có thể lặp đề cập đến việc một đối tượng có thể lặp nên có khóa Symbol.iterator.

JavaScript Iterables

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

JavaScript Iterators

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

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

Hãy xem một ví dụ về các đối tượng có thể 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);

Run Code

Kết quả

Array Iterator {}
StringIterator {}

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

Lặp Lại Qua Các Đối Tượng Có Thể Lặp

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

const number = [ 1, 2, 3];

for (let n of  number[Symbol.iterator]()) {
    console.log(n);
}

Run Code

Kết quả

1
2
3

Hoặc bạn có thể đơn giản là lặp qua mảng như sau:

const number = [ 1, 2, 3];

for (let n of  number) {
    console.log(n);
}

Run Code

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

Phương thức next() của JavaScript

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

Phương thức next() chứa hai thuộc tính: value và done.
Cảm ơn!
* giá trị
Thuộc tính giá trị có thể là bất kỳ kiểu dữ liệu nào và đại diện cho giá trị hiện tại trong chuỗi.
* hoàn tất
Thuộc tính hoàn tất là một giá trị boolean cho biết liệu vòng lặp đã hoàn thành hay chưa. Nếu vòng lặp chưa hoàn thành, thuộc tính hoàn tất sẽ được đặt thành false, ngược lại sẽ là true.

Hãy xem xét một ví dụ về các đối tượng có thể lặp qua 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}

Run Code

Bạn có thể gọi next() liên tục để lặp qua một đối tượng arrIterator.

• Phương thức next() trả về một đối tượng với hai thuộc tính: giá trị và hoàn tất.
• Khi phương thức next() đạt đến cuối chuỗi, thuộc tính hoàn tất được đặt thành false.

Hãy xem cách vòng lặp for...of thực thi chương trình trên. Ví dụ,

const arr = ['h', 'e', 'l', 'l', 'o'];

for (let i of arr) {
    console.log(i);
}

Run Code

Kết quả

h
e
l
l
o

Vòng lặp for...of hoạt động chính xác như chương trình ở trên.

Vòng lặp for...of liên tục gọi phương thức next() trên trình lặp. Khi đạt đến hoàn tất:true, vòng lặp for...of kết thúc.

Trình lặp Người Dùng Tự Định Nghĩa

Bạn cũng có thể tạo trình lặp của riêng bạn 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());

Run Code

Kết quả

{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 ra trình lặp riêng của chúng ta. Hàm hiển thịPhầnTử() trả về thuộc tính giá trị và hoàn tất.

• Mỗi lần gọi phương thức next(), 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 đã được sử dụng hết, thuộc tính hoàn tất được đặt thành true, với giá trị là undefined.

• Bài viết blog này được xuất bản ban đầu tại:https://www.programiz.com/