Vòng lặp while trong JavaScript: Cú pháp, Ví dụ, Cách khắc phục vòng lặp vô hạn và Mẹo tối ưu hoá

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

JavaScript là một ngôn ngữ lập trình vô cùng quan trọng trong phát triển web. Trong số các tính năng của nó, câu lệnh while là một cấu trúc cơ bản được dùng để lặp lại một quá trình miễn là điều kiện được thỏa mãn.

Trong bài viết này, chúng tôi sẽ giải thích chi tiết câu lệnh while của JavaScript — từ cách sử dụng cơ bản đến các ví dụ thực tế và các mẹo tránh lỗi. Bài viết được viết cho người mới bắt đầu đến trình độ trung cấp, và chúng tôi sẽ đi qua các ví dụ mã thực tế một cách rõ ràng và dễ hiểu.

1.1 Mục đích của Bài viết này

• Hiểu cú pháp cơ bản: Học cách sử dụng câu lệnh while.
• Ví dụ thực tế: Nghiên cứu các ví dụ hữu ích trong phát triển thực tế.
• Tránh lỗi phổ biến: Học cách ngăn ngừa các sai lầm thường gặp như vòng lặp vô hạn.

1.2 Tại sao câu lệnh while lại quan trọng?

Vòng lặp là một trong những tính năng được sử dụng thường xuyên nhất trong lập trình. Câu lệnh while đặc biệt hữu ích trong các tình huống sau:

• Số lần lặp không xác định: Kiểm tra đầu vào của người dùng hoặc xử lý dữ liệu cho đến khi đáp ứng một điều kiện.
• Xử lý động: Kiểm soát các hệ thống xử lý dữ liệu thời gian thực hoặc quản lý các hoạt ảnh.

Trong những kịch bản này, việc hiểu câu lệnh while của JavaScript là thiết yếu để xây dựng các chương trình hiệu quả.

2. Câu lệnh while là gì?

Câu lệnh while của JavaScript là một cấu trúc vòng lặp lặp lại một quá trình miễn là điều kiện được chỉ định đánh giá là đúng. Khi điều kiện trở thành sai, vòng lặp dừng lại.

Trong phần này, chúng ta sẽ giải thích cú pháp cơ bản của câu lệnh while và cách nó hoạt động.

2.1 Cú pháp cơ bản của câu lệnh while

Đầu tiên, hãy xem cú pháp cơ bản của một câu lệnh while.

Cú pháp:

while (condition) {
  // Code to run
}

Giải thích từng phần:

1. Điều kiện:
   * Xác định điều kiện để tiếp tục vòng lặp. Miễn là điều kiện này đúng, mã bên trong vòng lặp sẽ chạy.

2. Mã cần thực thi:
   * Viết đoạn mã bạn muốn thực hiện trong khi điều kiện được thỏa mãn.

2.2 Ví dụ cơ bản của câu lệnh while

Trong ví dụ dưới đây, các số từ 1 đến 5 sẽ được in ra theo thứ tự.

Ví dụ mã:

let i = 1; // Set the initial value
while (i <= 5) { // Condition
  console.log(i); // Output the value
  i++; // Increment the counter
}

Kết quả:

1
2
3
4
5

Giải thích:

1. Gán giá trị 1 cho biến i làm giá trị khởi đầu.
2. Nếu điều kiện i <= 5 đúng, vòng lặp sẽ chạy.
3. console.log(i) in ra giá trị hiện tại của i.
4. i++ tăng i lên 1 mỗi lần, và vòng lặp sẽ kết thúc khi điều kiện trở thành sai.

2.3 Cách hoạt động của câu lệnh while

Một vòng lặp while diễn ra theo luồng sau:

1. Đánh giá điều kiện.
2. Nếu điều kiện đúng, thực thi mã bên trong vòng lặp.
3. Sau khi mã chạy xong, đánh giá lại điều kiện.
4. Khi điều kiện trở thành sai, thoát khỏi vòng lặp.

