Vòng lặp JavaScript dành cho người mới bắt đầu: Tìm hiểu những điều cơ bản

Đó là một ngày thứ Hai ảm đạm và bạn đang đi làm. Tất cả chúng ta đều biết thứ Hai buồn chán thế nào, phải không? Sếp của bạn tiếp cận bạn và nói, "Này, tôi nhận được 300 email chưa mở vào cuối tuần. Tôi muốn bạn mở từng email, ghi tên người gửi và xóa chúng sau khi hoàn thành."

Nhiệm vụ này có vẻ rất mệt mỏi nếu bạn cố gắng thực hiện thủ công. Điều tiếp theo bạn nghĩ đến có lẽ là lên Google và tìm phần mềm có thể tự động hóa quá trình này và giúp cuộc sống của bạn dễ dàng hơn, phải không?

Vâng, chúng tôi có những tình huống tương tự trong lập trình. Đôi khi bạn cần thực hiện các nhiệm vụ lặp đi lặp lại cho đến khi hoàn thành. Bạn giải quyết vấn đề này như thế nào? Trong JavaScript, chúng ta có cái mà chúng ta gọi là vòng lặp. Vòng lặp cho phép chúng ta giải quyết các tác vụ lặp đi lặp lại bằng cách giảm số lượng mã cần thiết để hoàn thành tác vụ.

Trong bài viết này, chúng ta sẽ thảo luận về vòng lặp là gì, nó hoạt động như thế nào và các phương pháp khác nhau mà chúng ta có thể sử dụng để áp dụng nó trong các chương trình của mình.

Vòng lặp là gì?

Vòng lặp được sử dụng trong JavaScript để thực hiện các hành động lặp lại một cách dễ dàng. Chúng dựa trên một điều kiện trả về đúng hoặc sai.

Điều kiện là một biểu thức phải được thông qua để duy trì vòng lặp. Vòng lặp chạy khi các điều kiện đã chỉ định trả về giá trị đúng và dừng khi chúng trả về giá trị sai.

Khi nào bạn cần sử dụng vòng lặp?

Vòng lặp rất hữu ích để thực hiện các nhiệm vụ lặp đi lặp lại. Ví dụ: sử dụng vòng lặp sẽ rút ngắn mã cần thiết để giải quyết vấn đề. Nó tiết kiệm thời gian, tối ưu hóa việc sử dụng bộ nhớ và cải thiện tính linh hoạt.

Ý nghĩa thực sự của vòng lặp còn vượt ra ngoài việc giảm độ dài mã và hạn chế sự lặp lại. Chúng cũng hữu ích khi làm việc với dữ liệu trong một mảng, đối tượng hoặc các cấu trúc khác. Hơn nữa, vòng lặp thúc đẩy tính mô-đun mã bằng cách giảm mã lặp lại và tăng khả năng sử dụng lại mã, điều này giúp tạo mã có thể được sử dụng trong các phần khác nhau của dự án.

Các loại vòng lặp

Có hai loại vòng lặp chính: vòng lặp kiểm soát đầu vào và vòng lặp kiểm soát đầu ra.

Vòng lặp kiểm soát mục nhập đánh giá điều kiện tại "lối vào của vòng lặp" trước khi thực thi phần thân vòng lặp. Nếu điều kiện đúng, cơ thể sẽ chạy. Nếu không, cơ thể không chạy. Vòng lặp for và while là ví dụ về vòng lặp kiểm soát mục nhập.

Vòng lặp được kiểm soát thoát tập trung vào phần thân vòng lặp trong điều kiện kiểm tra, đảm bảo rằng phần thân vòng lặp được thực thi ít nhất một lần trước khi đánh giá điều kiện kiểm tra. Một ví dụ điển hình về vòng lặp được kiểm soát Thoát là vòng lặp do-while .

Hãy xem xét một số ví dụ về vòng lặp kiểm soát mục nhập:

Trong khi lặp lại

