Đề Luyện Tập JavaScript Cho Beginner (Phần 3)

Tổng Quan

Phần thứ ba trong bộ đề luyện tập JavaScript dành cho người mới bắt đầu học lập trình. Trong phần này, chúng ta sẽ tập trung vào vòng lặp: for, while, do-while và các từ khóa điều khiển break/continue. Thông qua các bài tập thực hành, bạn sẽ hiểu cách thực thi một khối lệnh nhiều lần một cách hiệu quả.

Luyện tập là cách tốt nhất để thành thạo JavaScript!
Hãy đảm bảo thực hành tất cả các bài tập dưới đây.

Phần 3: Vòng Lặp

Kiến thức cần nhớ

• Vòng lặp for: Sử dụng khi biết trước số lần lặp.
  Cú pháp: for (khởi_tạo; điều_kiện; cập_nhật) { khối_lệnh }

• Vòng lặp while: Lặp khi điều kiện còn đúng, kiểm tra điều kiện trước khi thực thi.
  Cú pháp: while (điều_kiện) { khối_lệnh }

• Vòng lặp do-while: Giống while nhưng luôn thực thi ít nhất một lần.
  Cú pháp: do { khối_lệnh } while (điều_kiện);

• Vòng lặp for...of: Lặp qua các giá trị của một đối tượng có thể lặp (iterable) như Mảng, Chuỗi. Rất hữu ích để duyệt qua từng phần tử mà không cần chỉ số.
  Cú pháp: for (var element of iterable) { khối_lệnh }

• Vòng lặp for...in: Lặp qua các thuộc tính (key) của một đối tượng. Thường dùng để kiểm tra các thuộc tính của object.
  Cú pháp: for (var key in object) { khối_lệnh }

• Từ khóa break: Thoát khỏi vòng lặp ngay lập tức, không thực thi các vòng lặp còn lại.

• Từ khóa continue: Bỏ qua vòng lặp hiện tại và chuyển đến vòng lặp tiếp theo.

• Vòng lặp lồng nhau: Đặt một vòng lặp bên trong vòng lặp khác để xử lý dữ liệu đa chiều.

• Vòng lặp vô tận: Xảy ra khi điều kiện dừng không bao giờ đạt được, làm chương trình bị treo.

Bài tập cốt lõi

Lời khuyên: Hãy tự mình làm các bài tập trước khi xem lời giải. Sau đó so sánh kết quả của bạn với lời giải để học hỏi thêm!

1. Sử dụng vòng lặp for cơ bản

• Sử dụng vòng lặp for để in các số từ 1 đến 5
• Mỗi số in trên một dòng riêng với định dạng "Số: X"

Copycopy code to clipboard
for (var i = 1; i <= 5; i++) {
  console.log("Số: " + i);
}

2. Sử dụng vòng lặp while

• Tạo biến count bắt đầu từ 0
• Sử dụng vòng lặp while để đếm từ 0 đến 3
• In ra "Đếm: X" cho mỗi giá trị

Copycopy code to clipboard
var count = 0;

while (count <= 3) {
  console.log("Đếm: " + count);
  count++;
}

3. Sử dụng vòng lặp do-while

• Tạo biến number với giá trị 1
• Sử dụng vòng lặp do-while để in "Giá trị: X"
• Tăng number lên 1 sau mỗi lần lặp
• Lặp cho đến khi number > 3

Copycopy code to clipboard
var number = 1;

do {
  console.log("Giá trị: " + number);
  number++;
} while (number <= 3);

4. Sử dụng for...of để duyệt mảng

• Tạo một mảng colors chứa các màu: "Red", "Green", "Blue"
• Sử dụng vòng lặp for...of để duyệt qua mảng và in mỗi màu ra console

Copycopy code to clipboard
const colors = ["Red", "Green", "Blue"];

for (const color of colors) {
  console.log("Màu: " + color);
}

5. Sử dụng for...in để duyệt đối tượng

• Tạo một đối tượng student với các thuộc tính: name: "Wanbi", age: 25
• Sử dụng vòng lặp for...in để duyệt qua đối tượng và in ra key: value

Copycopy code to clipboard
const student = {
  name: "Wanbi",
  age: 25
};

for (const key in student) {
  console.log(key + ": " + student[key]);
}

6. Sử dụng break trong vòng lặp

• Sử dụng vòng lặp for để lặp từ 1 đến 10
• Nếu số chia hết cho 5, in "Tìm thấy số chia hết cho 5: X" và thoát khỏi vòng lặp
• Ngược lại, in "Kiểm tra số: X"

Copycopy code to clipboard
for (var i = 1; i <= 10; i++) {
  if (i % 5 === 0) {
    console.log("Tìm thấy số chia hết cho 5: " + i);
    break;
  }
  console.log("Kiểm tra số: " + i);
}

7. Sử dụng continue trong vòng lặp

• Sử dụng vòng lặp for để lặp từ 1 đến 5
• Nếu số là số chẵn, bỏ qua và chuyển đến số tiếp theo
• Chỉ in ra các số lẻ với định dạng "Số lẻ: X"

Copycopy code to clipboard
for (var i = 1; i <= 5; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log("Số lẻ: " + i);
}

8. Vòng lặp lồng nhau - Bảng cửu chương

• Sử dụng vòng lặp lồng nhau để tạo bảng cửu chương từ 1 đến 3
• Mỗi bảng cửu chương hiển thị từ 1 đến 5
• Định dạng: "X x Y = Z"