Nếu bạn hình dung luồng này, nó sẽ trông như sau:

1. Evaluate condition → true → run code → evaluate condition again
2. Evaluate condition → false → loop ends

2.4 Cảnh báo: Nguy cơ vòng lặp vô hạn

Cảnh báo:
Một trong những điều quan trọng nhất cần chú ý khi sử dụng câu lệnh while là vòng lặp vô hạn.

Trong ví dụ dưới đây, điều kiện luôn đúng mãi mãi, vì vậy vòng lặp không bao giờ dừng lại.

Ví dụ vòng lặp vô hạn:

let i = 1;
while (i <= 5) {
  console.log(i);
  // Infinite loop because i++ was forgotten
}

Trong đoạn mã này, giá trị của i không bao giờ thay đổi, nên điều kiện i <= 5 luôn đúng và chương trình không bao giờ kết thúc.

Cách ngăn ngừa:
Đảm bảo phần thân vòng lặp thay đổi một gì đó để điều kiện cuối cùng sẽ trở thành sai.

3. Cách sử dụng cơ bản của câu lệnh while

Trong phần này, chúng ta sẽ giới thiệu các ví dụ cụ thể về việc sử dụng câu lệnh while của JavaScript và giải thích cách xử lý các tình huống khác nhau. Chúng ta sẽ bao quát mọi thứ từ các mẫu cơ bản đến các trường hợp thực tiễn hơn, để bạn có thể áp dụng chúng một cách dễ dàng trong các chương trình thực tế.

3.1 Ví dụ: Lặp lại một số lần cố định

Là mẫu cơ bản nhất, hãy xem một vòng lặp lặp lại một số lần đã chỉ định.

Ví dụ mã:

let count = 1; // Initial value
while (count <= 5) { // Condition
  console.log(`Count: ${count}`); // Display the count
  count++; // Increment the counter
}

Kết quả:

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

Các điểm chính:

• Biến count được cập nhật bên trong vòng lặp, vì vậy rõ ràng khi nào điều kiện sẽ trở thành sai.
• Điều này lý tưởng cho việc lặp lại đơn giản khi bạn muốn vòng lặp một số lần nhất định.

3.2 Ví dụ: Lặp lại cho đến khi đáp ứng một điều kiện

Câu lệnh while cũng rất phù hợp để lặp lại cho đến khi một điều kiện cụ thể được đáp ứng.

Ví dụ: Kiểm tra đầu vào người dùng
Vòng lặp này sẽ hiển thị lời nhắc cho đến khi người dùng nhập một số hợp lệ.

Ví dụ mã:

let input;
while (true) { // Start with a true condition
  input = prompt("Enter a number from 1 to 10:");
  if (input >= 1 && input <= 10) { // Exit if valid
    break;
  }
  alert("Invalid input. Please try again.");
}
console.log(`Entered number: ${input}`);

Các điểm chính:

• Điều kiện vòng lặp ban đầu luôn đúng, và nó sẽ thoát vào thời điểm thích hợp bằng cách sử dụng break.
• Mẫu này hữu ích cho việc kiểm tra đầu vào người dùng và xác thực dữ liệu.

3.3 Ví dụ: Xử lý các phần tử của mảng theo thứ tự

Đây là một ví dụ truy cập và xử lý mọi phần tử trong một mảng.

Ví dụ mã:

let fruits = ["Apple", "Banana", "Grape"];
let i = 0;
while (i < fruits.length) { // Use the array length as the condition
  console.log(`Fruit: ${fruits[i]}`);
  i++;
}

Kết quả:

Fruit: Apple
Fruit: Banana
Fruit: Grape

Các điểm chính:

• Các phần tử của mảng được xử lý tuần tự theo chỉ mục.
• Sử dụng i < fruits.length đảm bảo mọi phần tử đều được xử lý.

3.4 Ví dụ: Tiếp tục xử lý cho đến khi điều kiện trở thành sai

