Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

Cú pháp for...of để chạy vòng lặp trên String, Array, đối tượng tương tự Array (như arguments hoặc NodeList), TypedArray, Map, Set.

Cú pháp

for (tên biến of đối tượng để loop) {
  ...câu lệnh...
}
tên biến
Tên biến đại diện cho một phần tử được loop.
đối tượng để loop
Array, Object,... các đối tượng để chạy vòng lặp

Ví dụ

Loop qua một Array

let iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

Có thể khai báo bằng const thay cho let, nếu không có reassign bên trong vòng lặp.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

Loop qua một String

let iterable = 'boo';

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

Loop qua TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Lặp qua một Map

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Loop qua một Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Loop qua một đối tượng arguments

Loop qua đối tượng arguments để có tất cả giá trị được truyền vào trong hàm:

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

Loop qua một tập DOM

Loop qua một tập DOM như NodeList: ví dụ bên dưới, thêm class read cho các paragraph nào là con trực tiếp của article:

// Lưu ý: Chỉ hoạt động động trên các platforms có
// implement NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll('article > p');

for (let paragraph of articleParagraphs) {
  paragraph.classList.add('read');
}

Thoát khỏi vòng lặp

Trong vòng lặp for...of, có thể can thiệp giữa chừng bằng break, continue, throw hoặc return. Trong các trường hợp này, vòng lặp sẽ được ngưng lại.

function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (let o of foo()) { 
  console.log(o); 
  break; // đóng vòng lặp, return
}

Lặp qua generator

Bạn cũng có thể lặp qua hàm generators, ví dụ:

function* fibonacci() { // một hàm generator
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

Không tái sử dụng generator

Không nên re-used Generator, ngay cả khi vòng lặp for...of bị kết thúc sớm bằng break. Khi thoát khỏi vòng lặp, generator sẽ kết thúc và cố lặp lại lần nữa sẽ không cho thêm bất kỳ kết quả yield nào khác.

var gen = (function *(){
  yield 1;
  yield 2;
  yield 3;
})();
for (let o of gen) {
  console.log(o);
  break;  // Closes iterator
}

// Không re-use generator, đoạn code như thế này không hợp lý!
for (let o of gen) {
  console.log(o); // Không bao giờ được gọi
}

Loop qua các đối tượng khác

Bạn cũng có thể loop qua các đối tượng tự định nghĩa, nếu có implement iterable:

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2

Sự khác biệt giữa for...offor...in

Cú pháp for...in lặp qua các đối tượng được đếm, theo một thứ tự tùy ý.

Cú pháp for...of loop qua đối tượng dữ liệu có thể lặp.

Ví dụ sau để thấy sự khác nhau giữa for...of loop và a for...in loop khi sử dụng với Array.

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

Giải thích ví dụ trên

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = 'hello';

Tất cả object sẽ kế thừa thuộc tính objCustom và tất cả Array sẽ kết thừa thuộc tính arrCustom bởi vì chúng ta thêm nó vào bằng Object.prototypeArray.prototype. iterable kế thừa cả objCustomarrCustom.

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

Vòng loop này chỉ log thuộc tính được đếm của iterable, theo thứ tự được đưa vào. Nó không log các element của array 3, 5, 7 hoặc hello bởi vì nó là không thuộc tính được đếm. Nó log giá trị index cũng như arrCustomobjCustom.

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

Vòng loop tương tự như ở trên, nhưng sử dụng hasOwnProperty() để kiểm tra, nếu tìm thấy một property của chính nó chứ không phải kế thừa và log kết quả ra. Các Property 0, 1, 2foo được log bởi vì nó không phải được kết thừa.

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7 
}

Vòng loop và log ra giá trị bên trong đối tượng iterable như một iterable object được khai báo để loop, chính là các element bên trong mảng 3, 5, 7 và không bao gồm các property của object.

Đặc điểm

Đặc điểm Status Ghi chú
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'for...of statement' in that specification.
Draft  

Trình duyệt hổ trợ

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 38Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Prior to Firefox 51, using the for...of loop construct with the const keyword threw a SyntaxError ("missing = in const declaration").
IE No support NoOpera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Prior to Firefox 51, using the for...of loop construct with the const keyword threw a SyntaxError ("missing = in const declaration").
Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support Yes
async iteratorsChrome Full support 63Edge ? Firefox Full support 57IE ? Opera Full support 50Safari ? WebView Android Full support 63Chrome Android Full support 63Edge Mobile ? Firefox Android Full support 57Opera Android Full support 50Safari iOS ? Samsung Internet Android ? nodejs ?
Closing iteratorsChrome Full support 51Edge Full support YesFirefox Full support 53IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 53Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Xem thêm

Document Tags and Contributors

Những người đóng góp cho trang này: quytran, luubinhan
Cập nhật lần cuối bởi: quytran,