đối tượng lặp lại javascript

Các đối tượng lặp lại là các đối tượng có thể được lặp lại với vòng lặp for..of.
Về mặt kỹ thuật, các file lặp phải triển khai phương thức Symbol.iterator.

Lặp lại trên một chuỗi


Chúng ta có thể sử dụng vòng lặp for..of để lặp lại các phần tử của một chuỗi.

Ví dụ

var x, y; 
x = "book-code.com.vn";
y = "";
for (var i of x) {
    y += i + "<br/>";
}

Xem kết quả

Lặp lại trên một mảng


Chúng ta có thể sử dụng vòng lặp for..of để lặp lại các phần tử của Mảng.

Ví dụ

const cars = ["Kia","Innova","CRV","BMW"];
var y = "";
for (var i of cars) {
    y += i + "<br/>";
}

Xem kết quả

Trình lặp lại JavaScript


Giao thức trình lặp xác định cách tạo ra một chuỗi giá trị từ một đối tượng.

Một đối tượng trở thành một trình lặp khi nó thực hiện một phương thức next().

Phương thức next() sẽ trả về một đối tượng có hai thuộc tính:

  • value (next value)
  • done (true/false)
value Giá trị được trả về bởi trình lặp
(Có thể bỏ qua nếu done là true)
done true Nếu trình lặp đã hoàn thành
false Nếu trình lặp đã tạo ra một giá trị mới

Hàm lặp tự định nghĩa


Hàm lặp này sẽ trả về kết quả không bao giờ kết thúc: 10, 20, 30, 40, ... mỗi khi hàm next() được gọi.

Ví dụ

// Định nghĩa hàm lặp
function myNumbers(){
    var n = 0;
    return {
        next: function(){
            n += 10;
            return {value:n,done:false};    
        }    
    }    
}
var n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30
document.getElementById('demo').innerHTML = n.next().value;

Xem kết quả

Vấn đề với hàm có thể lặp lại tự định nghĩa là:
Nó không hỗ trợ câu lệnh for..of JavaScript.

JavaScript có thể lặp lại là một đối tượng có Symbol.iterator.

Hàm Symbol.iterator là một hàm trả về một hàm next().

Ví dụ

// Tạo đối tượng
myNumbers = {};

// Làm cho nó có thể lặp
myNumbers[Symbol.iterator] = function() {
  var n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

var text = "";
for (const num of myNumbers) {
  text += num + "<br>";
}

Xem kết quả

Phương thức Symbol.iterator được gọi tự động bởi for..of.

Nhưng chúng ta cũng có thể làm "thủ công".

Ví dụ

while (true) {
  const result = iterator.next();
  if (result.done) break;
  text += result.value + "<br>";
}

Xem kết quả