Trong ví dụ này, chúng ta sẽ giảm một số một nửa cho đến khi nó bằng 1 hoặc ít hơn.

Ví dụ mã:

let number = 100;
while (number > 1) { // Condition: number is greater than 1
  console.log(`Current value: ${number}`);
  number /= 2; // Halve the number
}

Kết quả:

Current value: 100
Current value: 50
Current value: 25
Current value: 12.5
Current value: 6.25
Current value: 3.125
Current value: 1.5625

Các điểm chính:

• Vòng lặp này tiếp tục cho đến khi điều kiện trở thành sai.
• Bằng cách giảm hoặc tăng một biến bên trong vòng lặp, bạn đảm bảo rằng nó sẽ cuối cùng dừng lại.

3.5 Sử dụng break và continue

Trong vòng lặp while, bạn có thể điều khiển luồng bằng break và continue.

break: Ví dụ để kết thúc vòng lặp

let i = 1;
while (i <= 10) {
  if (i === 5) break; // End the loop at 5
  console.log(i);
  i++;
}

Kết quả:

1
2
3
4

continue: Ví dụ để bỏ qua một điều kiện cụ thể

let i = 0;
while (i < 10) {
  i++;
  if (i % 2 === 0) continue; // Skip even numbers
  console.log(i);
}

Kết quả:

1
3
5
7
9

Các điểm chính:

• break: Thoát hoàn toàn khỏi vòng lặp.
• continue: Bỏ qua lần lặp hiện tại và chuyển sang lần lặp tiếp theo.

3.6 Tổng kết

Trong phần này, chúng ta đã giới thiệu các mẫu sử dụng cơ bản và các ví dụ thực tiễn của câu lệnh while trong JavaScript.

Những điểm cần nhớ:

• Nó phù hợp cho việc lặp lại một số lần cố định, cũng như lặp lại cho đến khi một điều kiện được đáp ứng.
• Chúng ta đã đề cập đến các ví dụ thực tiễn như xử lý các phần tử của mảng và thay đổi giá trị số.
• Sử dụng break và continue cho phép kiểm soát linh hoạt luồng của vòng lặp.

4. Vòng lặp vô hạn và cách tránh chúng

Khi sử dụng câu lệnh while của JavaScript, bạn cần cẩn thận với vòng lặp vô hạn. Vòng lặp vô hạn xảy ra khi điều kiện luôn đúng và quá trình lặp lại mãi mãi. Trong phần này, chúng tôi sẽ giải thích nguyên nhân gây ra vòng lặp vô hạn và cách ngăn chặn chúng một cách chi tiết.

4.1 Vòng Lặp Vô Hạn Là Gì?

Vòng lặp vô hạn là trạng thái trong đó vòng lặp không bao giờ dừng lại vì điều kiện thoát không bao giờ được đáp ứng. Nó có thể khiến chương trình không phản hồi hoặc trình duyệt bị treo.

4.2 Các Ví Dụ Về Vòng Lặp Vô Hạn

Ví dụ 1: Điều kiện thoát không bao giờ thay đổi

let count = 1;
while (count < 5) {
  console.log(count);
  // Infinite loop because count is not updated
}

Ví dụ 2: Điều kiện luôn đúng

while (true) { // The condition is always true
  console.log("Running an infinite loop");
}

4.3 Cách Ngăn Ngừa Vòng Lặp Vô Hạn

Để tránh vòng lặp vô hạn, hãy ghi nhớ các điểm sau khi viết mã.

1. Thiết Kế Điều Kiện Cẩn Thận

Thiết kế vòng lặp sao cho điều kiện sẽ chắc chắn trở thành sai.

Ví dụ cải tiến:

let count = 1;
while (count < 5) {
  console.log(count);
  count++; // Increase count so the condition changes
}

2. Làm Rõ Ràng Điều Kiện Thoát

