Các loại vòng lặp cơ bản nhất trong Javascript và cách biên dịch chúng bằng tay.
18:16 | 03.09.2021 | Posted By: admin

|Hi! Xin chào anh em, lại gặp nhau trong bài mới có tên là các vòng lặp cơ bản trong Javascript.
Như tiêu đề, mình sẽ giới thiệu cho anh em hiểu rõ về vòng lặp để anh em có thể dễ dàng áp dụng vào sản phẩm mà mình code.


1. Vòng lặp là gì
- Mình cùng nhau lan man lý thuyết suông xíu nhé, có những công việc ngoài cuộc sống hay lặp đi lặp lại nhiều lần mà anh em hay để ý.
Ví dụ như: Cái việc anh em đi học thường ngày, thì các bước để anh em từ nhà đến trường gồm những công việc (CNTT gọi là tác vụ) sau: tắm rửa, thay đồ, ăn cơm, chạy xe đến trường, bắt đầu học, tan học, về nhà. Mà việc này anh em thường lặp đi lặp lại trong 1 năm học gọi là giới hạn của vòng lặp. Mình ví dụ là đại khái là vậy cho anh em dễ hiểu.
- Trong lập trình vẫn vậy, vòng lặp thường lặp lại một số tác vụ nào đó. Ví dụ như: đếm số lượng nè, tính tổng đơn hàng nè...và nhiều nhiều thứ nữa... Nào chúng mình đi đào bới một số vòng lặp cơ bản sau nhé !


2. Các loại vòng lặp trong Javascript
◕ Vòng lặp for:
- Cú pháp:

for(var i=0; i<giới_hạn; i++){
//Tác vụ trong này
}


- Để mình ví dụ dễ hiểu về cuộc sống như này:

for(var i = 0; i<tong_so_ngay_di_hoc; i++){
  tam_rua;
  thay_do;
  an_com;
  chay_xe_den_truong;
  tan_hoc;
  chay_xe_ve_nha;
}
//var i = 0: Ta bắt đầu từ 0;
//i<tong_so_ngay_di_hoc: điều kiện dừng vòng lặp;
//i++ <=> i = i + 1; Tức mỗi lần lặp i sẽ tăng thêm 1 đơn vị
//Những công việc trong block vòng lặp sẽ được lặp lại theo điều kiện khai báo bên trong cặp ngoặc for