Vòng lặp while có cú pháp như sau.

 while (condition) { // loop's body }

Danh sách sau đây giải thích chức năng của vòng lặp while:

1. Vòng lặp while lấy điều kiện kiểm tra bên trong dấu ngoặc đơn.

   
   

2. Chương trình kiểm tra điều kiện để xem nó đạt hay không đạt.

   
   

3. Mã trong phần thân vòng lặp sẽ thực thi miễn là điều kiện được đáp ứng.

   
   

4. Chương trình chấm dứt hoạt động khi điều kiện kiểm tra không thành công.

Dưới đây, hãy lấy một ví dụ thực tế về vòng lặp while :

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. Đoạn mã ở trên khởi tạo các biến "arr", "i" và "num".

   
   

2. Biến " arr" là một mảng chứa các giá trị vượt qua điều kiện kiểm tra.

   
   

3. Biến "i" theo dõi từng mức tăng sau mỗi lần lặp.

   
   

4. Biến "số" so sánh giá trị của "i" với giá trị của nó (5) sau mỗi lần lặp.

   
   

5. Mã trong phần thân vòng lặp sẽ đẩy từng giá trị của "i" sau mỗi lần lặp vào mảng miễn là "i" nhỏ hơn hoặc bằng "number".

   
   

6. Khi giá trị hiện tại của "i" không đáp ứng điều kiện, trong trường hợp này, giá trị của "i" lớn hơn "số" là 6, vòng lặp sẽ dừng chạy.

   
   

Phương thức push() là một hàm JavaScript tích hợp để thêm một mục mới vào cuối mảng.

đầu ra

 [1, 2, 3, 4, 5]

vòng lặp do-while

Vòng lặp do-while gần giống với vòng lặp while; sự khác biệt chính giữa vòng while và vòng lặp do-while là vòng lặp do-while đảm bảo việc thực thi mã ít nhất một lần trước khi đánh giá điều kiện của vòng lặp; vòng lặp do-while có cú pháp sau đây.

 do { // loop's body } while (//condition)

Vòng do-while là một ví dụ điển hình về vòng lặp được kiểm soát lối ra. Điều này nằm ở chỗ các vòng lặp kiểm soát lối ra ưu tiên phần thân vòng lặp trước điều kiện kiểm tra, bây giờ chúng ta hãy đi sâu vào một ví dụ mã thực tế sử dụng vòng lặp do-while .

Ví dụ:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

Bây giờ, hãy chia nhỏ đoạn mã này:

1. Chúng tôi đã khởi tạo biến "i" và "num".

   
   

2. Bảng điều khiển ghi lại giá trị của "i" (1) trước khi đánh giá tình trạng của vòng lặp.

   
   

3. Điều kiện được kiểm tra và giá trị của "i" tăng +1 sau mỗi lần lặp.

   
   

4. Vòng lặp kết thúc hoạt động khi "i" lớn hơn "num".

   
   

đầu ra

 1 2 3 4 5

Mặc dù vòng lặp do-while rất giống với vòng lặp while nhưng có những khác biệt nhỏ mà chúng ta cần lưu ý; hãy lấy một ví dụ khác so sánh sự khác biệt giữa vòng lặp while và do-while .

 let i = 5; let num = 4 while( i < num) { console.log(i) }

Vòng lặp while ở trên sẽ không trả về bất kỳ kết quả nào cho bảng điều khiển; bây giờ, tại sao lại như vậy?

1. Chúng tôi đã khởi tạo biến "i" và "num" với giá trị lần lượt là 5 và 4.

   
   

2. Điều kiện kiểm tra xem giá trị của "i" có nhỏ hơn "num" hay không.

   
   

3. Nếu đúng, nó sẽ ghi lại từng giá trị tương ứng.

   
   

4. Vì giá trị ban đầu của "i" vượt quá giá trị của "num" nên vòng lặp không bao giờ chạy.

   
   

Bây giờ, hãy lấy một ví dụ tương tự với vòng lặp do-while .

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

đầu ra

 5

Vòng lặp do-while đảm bảo việc thực thi khối mã, trả về 5 vào bảng điều khiển, mặc dù ban đầu "i" có giá trị cao hơn "num" nhưng nó vẫn được ghi vào bảng điều khiển một lần. Biểu diễn này cho bạn thấy sự khác biệt về chức năng giữa vòng lặp do-while và while .

Vòng lặp cho

Vòng for loop là một loại vòng lặp độc đáo và là một trong những vòng lặp được các lập trình viên sử dụng phổ biến nhất, for loop là vòng lặp chạy một khối mã trong một số lần cụ thể tùy thuộc vào một điều kiện. Vòng lặp for có cú pháp sau đây.

 for (Expression1...; Expression2....; Expression3...{    //code block }

Biểu thức 1: Phần này của for loop còn được gọi là vùng khởi tạo ; đó là điểm bắt đầu của for loop và là vùng xác định biến đếm. Biến đếm được sử dụng để theo dõi số lần vòng lặp chạy và lưu trữ dưới dạng giá trị.

Biểu thức 2: Đây là phần thứ hai của vòng lặp; phần này xác định câu lệnh điều kiện sẽ thực thi vòng lặp.

Biểu thức 3: Đây là nơi vòng lặp kết thúc; biến đếm trong phần này cập nhật giá trị của nó sau mỗi lần lặp bằng cách tăng hoặc giảm giá trị như được chỉ định trong điều kiện.

Hãy đi sâu vào một ví dụ sử dụng vòng lặp for.

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

Từ đoạn mã trên, chúng ta hãy cùng nhau chia nhỏ nó.

1. Đầu tiên, chúng ta khởi tạo biến đếm " i" với giá trị bằng 0.

   
   

2. Tiếp theo, chúng tôi đã tạo câu lệnh có điều kiện để giữ cho mã tiếp tục chạy.

   
   

3. Chúng tôi so sánh giá trị của "i" với 100; nếu nó vượt qua bài kiểm tra này, "Hello World" sẽ được ghi lại.

   
   

4. Quá trình này lặp lại trong khi bộ đếm tăng +1 sau mỗi lần lặp.

   
   

5. Vòng lặp kết thúc khi giá trị của bộ đếm đạt 100.

   
   

đầu ra

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

vòng lặp cho mỗi

Vòng lặp for-each là một phương thức trong JavaScript di chuyển qua một mảng và áp dụng hàm gọi lại trên từng phần tử trong mảng đó; hàm gọi lại chỉ đơn giản là một hàm khác được truyền dưới dạng tham số vào hàm. Hàm gọi lại hoạt động bằng cách chạy tuần tự sau khi hàm chính được thực thi xong.

Hãy xem xét cú pháp cơ bản của vòng lặp for-each .

 array.forEach(function(currentValue, index, arr))

Đoạn mã được cung cấp ở trên giải thích hoạt động của vòng lặp for-each .

• Vòng lặp này chấp nhận ba tham số, đó là giá trị hiện tại, chỉ mục và mảng.

• Giá trị hiện tại biểu thị giá trị hiện tại của phần tử trong mảng.

• Chỉ mục là một tham số tùy chọn cho bạn biết vị trí được đánh số của phần tử hiện tại trong mảng đó.

• Mảng là một tham số tùy chọn khác cho bạn biết phần tử đó thuộc về mảng nào.

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

Hãy chia nhỏ ví dụ trên:

1. Chúng tôi đã khởi tạo một mảng có tên biến "myArray" và lưu trữ nó với các số nguyên từ 1 đến 5.

   
   

2. Phương thức mảng for-each lấy ba tham số và áp dụng hàm gọi lại trên mảng.

   
   

3. Đường thẳng này; arr[index] = num * 2 nhân giá trị của phần tử hiện tại với 2 và gán giá trị trả về cho chỉ mục của phần tử hiện tại.

   
   

Hãy lưu ý: phương thức mảng for-each mảng không trả về một mảng mới; đúng hơn, nó sửa đổi mảng ban đầu và trả về nó.

đầu ra

 [2, 4, 6, 8, 10]

Vòng lặp For... In và For... trong JavaScript là gì?

Các vòng lặp for... in và for... of rất hữu ích khi lặp lại các đối tượng có thể lặp lại; các đối tượng có thể lặp đề cập đến bất kỳ phần tử nào có khả năng lặp lại, các ví dụ phổ biến về các đối tượng có thể lặp là mảng, chuỗi, bộ, v.v.

for... in và for... of giống nhau ở cách chúng lặp/di chuyển qua các đối tượng, sự khác biệt chính giữa chúng được thể hiện ở cách chúng trả về các giá trị.

cho... trong Vòng lặp

Vòng lặp for... in rất hữu ích khi bạn cần trích xuất (các) khóa/thuộc tính từ một đối tượng và các thuộc tính tương ứng của nó từ đối tượng cha. Vòng lặp for... in đôi khi có thể lặp qua một đối tượng theo cách khác với cách nó được xác định trong đối tượng cụ thể đó; hãy lấy một ví dụ về hoạt động của vòng lặp for... in .

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

Trong ví dụ trên, chúng ta đã định nghĩa một đối tượng có tên là sinh viênScores chứa một số tên sinh viên và điểm số tương ứng của họ. Bằng cách sử dụng for... in , chúng tôi chỉ có thể truy xuất tên của các học sinh, đại diện cho các khóa của đối tượng sinh viênScores và lưu trữ chúng trong một mảng bằng cách sử dụng phương thức push() .

đầu ra

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

cho... của vòng lặp

Vòng lặp for... of là một loại vòng lặp đặc biệt lặp qua các giá trị của các đối tượng có thể lặp lại như mảng, chuỗi, bản đồ, v.v., các vòng lặp for... of không liên quan đến khóa hoặc thuộc tính của một đối tượng , thay vào đó chúng chỉ hiển thị mức độ ưu tiên trên các giá trị.

Vòng lặp for... of không thể lặp qua các đối tượng thông thường và sẽ đưa ra lỗi vì chúng không thể lặp lại được. Hãy lấy một ví dụ sử dụng vòng lặp for.. of .

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

Tóm lại, các vòng lặp for... in và for... of là một cách tuyệt vời để lặp qua các đối tượng có thể lặp lại; sự khác biệt chính là vòng lặp for... in trả về khóa của một Đối tượng trong khi vòng lặp for... of chỉ trả về giá trị của các đối tượng có thể lặp lại.

Vòng lặp vô hạn là gì và chúng ta có thể tránh nó như thế nào?

Vòng lặp vô hạn đề cập đến một vòng lặp tiếp tục chạy vô thời hạn; điều này xảy ra khi một vòng lặp không có điều kiện thoát được xác định. Vòng lặp vô hạn rất nguy hiểm vì chúng có thể làm hỏng trình duyệt của bạn và dẫn đến các hành động không mong muốn trong chương trình của bạn.

 // infinite loop sample while (true) { console.log("keep on running") }

Để ngăn chặn các vòng lặp vô hạn trong chương trình của bạn, hãy luôn đảm bảo rằng có một điều kiện thoát được xác định trong vòng lặp của bạn.

Phần kết luận

Cảm ơn bạn rất nhiều vì đã xem đến cuối bài viết này, vòng lặp trong Javascript là một khái niệm quan trọng mà mọi nhà phát triển cần nắm vững vì nó rất có giá trị trong việc tạo ra một chương trình tốt và có thể tối ưu hóa. Tôi tin rằng với bài viết này, bạn sẽ có thể hiểu được những điều cơ bản và phức tạp của việc sử dụng vòng lặp trong chương trình của mình.