Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Vòng Lặp(Loop) Trong Javascript

Vòng Lặp(Loop) Trong Javascript


Ngày 29 Tháng 4 Năm 2020

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng vòng lặp của ngôn ngữ lập trình Javascript trong trang web nhé.

Javascript Loop Là Gì?

Vòng lặp được sinh ra để giúp chúng ta giảm các hành động được lặp lại nhiều lần. Ví dụ khi bạn muốn xuất ra màn hình từ số 1 đến số 10 thì việc ghi từng số như vậy sẽ mất rất nhiều thời gian cũng như công sức. Do đó để giải quyết trường hợp trên thì bạn nên sử dụng vòng lặp.

JavaScript While Loop

Câu lệnh while trong javascript sẽ tạo ra vòng lặp để thực hiện khối mã bên trong {} khi điều kiện đúng. Để nắm rõ hơn bạn xem cú pháp bên dưới nhé:

 while(Điều Kiện){
   /* Thực thi mã khi điều kiện đúng */
}

Như bạn thấy, câu lệnh while sẽ kiểm tra điều kiện trước mỗi lần lặp của vòng lặp. Nếu điều kiện là true thì câu lệnh while sẽ được thực thi và sẽ dừng lại khi điều kiện false. Để hiểu rõ hơn thì chúng ta sẽ đi vào ví dụ hiển thị các số từ 0 tới 5 ở bên dưới nhé:

  let i = 0;
 while (i < 5) { /* Hiển thị 0,1,2,3,4*/
   console.log( i );
   i++;
 }

Bây giờ mình sẽ đi vào giải thích đoạn code phía trên nhé:

  • Đầu tiên chúng ta sẽ gọi một biến i với giá trị bằng 0 (Số đầu tiên ta muốn hiển thị ra màn hình).
  • Sau đó trước khi thực hiện mỗi vòng lặp thì câu lệnh while sẽ kiểm tra điều kiện biến i có nhỏ hơn 5 không.
  • Cứ mỗi khi thực hiện vòng lặp thì biến i sẽ tăng thêm một đơn vị bằng i++. Bạn có thể tham khảo thêm về cách sử dụng i++ ở đây nhé: Toán Tử Trong Javascript.
  • Khi biến i được cộng tới giá trị biến bằng 5 thì i < 5 sẽ có giá trị false. Lúc này vòng lặp sẽ dừng lại.

Ở đây mình có lưu ý nhỏ là khi bạn quên đặt i++ thì vòng lặp này sẽ lặp vô hạn đấy nhé. Ở đây mình có đặt đường dẫn nếu như bạn lỡ bị trường hợp này: Dừng Vòng Lặp

Mình sẽ đi vào ví dụ tiếp theo là hiển thị ra màn hình từ số 4 lùi về số 1 với điều kiện là while(i). Ở đây bạn có thể hiểu while(i) sẽ viết tắt cho while(i != 0):

  let i = 5;
 while (i) { /* Hiển thị 5,4,3,2,1*/
   console.log( i );
   i--;
 }

JavaScript Do-While Loop

Vòng lặp do-while tạo ra một vòng lặp thực thi khối mã bên trong dấu {} cho đến khi điều kiện sai. Ở đây thì mình có chú ý nhỏ là điểm khác biệt giữa whiledo-whiledo-while sẽ thực thi ít nhất một lần khối mã của chúng ta trước khi đi vào kiểm tra điều kiện. Để hiểu rõ hơn bạn xem cú pháp sau đây nhé:

 do{ 
/*Thực thi khối mã*/
} while (Điều kiện);

Để hiểu rõ hơn thì chúng ta cùng nhau đi vào tìm hiểu ví dụ thực tế bằng cách hiển thị ra màn hình từ số 0 đến số 4 ở phía bên dưới nhé:

 let so = 0;
 do {
      console.log('Số hiện tại là ' + so);
      so++;
 } while (so < 5);

Ở đây chúng ta đặt biến so với giá trị là 0 và cứ mỗi sau mỗi lần lặp thì nó sẽ tăng lên một đơn vị cho đến khi điều kiện sai thì dừng lại. Điểm đặc biệt là nó sẽ thực hiện ít nhất một lần khối mã của chúng ta và đây chính là điểm quan trọng nhất trong lệnh do-while nhé.

JavaScript For Loop

Câu lệnh for trong Javascript cho phép chúng ta tạo ra một vòng lặp với việc kết hợp ba biểu thức với nhau. Nó tuy hơi phức tạp so với hai vòng lặp trên nhưng thường xuyên được sử dụng để thực hiện vòng lặp vì tính chất chặt chẽ của nó. Để hiểu rõ hơn bạn xem cú pháp bên dưới nhé:

 for (bắt đầu; điều kiện; bước nhảy){
/*Thực thi khối mã*/
}

Ở đây mình xin giải thích sơ qua 3 biểu thức trên là:

  • Bắt đầu: Biểu thức khởi tạo này chỉ được thực hiện một lần trong suốt quá trình lặp và thông thường là chúng ta sẽ khai báo tên, giá trị biến ở biểu thức này.
  • Điều kiện: Cũng giống y như hai vòng lặp trên nó dùng để kiểm tra tính đúng sai mà biểu thức ta đưa vào. Nếu đúng thì thực hiện tiếp vòng lặp còn nếu sai thì sẽ dừng vòng lặp. Mình có lưu ý nhỏ là khi bạn không thiết lập điều kiện cho vòng lặp for thì nó sẽ mặc định điều kiện này luôn đúng.
  • Bước nhảy: Nó giúp chúng ta cập nhật giá trị của biến khởi tạo có thể tăng hoặc giảm bao nhiêu đơn vị tùy vào mục đích của bạn.