Bằng cách khai báo rõ ràng một điều kiện thoát trong mã, bạn có thể kết thúc vòng lặp một cách an toàn.

Ví dụ sử dụng break:

let count = 1;
while (true) {
  console.log(count);
  if (count >= 5) { // Specify a clear exit condition
    break; // Exit the loop
  }
  count++;
}

3. Thêm Giới Hạn Thời Gian Hoặc Giới Hạn Số Lần Thử

Ngoài việc kiểm tra điều kiện, việc thêm giới hạn thời gian hoặc số lần thử có thể ngăn ngừa các tình huống bất ngờ.

Ví dụ: Xử lý với giới hạn số lần thử

let attempts = 0; // Attempt counter
while (attempts < 10) {
  if (Math.random() > 0.8) { // Exit if the condition is met
    console.log("Success!");
    break;
  }
  console.log("Retrying...");
  attempts++;
}

4.4 Ví Dụ Thực Tế: Kiểm Tra Đầu Vào Người Dùng

Dưới đây là một ví dụ lặp lại quá trình cho đến khi người dùng nhập giá trị hợp lệ.

Ví dụ mã:

let input;
while (true) {
  input = prompt("Enter a number between 1 and 10:");
  if (input >= 1 && input <= 10) { // Exit if the input is valid
    break;
  }
  alert("Invalid input. Please try again.");
}
console.log(`Entered number: ${input}`);

Các điểm chính:

• Vòng lặp kết thúc bằng câu lệnh break khi điều kiện được đáp ứng.
• Bằng cách quản lý rủi ro vòng lặp vô hạn một cách thích hợp, bạn có thể chạy quá trình một cách an toàn.

4.5 Sử Dụng Công Cụ Gỡ Lỗi

Ngay cả khi có lỗi trong mã của bạn, bạn có thể kiểm tra những gì đang xảy ra bằng cách sử dụng debugger trong công cụ dành cho nhà phát triển hoặc bằng cách thêm console.log().

Ví dụ: Kiểm tra với đầu ra gỡ lỗi

let i = 0;
while (i < 5) {
  console.log(`Current value: ${i}`); // Debug output
  i++;
}

Bằng cách thêm đầu ra như vậy, bạn có thể xác minh trạng thái vòng lặp trong khi mã đang chạy.

4.6 Tóm Tắt

Trong phần này, chúng tôi đã giải thích các nguy hiểm của vòng lặp vô hạn và cách ngăn ngừa chúng.

Những điểm quan trọng:

• Vòng lặp vô hạn xảy ra khi điều kiện luôn đúng và không bao giờ thay đổi.
• Bạn có thể ngăn ngừa vòng lặp vô hạn bằng cách xác định rõ ràng một điều kiện thoát và cập nhật các biến một cách thích hợp.
• Sử dụng break để thoát vòng lặp một cách an toàn khi cần.

5. So Sánh Với Câu Lệnh do…while

Trong JavaScript, ngoài câu lệnh while, còn có một cấu trúc vòng lặp khác gọi là câu lệnh do…while. Trong phần này, chúng tôi sẽ so sánh hai cấu trúc, giải thích sự khác nhau của chúng và chỉ ra khi nào nên sử dụng mỗi loại.

5.1 Cú Pháp Cơ Bản của Câu Lệnh do…while

Câu lệnh do…while là một cấu trúc vòng lặp mà luôn thực thi mã ít nhất một lần trước khi đánh giá điều kiện.

Cú pháp:

do {
  // Code to run
} while (condition);

Các điểm chính:

• Vì mã được chạy trước, nó thực thi ít nhất một lần ngay cả khi điều kiện sai.
• Điều kiện được đánh giá sau khi mã chạy.

5.2 Sự khác biệt so với câu lệnh while

5.3 Ví dụ về việc sử dụng do…while

Dưới đây là một ví dụ về việc xác thực đầu vào người dùng.

Ví dụ mã:

