[Javascript Căn bản] Vòng lặp trong JavaScript

Trong lập trình để xử lý một công việc lặp đi lặp lại, người ta sử dụng một vòng lặp để làm điều đó. Có nhiều loại vòng lặp khác nhau giúp các lập trình viên sử dễ dàng lựa chọn để sử dụng cho phù hợp. Javascript cũng cung cấp hai vòng lặp phổ biến là for và while. Trong bài viết này mình sẽ chia sẻ chi tiết về vòng lặp for, while và cách sử dụng chúng trong Javascript.

Vòng lặp for trong Javascript

Vòng lặp for sẽ thực hiện lặp đi lặp lại các đoạn code nằm trong vòng cho đến khi thỏa mãng điều kiện nó sẽ dừng. for được sử dụng phổ biến để lặp các giá trị trong một mảng. Cú pháp của vòng lặp for như sau:

for (Câu_lệnh_1; Câu_lệnh_2; Câu_lệnh_3) { 
    Khối lệnh
}

• Câu_lệnh_1: Được thực hiện trước khi lặp khối lệnh.
• Câu_lệnh_2: Xác định điều kiện để chạy khối lệnh.
• Câu_lệnh_3: Được thực hiện sau khi lặp khối lệnh.

Ví dụ

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
}

• Trong ví dụ trên i là một biến được khởi tạo với chỉ số ban đầu là 0. Điều kiện so sánh là khi nào i này nhỏ hơn số giá trị có trong mảng cars thì vòng lặp vẫn được tiếp tục. biến i này sẽ tăng lên 1 lần sau mỗi vòng lặp.
• cars[i] sẽ hiển thị giá trị tại vị trí thứ i trong mảng.

Trong vòng lặp for, các câu lệnh có thể không cần thiết.

• Bạn có thể bỏ Câu_lệnh_1 như ví dụ sau:

for (; i < cars.length; i++) { 
    text += cars[i] + "<br>";
}

Tuy nhiên biến i phải được khai báo ngoài nếu không câu lệnh sẽ không thực thi được.

• Bạn có thể bỏ Câu_lênh_2 như ví dụ sau:

for (i=0; ; i++) {
  text += cars[i] + "<br>";
  if(i== 5){
      break;
  }
}

Bạn lưu ý là vòng lặp trên mình có sử dụng một hàm if để kiểm tra và sử dụng break; để thoát ra khỏi vòng lặp. Nếu không sử dụng break; máy của bạn có thể bị đơ vì vòng lặp không có điểm dừng.

• Bạn có thể bỏ Câu_lệnh_3 như ví dụ sau:

for (; i < len; ) {
   text += cars[i] + "<br>";
   i++;
}

Mặc dù không có Câu_lệnh_1 và Câu_lệnh_3, nhưng biến i (tức Câu_lệnh_1) đã được khai báo ở ngoài vòng lặp và Câu_lệnh_3 được chuyển xuống dưới khối lệnh.

Mình chỉ đưa ra ví dụ để bạn thấy vòng lặp for có khả năng tùy biến vị trí câu lệnh, không nhất thiết phải để trong lệnh for. Tuy nhiên mình không khuyến khích việc sử dụng 3 cách trên để lập trình thực tế. Bạn nên sử dụng cách chèn các câu lệnh đầy đủ để code trở nên rõ ràng hơn nhé.

Nếu là một đối tượng (object) thì vòng lặp for sẽ sử dụng nó như thế nào. Ví dụ sau sẽ cho bạn thấy rõ cách sử dụng for để lấy giá trị trong đối tượng.

var person = {fname:"Tuan", lname:"Doan", age:25}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

• person là một đối tượng. text được sử dụng để lưu giá trị đầu ra. x là biến được khai báo để sử dụng lưu các thuộc tính trong đối tượng.
• x in person là câu lệnh lấy ra các thuộc tính có trong đối tượng. in chính là mấu chốt quan trọng.
• person[x] sẽ trả về giá trị của thuộc tính x trong đối tượng person.

Vòng lặp While trong Javascript

Nếu như vòng lặp for lặp đi lặp lại các đoạn code nằm trong vòng cho đến khi thỏa mãng điều kiện nó sẽ dừng. thì while sẽ lặp trong khi điều kiện còn thỏa mãn. Cú pháp như sau:

while (điều_kiện) {
    Khối lệnh
}

• điều_kiện: trong khi điều_kiện này còn đúng, vòng lặp sẽ còn tiếp tục.
• khối lệnh: sẽ thực hiện công việc trong vòng lặp.

Ví dụ:

while (i < 10) {
    text += i + "</br>";
    i++;
}

Với câu lệnh trên, điều kiện sẽ được kiểm tra trước khi thực hiện khối lệnh, tức là có thể trong một số trường hợp khối lệnh có thể không được thực hiện lần nào.

Để thực hiện khối lệnh ít nhất một lần ta có một cú pháp riêng đối với vòng lặp while. Đó là do...while cú pháp như sau:

do {
    Khối lệnh
}
while (điều_kiện);

ví dụ

do {
    text += i + "</br>";
    i++;
}
while (i < 10);

Dễ hiểu với vòng lặp này là nó sẽ thực thi khối lệnh trước khi vào điều kiện trong while. Vòng lặp này thích hợp với công việc yêu cầu việc thực hiện công việc trước khi kiểm tra.

Trong bài sau mình sẽ giới thiệu đến bạn Chuyển đổi kiểu dữ liệu trong JavaScript