Bây giờ chúng ta sẽ đi vào ví dụ thực tế để hiểu cách nó hoạt động hơn nhé:

 for(let i = 0; i < 5; i++){ /*Kết quả sẽ hiển thị: 0,1,2,3,4*/
console.log(i);
}

  • Với i = 0: Chúng ta khai báo biển và khởi tạo vòng lặp.
  • Với i < 5: Kiểm tra điều kiện trước mỗi lần lặp. Nếu diều kiện sai sẽ dừng vòng lặp.
  • Với console.log(i): Đây là khối mã mà sẽ được lặp nếu điều kiện đúng.
  • Với i++: Sẽ tăng một đơn vị giá trị của biến i sau khi thực hiện mỗi vòng lặp.

Ở đây mình giải thích thêm một tí là giả sử chúng ta chưa biết về vòng lặp thì ta cũng có thể sử dụng toán tử điều kiện để xuất ra màn hình từ số 0 tới số 4 bằng cách sau đây:

 /* Khởi tạo vòng lặp */
 let i = 0
 /* Kiểm tra điều kiện → Đúng thì thực thi khối mã và i++(i=1) */
 if (i < 5) { console.log(i); i++ } /*Kết quả: 0*/
 /* Kiểm tra điều kiện → Đúng thì thực thi khối mã và i++(i=2) */
 if (i < 5) { console.log(i); i++ } /*Kết quả: 1*/
 /* Kiểm tra điều kiện → Đúng thì thực thi khối mã và i++(i=3) */
 if (i < 5) { console.log(i); i++ } /*Kết quả: 2*/
 /* Kiểm tra điều kiện → Đúng thì thực thi khối mã và i++(i=4) */
 if (i < 5) { console.log(i); i++ } /*Kết quả: 3*/
 /* Kiểm tra điều kiện → Đúng thì thực thi khối mã và i++(i=5) */
 if (i < 5) { console.log(i); i++ } /*Kết quả: 4*/
 /*Lúc này i = 5 thì điều kiện i < 5 sẽ false.*/

Ở đây mình cũng sẽ giới thiệu thêm cho bạn về cách sử dụng var(biến toàn cục) và let(biến cục bộ) khi sử dụng với vòng lặp for. Đối với var thì bạn có thể sử dụng biến khởi tạo khi vòng lặp kết thúc (Nghĩa là nó sẽ lấy giá trị cuối cùng của biến khởi tạo trong vòng lặp) còn với let thì sẽ hiển thị lỗi nếu chúng ta muốn sử dụng biến khởi tạo bên ngoài vòng lặp.

Bây giờ chúng ta sẽ đi vào khởi tạo biến với từ khóa let ở phía bên dưới nhé:

 for (let soDem = 1; soDem < 5; soDem++) {
     console.log('Bên trong vòng lặp' + soDem );
 }
 console.log('Bên ngoài vòng lặp:' + soDem);

Thì bạn có thể hình ảnh kết quả ở bên dưới để hiểu hơn nhé:

Sử dụng let trong vòng lặp Javascript

Bây giờ chúng ta thử khởi tạo biến với từ khóa var để xem kết quả sao nhé:

 for (var soDem = 1; soDem < 5; soDem++) {
     console.log('Bên trong vòng lặp' + soDem );
 }
 console.log('Bên ngoài vòng lặp:' + soDem);

Bạn xem kết quả ở hình ảnh bên dưới nhé:

Sử dụng var trong vòng lặp Javascript

For Loop Shorthand Javascript

Chúng ta có thể rút ngắn bằng cách khai báo biến khởi tạo ở ngoài vòng lặp. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

 let i = 0; /* Chúng ta khai báo và gán giá trị cho biến khởi tạo*/
for(; i < 5; i++) { /* Chúng ta không cần khai báo biến khởi tạo nữa*/
console.log(i);
}

Bạn cũng có thể khai báo bước nhảy trong vòng lặp bằng ví dụ sau đây nhé:

 let i = 0; 
for(; i < 5;) {
  console.log(i++);
}

JavaScript Break Trong Vòng Lặp

Thông thường vòng lặp chỉ dừng lại khi điều kiện của nó sai. Nhưng chúng ta cũng có thể đặt thêm điều kiện để thực hiện lệnh dừng vòng lặp dựa theo mục đích của mình. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

 for( i = 0; i < 5; i ++) { 
  if(i === 3)  {
    break;
   }
   console.log(i);
}

Và dưới đây là kết quả nhé:

Dừng Vòng Lặp Bằng Break

Như bạn thấy khi giá trị của biến mà bằng 3 thì lệnh break; sẽ dừng vòng lặp ngay lặp tức nên kết quả ngoài màn hình của chúng ta là 0,1,2.

JavaScript Continue Trong Vòng Lặp

Câu lệnh continue sẽ bỏ qua lần lặp hiện tại của một vòng lặp và chuyển sang vòng lặp tiếp theo. Nó cũng khá giống câu lệnh break là dừng lại vòng lặp nhưng continue không dừng hoàn toàn vòng lặp mà cho phép tiếp tục thực hiện vòng lặp tiếp theo. Để hiểu rõ hơn bây giờ chúng ta xem ví dụ sau đây nhé:

 for( i = 0; i < 5; i ++) { 
  if(i === 3)  {
    continue;
   }
   console.log(i);
}

Và bên dưới là kết quả nhé:

Dừng Vòng Lặp Bằng Continue

Như bạn thấy thì khi giá trị của biến i mà bằng 3 thì nó sẽ bỏ qua và chuyển sang vòng lặp tiếp theo.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng vòng lặp trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!