- Rồi ! Ví von như vậy, còn trong code là như nào mình cùng tìm hiểu ví dụ sau !
Ví dụ: In ra 100 lần câu ANH THÍCH EM ! và gửi cho crush. Không phải như anh em nghĩ đâu ! Chúng ta không thể nào copy console.log('ANH THÍCH EM !) và dán 100 lần được. Mà ta sẽ làm như sau:

for(let i = 0; i<100; i++){
  console.log('ANH THÍCH EM !');
}
//Anh em hãy thử nhé;

Vòng lặp while.
- Cú pháp:

let i = 0;
while(điều_kiện_để_lặp){
 //Code xử lý
}

Ví dụ: In ra 3 lần câu 'ANH THÍCH EM' và mình sẽ giải thích cho anh em hiểu.

let i = 0;
while(i<3){
  console.log('ANH THÍCH EM !');
  i++;
}


- Về tác dụng thì như for. Về bản chất thì code bên trong block sẽ được chạy sau khi kiểm tra điều kiện lặp. Hơi mơ hồ đúng không. Khi trình duyệt dịch từ dòng code này từ trên xuống dưới nó sẽ dịch như sau:
Ban đầu ta cho i = 0 làm mốc đi.
Lặp lần 1 nè: 
+ Đem i vào ngoặc so sánh: i = 0, mà 0 < 3 (0 nhỏ hơn 3 mà đúng không) => Chạy code bên trong block.
+ In ra chữ 'ANH THÍCH EM' .
+ tăng giá trị i lên = 1.

Lặp lần 2 nè: 
+ Đem i vào ngoặc so sánh: i = 1, mà 1 < 3 (1 nhỏ hơn 3 mà đúng không) => Chạy code bên trong block.
+ In ra chữ 'ANH THÍCH EM' .
+ tăng giá trị i lên = 2.

Lặp lần 3 nè: 
+ Đem i vào ngoặc so sánh: i = 2, mà 2 < 3 (2 nhỏ hơn 3 mà đúng không) => Chạy code bên trong block.
+ In ra chữ 'ANH THÍCH EM' .
+ tăng giá trị i lên = 3.

Lặp lần 4 nè:
+ Đem i vào ngoặc so sánh: i = 3, mà 3 < 3  => Sai điều kiện (3 làm sao mà bé hơn 3 được đúng không). => Dừng tại đây. (Nói nôm na dễ hiểu ĐỂ đoạn CODE bên trong block while CHẠY thì i phải BÉ HƠN 3).


◕ Vòng lặp do_while:
- Cú pháp:

 

do{
// Code xử lý
} while (điều_kiện_lặp);

- Ví dụ: In ra 3 lần câu "ANH THÍCH EM".
 

let i = 0;
do{
  console.log("ANH THÍCH EM !");
  i++;
}while(i<3);

- Về bản chất thì code bên trong block sẽ được thực thi trước, sau đó mới đem đi so sánh điều kiện lặp sau. Mình sẽ dịch code như sau:
Ban đầu ta cho i = 0 làm mốc đi.
Lặp lần 1 nè: 
+ In ra chữ 'ANH THÍCH EM' ;
+ tăng giá trị i lên = 1;
+ Đem i vào ngoặc so sánh: i = 1, mà 1 < 3 => Lặp tiếp

Lặp lần 2 nè: 
+ In ra chữ 'ANH THÍCH EM' ;
+ tăng giá trị i lên = 2;
+ Đem i vào ngoặc so sánh: i = 2, mà 2 < 3 => Lặp tiếp

Lặp lần 3 nè: 
+ In ra chữ 'ANH THÍCH EM' ;
+ tăng giá trị i lên = 3;
+ Đem i vào ngoặc so sánh: i = 3, mà 3 < 3 => (Vô lý, 3 làm sao mà bé hơn 3 được đúng không) = > Dừng vòng lặp tại đây.

 

4. Kết luận:
- Ở trên mình đã liệt kê một số vòng lặp cơ bản trong Javascript. Nhưng anh em sẽ ít khi dùng vòng lặp while và do while ngoài dự án thực tế (Lưu ý: mình dùng từ ít dùng chứ không phải là không dùng nhé !). Đa phần các vòng lặp này ta sẽ được học sâu ở trường để tăng tư duy lập trình của anh em.

- Dự án thực tế đa phần là sử dụng các hàm lặp trong ES5 ES6 hoặc vòng lặp for forEach để tăng tính tiện dụng. Cho nên anh em cũng an tâm nhé ! Mình sẽ hướng dẫn từ từ các vòng lặp khác xịn sò hơn và hữu dụng hơn ở các bài viết sau. 
- Bài viết tiếp theo mình sẽ nói về MẢNGOBJECT. Anh em nhớ theo dõi nhé!

MỌI THẮC MẮC LIÊN HỆ ZALO: 0365.774.667

Bài Viết Khác
  • blog-img
    Dịch vụ thiết kế Website
    Ngày nay, khi mà hàng trăm triệu người Việt Nam nói riêng và thế giới nói chung đều sử dụng internet và xem đây là nơi lý tưởng để tìm kiếm thông tin thì việc sở hữu một website không còn là điều xa lạ gì thậm chí trong một số trường hợp nó còn là tiêu chuẩn bắt buộc đối với doanh nghiệp – công ty trong thời điểm cạnh tranh mang tính toàn cầu như hiện nay.
  • blog-img
    Dịch vụ thiết kế phần mềm
    Với sự phát triển của công nghệ như hiện nay thì việc chuyển đổi số trong các doanh nghiệp là đều tất yếu, là tiêu chí sống còn của doanh nghiệp, để thực hiện được điều này thì không thể thiếu các phần mềm hỗ trợ
  • blog-img
    Giải pháp CNTT cho Doanh nghiệp
    chúng tôi là những chuyên gia có nhiều kinh nghiệm, hiểu biết sâu về nhiều sản phẩm, giải pháp, chúng tôi đặt nhu cầu của khách hàng ở vị trí quan trọng nhất, giúp khách hàng tìm được giải pháp phù hợp nhất.
  • blog-img
    Về chúng tôi
    Trải qua hơn 3 năm hình thành và phát triển Công ty Nmsoft đã có những bước phát triển không ngừng trong việc thiết kế, hỗ trợ và phát triển website cho cá nhân, doanh nghiệp.
  • blog-img
    Liên hệ
    Liên với chúng bằng các thông tin sau
  • blog-img
    Bài 1: Giới thiệu ngôn ngữ Lập trình Python
    NGÔN NGỮ PYTHON được Guido van Rossum tạo ra cuối năm 1990.
messenger