Hướng dẫn iterator javascript là gì

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Iteration

ECMAScript 6 cung cấp cho bạn một cách mới để tương tác với cấu trúc dữ liệu, đó là Iteration (Sự lặp đi lặp lại). Bây giờ chúng ta sẽ làm sáng tỏ nó.

Có hai khái niệm mà bạn cần phân biệt:

• Iterator
• Iterable

Các khái niệm Iterator, Iterable được áp dụng cho các lớp Array, Set, Map.

2- Khái niệm về Iterator

Iterator (Bộ lặp): Một đối tượng được gọi là Iterator nếu nó chứa một con trỏ (pointer) tới phần tử tiếp theo trong Iteration.

Về mặt kỹ thuật, một đối tượng trong ECMAScript được gọi là Iterator nếu nó có một phương thức với tên next(), và phương thức này trả về một đối tượng có dạng {value:SomeValue,done:booleanValue}. done có giá trị true nếu Iteration đã hoàn thành, ngược lại nó có giá trị false.

iterator-object-example.js

// An Iterator Object:
let myIterator = { 
  someProp: "Some Prop",
  //
  next : function()  {
      return  {
         value: "Tom",
         done: false
      }
  }
}
// ----------- TEST -------------------
let entry = myIterator.next();
console.log(entry); // { value: 'Tom', done: false }
console.log(entry.value); // Tom

3- Khái niệm về Iterable

Iterable (Có thể lặp) -  Về mặt ngôn ngữ, Một đối tượngđược gọi là Iterable nếu nó chứa một tập hợp dữ liệu, và nó cung cấp một cách để công khai các dữ liệu của nó. Chẳng hạn mảng (Array) có thể gọi là Iterable vì nó chứ một tập hợp các dữ liệu, và bạn có thể truy cập vào các phần tử của nó.

Về mặt kỹ thuật, Trong ECMAScript một đối tượng được gọi là Iterable (Có thể lặp được) phải có một phương thức với khóa (key) là Symbol.iterator, và phương thức này trả về một đối tượng Iterator.

Symbol.iterator là một giá trị của kiểu dữ liệu Symbol, cũng giống như 100 là một giá trị của kiểu số nguyên (Integer). Bạn có thể xem thêm về Symbol trong bài viết dưới đây:

Dưới đây là một ví dụ đơn giản, một đối tượng có với các properties:

• myProp1
• myProp2
• 100
• myProp3
• Symbol.iterator

object-with-properties.js

// An Object:
let myObject = {
   // A property
   myProp1 : "Some Value 1",
    // A property
   'myProp2' : "Some Value 2",
   // A property
   100 : "One hundred",
   // A property (Method)
   myProp3 :  function()  {
       console.log("I'm a method");
   },
   // A property (Method)
   [Symbol.iterator] : function() {
      console.log("I'm a [Symbol.iterator] method");
   }
} 
// ----------- TEST --------------
console.log( myObject["myProp1"] ); // Some Value 1
console.log( myObject["myProp2"] ); // Some Value 2
console.log( myObject[100] ); // One hundred
myObject["myProp3"](); // I'm a method
myObject[Symbol.iterator]();// I'm a [Symbol.iterator] method

Output:

Some Value 1
Some Value 2
One hundred
I'm a method
I'm a [Symbol.iterator] method

Iterable?

Tóm lại, Một đối tượng được gọi là Iterable nếu nó có một phương thức với khóa Symbol.iterable, và phương thức này trả về một đối tượng Iterator.
 

iterable-object-example.js

// An Iterator Object
let myIterator = {
   next : function()  {
      return  {value: Math.random(), done: false};
   }
}
// A Iterable object:
let myIterable = {
   myProp : "Some value",
   // A Method returns an Iterator object.
   [Symbol.iterator] :  function() {
       return myIterator;
   }
}
// ------ TEST -----------
// An iterator object.
let it = myIterable[Symbol.iterator]();

let entry = it.next();
console.log(entry);

entry = it.next();
console.log(entry);

Output:

{ value: 0.6026736348993575, done: false }
{ value: 0.1790056262472559, done: false }

Một lớp được gọi là Iterable nếu nó có một phương thức với tên [Symbol.iterator]. Các đối tượng được tạo từ lớp này sẽ là các đối tượng Iterable.

class-iterable-example.js

// An Iterable class.
class MyClass {
    constructor() { 
    }
    someMethod() {
        console.log("Some method");
    }
    [Symbol.iterator]() {
        // An Iterator object.
        var myIterator = {
            next: function() {
                return {value: Math.random(),done: false};
            }
        };
        return myIterator;
    }
}
// ----------- TEST -----------------
let myObject = new MyClass();
myObject.someMethod();
// An Iterator Object.
let it = myObject[Symbol.iterator]();
let entry;
let i = 0;
while ( (entry = it.next()).done == false )  {
    console.log( entry);
    i++;
    if(i > 5)  {
      break;
    }
}

Chú ý: Trong ECMAScript, Các lớp Array, Set, Map là các Iterable.