Giới thiệu

Mình mới làm quen với quen với ngôn ngữ typescript và có gặp 1 số vấn đề liên quan đến vòng lặp, nên mình chia sẻ ở đây để những bạn đi sau có cái nhìn tổng quát về vòng lặp trong typescript, qua đó tiết kiệm được 1 chút thời gian tìm hiểu. OK bắt đầu thôi.

For

Kiểu for truyền thống, giống như những ngôn ngữ khác:

for (first expression; second expression; third expression ) {
    // statements to be executed repeatedly
}

Ở đây, biểu thức đầu tiên được thực thi trước khi bắt đầu vòng lặp. Biểu thức thứ hai là điều kiện để thực thi vòng lặp. Và biểu thức thứ ba được thực thi sau khi làm hết mọi việc trong vòng lặp. Lưu ý là SAU nhé.

for (let i = 0; i < 3; i++) {
  console.log ("Block statement execution no." + i);
}

Thì sẽ in ra:

Block statement execution no.0
Block statement execution no.1
Block statement execution no.2

For...of

Tuy nhiên, typescript rất hay làm việc với các object. Vì vậy, có những vòng lặp chuyên dùng cho các object. For..of là 1 vòng lặp như thế. Vòng lặp này sẽ duyệt các giá trị của mảng, danh sách,chuỗi kí tự,Object,... Ví dụ:

let arr = [10, 20, 30, 40];

for (const val of arr) {
  console.log(val); // prints values: 10, 20, 30, 40
}

Khi sử dụng để duyệt object, for..of thường được dùng kèm với Object.values() - trả về mảng các values và Object.keys() trả về mảng các keys cảu object.

const obj = {
    firstName: 'Hoa',
    lastName: 'Minzii'
};
console.log(Object.values(obj)); // [ 'Hoa', 'Minzii' ]
for (const key of Object.keys(obj)){
    console.log(key) // firstName , lastName
}

Thông thường, ta sẽ truy xuất value theo key bằng toán tử [].

for (const key of Object.keys(obj)){
    console.log(obj[key]) // Hoa , Minzii
}

For...in

Tương tự như for...of, nhưng là với key của object.

let arr = [10, 20, 30, 40];

for (const index1 in arr) {
  console.log(index1); // prints indexes: 0, 1, 2, 3
}

Promise.all()

1 cách khác để duyệt các phần tử trong 1 object là dùng promise.all() kết hợp với map() function để xử lý bất đồng bộ.

const obj = {
    firstName: 'Hoa',
    lastName: 'Minzii'
};
const promises = obj.map((data) => {
    console.log(data); //  'firstName': 'Hoa', 'lastName': 'Minzii'
    // do something
    // return data
});
Promise.all(promises);

Hàm map() sẽ trả về 1 mảng các promise, việc của chúng ta là promise.all để chờ tất các các promise xử lý xong, quá tiện lợi phải không.
Lưu ý rằng khi 1 tiến trình trong promise.all bị lỗi, tất cả các promise sẽ dừng lại. Điều này có thể ảnh hưởng đến output. Để tránh hiện tượng này, hãy đặt try...catch trong hàm xử lý để tiến trình ko bị ngắt. Code sẽ trở thành:

const obj = {
    firstName: 'Hoa',
    lastName: 'Minzii'
};
const promises = obj.map((data) => {
    try {
       console.log(data); //  'firstName': 'Hoa', 'lastName': 'Minzii'
      // do something
      // return data
      } catch (error){
          console.log(error)
          return null;
      }
});
Promise.all(promises);

Tổng kết

Trên đây là 1 số chia sẻ của mình về vòng lặp trong typescript. Mới bắt đầu còn nhiều bỡ ngỡ, mong được mọi người góp ý.
Happy coding