let input;
do {
  input = prompt("Enter a number from 1 to 10:");
} while (input < 1 || input > 10);

console.log(`Entered number: ${input}`);

Các điểm chính:

• Lời nhắc được hiển thị ít nhất một lần.
• Miễn là đầu vào không đáp ứng điều kiện, nó sẽ tiếp tục nhắc người dùng.

Nếu bạn viết lại đoạn này bằng while:

let input = prompt("Enter a number from 1 to 10:");
while (input < 1 || input > 10) {
  input = prompt("Enter a number from 1 to 10:");
}
console.log(`Entered number: ${input}`);

So sánh:

• Câu lệnh while: Bạn cần một lời nhắc ban đầu bên ngoài vòng lặp vì điều kiện được kiểm tra trước.
• Câu lệnh do…while: Vì lần chạy đầu tiên được đảm bảo, mã có thể đơn giản hơn.

5.4 Khi nào nên sử dụng do…while

1. Khi bạn phải chạy quy trình ít nhất một lần

• Các tình huống như xác thực biểu mẫu, nơi bạn cần chạy quy trình ít nhất một lần.

1. Khi số lần lặp được xác định một cách động

• Các trường hợp bạn không biết trước số lần lặp và muốn tiếp tục xử lý cho đến khi một điều kiện được đáp ứng.

5.5 Tiêu chí lựa chọn giữa while và do…while

5.6 Ví dụ thực tế: Xác thực mật khẩu nhập vào

Ví dụ: Xác thực mật khẩu bằng do…while

let password;
do {
  password = prompt("Enter a password with at least 6 characters:");
} while (password.length < 6);

console.log("Password has been set!");

Mã này lặp lại cho đến khi người dùng nhập mật khẩu có ít nhất 6 ký tự. Vì kiểm tra phải chạy ít nhất một lần, do…while là lựa chọn phù hợp.

Nếu bạn viết đoạn này bằng while:

let password = "";
while (password.length < 6) {
  password = prompt("Enter a password (at least 6 characters):");
}
console.log("Password has been set!");

Trong trường hợp này, bạn cần khởi tạo giá trị đầu tiên là một chuỗi rỗng, điều này làm cho mã hơi dài hơn.

5.7 Tóm tắt

Trong phần này, chúng tôi đã giải thích sự khác biệt giữa while và do…while và cách chọn đúng câu lệnh.

Những điểm quan trọng:

• Câu lệnh while: Đánh giá điều kiện trước và chỉ chạy mã nếu điều kiện đúng.
• Câu lệnh do…while: Đánh giá điều kiện sau cùng và chạy mã ít nhất một lần.
• Việc chọn câu lệnh phù hợp dựa trên tình huống giúp bạn viết mã sạch hơn và hiệu quả hơn.

6. Ví dụ thực tế: Xác thực đầu vào người dùng

Trong phần này, chúng tôi sẽ giới thiệu các ví dụ thực tế về xác thực đầu vào người dùng bằng câu lệnh while và câu lệnh do…while của JavaScript. Xử lý lặp lại để đảm bảo người dùng cung cấp thông tin đúng thường được sử dụng trong các ứng dụng web và xác thực biểu mẫu.

6.1 Xác thực đầu vào số

Ví dụ này liên tục hiển thị lời nhắc cho đến khi người dùng nhập một số trong phạm vi chỉ định.

Ví dụ mã (câu lệnh while):

let number = parseInt(prompt("Enter a number from 1 to 10:"));

while (isNaN(number) || number < 1 || number > 10) {
  alert("Invalid input. Please enter a number from 1 to 10.");
  number = parseInt(prompt("Enter a number from 1 to 10:"));
}

console.log(`Entered number: ${number}`);

Giải thích:

1. Lấy đầu vào người dùng bằng prompt.
2. isNaN(number) trả về true khi đầu vào không phải là số hợp lệ.
3. Nếu điều kiện không được đáp ứng, hiển thị cảnh báo và yêu cầu người dùng nhập lại.
4. Vòng lặp lặp lại cho đến khi điều kiện được thỏa mãn.