Copycopy code to clipboard
for (var i = 1; i <= 3; i++) {
  console.log("Bảng cửu chương " + i + ":");
  for (var j = 1; j <= 5; j++) {
    console.log(i + " x " + j + " = " + (i * j));
  }
  console.log(""); // Dòng trống để tách các bảng
}

9. Bài tập tổng hợp: Tính tổng các số

• Sử dụng vòng lặp for để tính tổng các số từ 1 đến 10
• Lưu kết quả vào biến sum
• In ra tổng cuối cùng

Copycopy code to clipboard
var sum = 0;

for (var i = 1; i <= 10; i++) {
  sum += i;
  console.log("Cộng " + i + ", tổng hiện tại: " + sum);
}

console.log("Tổng cuối cùng: " + sum);

10. Tìm số đầu tiên chia hết cho 3 và 5

• Sử dụng vòng lặp for để tìm số đầu tiên trong khoảng từ 1 đến 50 chia hết cho cả 3 và 5.
• In số đó ra và dùng break để thoát khỏi vòng lặp.

Copycopy code to clipboard
for (let i = 1; i <= 50; i++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log("Số đầu tiên chia hết cho cả 3 và 5 là: " + i);
    break;
  }
}

Hướng dẫn và lời khuyên

Cách học hiệu quả: Hãy thử giải các bài tập trước khi xem đáp án. Sau đó so sánh giải pháp của bạn với lời giải. Phương pháp này giúp bạn rèn luyện kỹ năng giải quyết vấn đề và hiểu sâu hơn về các khái niệm.

Cách thực thi code JavaScript

1. Mở trình duyệt web (Google Chrome hoặc Firefox là lựa chọn phổ biến)
2. Mở Developer Console bằng cách:
   • Nhấn phím tắt F12 hoặc Ctrl+Shift+J (Windows/Linux) hoặc Cmd+Option+J (Mac)
   • Hoặc chuột phải vào trang web trống và chọn "Inspect" > "Console"
3. Copy từng đoạn code và dán vào Console
4. Nhấn Enter để thực thi và xem kết quả ngay lập tức

Lưu ý quan trọng khi sử dụng vòng lặp

1. Tránh vòng lặp vô tận:

   • Luôn đảm bảo điều kiện dừng có thể đạt được
   • Kiểm tra biến đếm có được cập nhật đúng cách
   • Sử dụng console.log() để theo dõi giá trị biến

2. Chọn loại vòng lặp phù hợp:

   • for: Khi biết trước số lần lặp
   • while: Khi chỉ biết điều kiện dừng
   • do-while: Khi cần thực thi ít nhất một lần

3. Sử dụng break và continue:

   • break: Thoát hoàn toàn khỏi vòng lặp
   • continue: Bỏ qua vòng lặp hiện tại, tiếp tục vòng lặp tiếp theo

Ví dụ thực tế

• Hiển thị danh sách sản phẩm:

Copycopy code to clipboard
var products = ["Áo", "Quần", "Giày", "Túi", "Đồng hồ"];

for (var i = 0; i < products.length; i++) {
  console.log((i + 1) + ". " + products[i]);
}

• Đếm số từ 1 đến 10:

Copycopy code to clipboard
var count = 1;

while (count <= 10) {
  console.log("Đếm: " + count);
  count++;
}

Gợi ý mở rộng

• Thử kết hợp vòng lặp với cấu trúc điều kiện đã học ở phần trước
• Thử nghiệm với các thuật toán đơn giản như tìm số lớn nhất trong danh sách
• Luyện tập với vòng lặp lồng nhau để xử lý dữ liệu phức tạp

Lưu ý: Hãy lưu lại các đoạn code đã thực hành vào một file .js riêng để ôn tập sau này!

So sánh các loại vòng lặp

Bài tập nâng cao

1. In hình tam giác sao

   • Sử dụng vòng lặp lồng nhau để in hình tam giác bằng dấu sao (*)
   • Tam giác có 5 dòng, dòng đầu 1 sao, dòng cuối 5 sao

2. Tính bình phương các số

   • Sử dụng vòng lặp để tính bình phương các số từ 1 đến 5
   • In ra kết quả dạng "X x X = Y"

3. Đếm số chẵn

   • Sử dụng vòng lặp để đếm có bao nhiêu số chẵn từ 1 đến 20
   • In ra tổng số chẵn tìm được

Kết luận

Trong phần này, chúng ta đã thực hành với các loại vòng lặp trong JavaScript: for, while, do-while và các từ khóa điều khiển break, continue. Vòng lặp là công cụ mạnh mẽ giúp thực thi code lặp đi lặp lại một cách hiệu quả.

Tóm tắt kiến thức về vòng lặp

Hướng dẫn tiếp theo

• Kết hợp kiến thức về biến từ Phần 1 và cấu trúc điều kiện từ Phần 2 với vòng lặp
• Hoàn thành các bài tập nâng cao
• Tìm hiểu thêm lý thuyết tại Vòng lặp trong JavaScript

Phần tiếp theo, chúng ta sẽ khám phá về mảng và các phương thức xử lý mảng trong JavaScript.

Ghi nhớ: Vòng lặp là nền tảng của nhiều thuật toán. Thành thạo vòng lặp sẽ giúp bạn giải quyết các bài toán phức tạp hơn!