6.2 Xác thực độ dài mật khẩu

Ví dụ này lặp lại cho đến khi người dùng nhập mật khẩu đáp ứng điều kiện yêu cầu.

Ví dụ mã (câu lệnh do…while):

let password;

do {
  password = prompt("Enter a password with at least 6 characters:");
} while (password.length < 6);

console.log("Password has been set!");

Explanation:

1. The prompt is always shown at least once.
2. If the entered password is shorter than 6 characters, it requests input again.
3. The loop ends once the condition is met.

Key points:

• Using do…while allows you to skip the initial pre-check on the first input.
• In real applications, you can add more checks such as character types or special symbols.

6.3 Email Address Validation with Repeated Prompts

This example validates the email format using a regular expression.

Code example (while statement):

let email = "";
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Email regex pattern

while (!emailPattern.test(email)) {
  email = prompt("Enter a valid email address:");
  if (!emailPattern.test(email)) {
    alert("Invalid email format. Please try again.");
  }
}

console.log(`Entered email address: ${email}`);

Explanation:

1. Validate the email format using a regular expression.
2. If the input does not meet the condition, ask the user to re-enter.
3. The loop continues until the user enters a correctly formatted email address.

6.4 Input Validation with a Maximum Attempt Limit

This example avoids infinite loops by limiting the number of attempts.

Code example (while statement):

let username;
let attempts = 0; // Attempt counter
const maxAttempts = 3; // Maximum attempts

while (attempts < maxAttempts) {
  username = prompt("Enter your username:");
  if (username) {
    console.log(`Welcome, ${username}!`);
    break; // Exit loop if input is successful
  }
  attempts++; // Increase attempts
  alert(`Input is empty. Remaining attempts: ${maxAttempts - attempts}`);
}

if (attempts === maxAttempts) {
  console.log("Maximum attempts reached. Please try again later.");
}

Explanation:

1. Set a maximum number of attempts and stop looping after the limit is reached.
2. If valid input is provided, exit the loop immediately.
3. Notify the user of the remaining attempts for better user experience.

6.5 Practical Application Example Using Input Validation

In real-world use cases such as form validation, you often combine JavaScript with HTML.

Code example (HTML + JavaScript):

HTML part:

<input type="text" id="username" placeholder="Enter your username" />
<button id="submitBtn">Submit</button>
<p id="errorMessage"></p>

JavaScript part:

document.getElementById("submitBtn").addEventListener("click", function () {
  let username = document.getElementById("username").value;
  let errorMessage = document.getElementById("errorMessage");

  if (username.length < 3) {
    errorMessage.textContent = "Username must be at least 3 characters long.";
  } else {
    alert(`Welcome, ${username}!`);
    errorMessage.textContent = ""; // Clear the error message
  }
});

This code can be used as a basic example of form input validation.

6.6 Summary

In this section, we introduced various practical examples of validating user input.

Key takeaways:

• For validating numbers and passwords, using while or do…while is very useful.
• Using regular expressions enables more advanced validation.
• Adding attempt limits is important to prevent infinite loops.

7. Performance and Optimization Tips

In this section, we’ll explain performance and optimization tips to consider when using JavaScript’s while statement. Writing efficient code can improve execution speed and enhance the reliability and readability of your program.

7.1 Avoid Unnecessary Processing

Key point:
Avoid repeating the same calculations or operations inside a loop. Code that runs repeatedly can reduce performance.

Example: Inefficient code

let arr = [1, 2, 3, 4, 5];
let i = 0;

while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

In this code, arr.length is recalculated each time the loop runs.

Improved example:

let arr = [1, 2, 3, 4, 5];
let length = arr.length; // Lưu độ dài mảng trước
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

Result:

• By storing arr.length in a variable beforehand, you avoid recalculating it inside the loop and improve performance.

7.2 Optimize the Number of Loop Iterations

Key point:
To avoid unnecessary loops, carefully design the start value and the exit condition.

Example: Inefficient code

let i = 0;
while (i <= 100) {
  if (i % 2 === 0) {
    console.log(i);
  }
  i++;
}

Improved example:

let i = 0;
while (i <= 100) {
  console.log(i); // In ra chỉ các số chẵn
  i += 2; // Tăng lên 2
}

Result:

• Adjusting the increment reduces unnecessary condition checks and improves code efficiency.

7.3 Detecting Infinite Loops and Debugging

Infinite loops can significantly reduce performance. If an infinite loop occurs during execution, use the browser or IDE debugger to identify the issue.

Debugging example:

let i = 0;
while (i < 10) {
  console.log(i); // Đầu ra gỡ lỗi
  // Vòng lặp vô hạn vì quên i++
}

Improved example:

let i = 0;
while (i < 10) {
  console.log(i);
  i++; // Thêm tăng để ngăn vòng lặp vô hạn
}

Tips for using debugging tools:

1. console.log(): Print variable values inside the loop to track progress.
2. Browser developer tools: Use debugging features in Chrome or Firefox, set breakpoints, and pause execution.
3. Prepare for infinite loops: If execution becomes extremely slow, be ready to stop the process using the browser task manager.

7.4 Optimizing Nested Loops

Key point:
Nested loops can increase complexity and slow down execution. Be especially careful when processing large datasets.

Example: Inefficient code

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let results = [];

let i = 0;
while (i < arr1.length) {
  let j = 0;
  while (j < arr2.length) {
    results.push(arr1[i] * arr2[j]);
    j++;
  }
  i++;
}

Improved example:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let results = [];

arr1.forEach(a => {
  arr2.forEach(b => {
    results.push(a * b);
  });
});

Result:

• Using forEach improves readability and can also help with maintainability.

7.5 Convert Repeated Logic into a Reusable Function

To avoid redundancy, you can wrap loop logic into a function so it can be reused easily.

Example: Optimization using a function

function printArrayElements(arr) {
  let i = 0;
  while (i < arr.length) {
    console.log(arr[i]);
    i++;
  }
}

const numbers = [10, 20, 30, 40];
printArrayElements(numbers);

Result:

• Modularizing the logic prevents duplication and makes the code easier to maintain.

7.6 Summary

In this section, we introduced optimization tips for using JavaScript’s while statement efficiently.

Key takeaways:

• Avoid unnecessary processing: Prevent repeated calculations such as checking array length inside the loop.
• Optimize loop iterations: Adjust increments and conditions to reduce overhead.
• Detect infinite loops and debug: Use debugging tools and console output for troubleshooting.
• Optimize nested loops: Choose simpler and more efficient structures when possible.
• Reuse code by using functions: Reduce redundancy and improve maintainability.

8. Summary

In this article, we explained JavaScript’s while statement in detail—from basic usage to practical examples and optimization tips. In this section, we’ll review what we covered and organize key points readers can apply in practice.

8.1 What You Learned in This Article

1. Cú pháp cơ bản và cách hoạt động của câu lệnh while

• Câu while lặp lại quá trình trong khi điều kiện đúng.
• Vì điều kiện được đánh giá trước, vòng lặp sẽ không chạy ngay cả một lần nào nếu điều kiện sai.

1. Cách sử dụng cơ bản và các ví dụ thực tế

• Vòng lặp đếm cố định: Lặp lại đơn giản một số lần xác định.
• Lặp lại cho đến khi đáp ứng điều kiện: Các ví dụ linh hoạt cho việc kiểm tra đầu vào và các điều kiện động.
• Xử lý các phần tử mảng: Các ví dụ cụ thể về việc xử lý mảng và danh sách dữ liệu một cách tuần tự.

1. Cách tránh vòng lặp vô hạn

• Vòng lặp vô hạn có thể khiến chương trình treo hoặc bị sập.
• Bằng cách thiết kế điều kiện một cách hợp lý và sử dụng break, bạn có thể triển khai logic vòng lặp an toàn.

1. So sánh với câu lệnh do…while

• Câu lệnh do…while: Một cấu trúc vòng lặp luôn chạy ít nhất một lần bất kể điều kiện.
• Khi bạn cần ít nhất một lần thực thi, do…while là lựa chọn hiệu quả.

1. Kiểm tra đầu vào người dùng thực tế

• Chúng tôi đã sử dụng while và do…while để kiểm tra số, mật khẩu và địa chỉ email.
• Chúng tôi cũng giới thiệu các ví dụ giới hạn số lần thử và kiểm tra dựa trên regex.

1. Mẹo về hiệu năng và tối ưu hoá

• Chúng tôi đã học cách viết mã hiệu quả bằng cách tính trước độ dài mảng và các điều kiện.
• Chúng tôi cũng giới thiệu các chiến lược gỡ lỗi và kỹ thuật tối ưu hoá vòng lặp lồng nhau.

8.2 Mẹo hữu ích cho việc sử dụng thực tế

1. Sử dụng debugger:

• Dùng debugger trong công cụ phát triển để kiểm tra trạng thái biến bên trong vòng lặp theo thời gian thực.

1. Viết mã có thể tái sử dụng:

• Đóng gói logic vào các hàm giúp dễ dàng tái sử dụng và quản lý.

1. Giữ điều kiện đơn giản:

• Viết các điều kiện rõ ràng và tránh phức tạp không cần thiết để giảm lỗi.

1. Thiết kế an toàn:

• Xem xét việc ngăn ngừa vòng lặp vô hạn và xử lý lỗi ngay từ đầu để tránh các vấn đề thời gian chạy.

8.3 Cách sử dụng bài viết này

Bài viết này có thể được dùng như một hướng dẫn toàn diện về câu lệnh while của JavaScript cho các mục đích sau:

• Người mới bắt đầu: Đọc từ đầu để hiểu cấu trúc và hành vi của vòng lặp while.
• Người học trung cấp: Sử dụng các ví dụ thực tế và mẹo tối ưu hoá để cải thiện các chương trình thực tế.
• Nhà phát triển: Dùng làm tài liệu tham khảo khi kiểm tra logic hoặc tối ưu hoá hiệu năng vòng lặp.

8.4 Các bước tiếp theo

Trong JavaScript, có nhiều cấu trúc vòng lặp khác ngoài while, chẳng hạn như for và for…of. Hiểu rõ từng loại và chọn công cụ phù hợp cho từng tình huống sẽ giúp bạn viết mã hiệu quả và dễ bảo trì hơn.

Là các bước tiếp theo, việc học các chủ đề sau sẽ giúp bạn hiểu sâu hơn:

1. So sánh for và for…of:

• Tìm hiểu các cách linh hoạt hơn để xử lý việc lặp lại.

1. Sử dụng các phương thức mảng (forEach, map, filter, …):

• Đơn giản hoá mã và cải thiện hiệu năng.

1. Xử lý bất đồng bộ và vòng lặp:

• Học các mẫu để lặp lại công việc với các hàm async.

8.5 Lưu ý cuối cùng

Câu lệnh while của JavaScript là một công cụ mạnh mẽ có thể được dùng trong nhiều tình huống, từ cơ bản đến nâng cao. Hãy sử dụng bài viết này làm tài liệu tham khảo và nâng cao hiểu biết của bạn bằng cách viết và thử nghiệm mã thực tế.

Mẹo thực tế:

• Bắt đầu với các ví dụ nhỏ và dần dần thử các mẫu phức tạp hơn.
• Sử dụng công cụ gỡ lỗi để xác nhận cách mã của bạn hoạt động.
• Luôn giữ an toàn và hiệu năng trong tâm trí khi tối ưu hoá mã.