Bạn đang bắt đầu hành trình lập trình và cảm thấy bối rối trước các khái niệm cốt lõi? Đừng lo lắng! Bài viết này sẽ là kim chỉ nam giúp bạn tìm hiểu tường tận về điều kiện và vòng lặp JavaScript, hai khối xây dựng cơ bản nhất. WiWeb sẽ cùng bạn đi từ những ví dụ đơn giản đến các kỹ thuật nâng cao, đảm bảo bạn có thể tự tin điều khiển luồng đi của chương trình một cách dễ dàng.
Giới thiệu về Cấu trúc Điều khiển trong JavaScript
Chào mừng bạn đến với thế giới của JavaScript! Nếu coi việc viết code giống như việc chỉ đường cho máy tính, thì cấu trúc điều khiển chính là những biển báo giao thông và ngã rẽ. Chúng cho phép chương trình của bạn không chỉ chạy một mạch từ trên xuống dưới, mà còn có thể đưa ra quyết định, lặp lại hành động và xử lý các tình huống khác nhau.
Tại sao điều kiện và vòng lặp là nền tảng của mọi chương trình?
Thử tưởng tượng một ứng dụng không có điều kiện và vòng lặp. Nó sẽ giống như một con robot chỉ biết đi thẳng. Nó không thể kiểm tra xem bạn đã nhập đúng mật khẩu chưa (điều kiện), cũng không thể hiển thị danh sách 10 sản phẩm bạn yêu thích (vòng lặp). Điều kiện và vòng lặp chính là bộ não, giúp chương trình trở nên thông minh và linh hoạt. Chúng là nền tảng cho phép bạn xây dựng mọi thứ, từ một form đăng nhập đơn giản đến một mạng xã hội phức tạp.
Tổng quan các khái niệm bạn sẽ nắm vững trong bài viết này
Trong bài hướng dẫn này, WiWeb sẽ cùng bạn chinh phục các khái niệm quan trọng sau:
- Câu lệnh điều kiện (rẽ nhánh): Cách để chương trình đưa ra lựa chọn, bao gồm
if...else,switch...casevà cả toán tử 3 ngôi javascript siêu tiện lợi. - Tất cả các loại vòng lặp trong javascript: Từ
for,whilekinh điển đếnfor...invàfor...ofhiện đại để xử lý dữ liệu hiệu quả. - Lệnh
breakvàcontinue: Hai công cụ quyền năng giúp bạn làm chủ và kiểm soát vòng lặp của mình một cách chính xác.
Câu lệnh điều kiện (rẽ nhánh) trong JavaScript
Trong cuộc sống, chúng ta luôn phải đưa ra quyết định. Nếu trời mưa, tôi sẽ mang ô. Nếu đói, tôi sẽ đi ăn. Lập trình cũng vậy. Các câu lệnh điều kiện giúp chương trình của bạn “suy nghĩ” và hành động dựa trên các tình huống cụ thể. Hãy cùng tìm hiểu các cách để tạo ra những ngã rẽ logic này nhé.
Câu lệnh if…else: Quyết định dựa trên điều kiện
Đây là cấu trúc cơ bản và phổ biến nhất. Câu lệnh if trong JavaScript được sử dụng để thực thi một khối mã nếu một điều kiện cụ thể là đúng (true). Bạn có thể kết hợp nó với else để thực thi một khối mã khác nếu điều kiện đó là sai (false).
Ví dụ, hãy kiểm tra xem một người có đủ tuổi để xem phim hay không:
let tuoi = 18;
if (tuoi >= 18) {
console.log("Bạn đủ tuổi để xem phim này."); // Đoạn mã này sẽ chạy
} else {
console.log("Rất tiếc, bạn chưa đủ tuổi.");
}
Bạn còn có thể tạo ra một chuỗi quyết định với if...else if...else để xử lý nhiều điều kiện khác nhau. Khá đơn giản phải không nào?
Câu lệnh switch…case: Giải pháp cho nhiều lựa chọn
Khi bạn có một biến và cần so sánh nó với nhiều giá trị khác nhau, việc dùng một chuỗi if...else if... dài dòng có thể khiến code bị rối. Đây là lúc switch...case tỏa sáng.
Vậy lệnh Switch trong JS là gì? Nó là một cách gọn gàng để so sánh một biểu thức với nhiều “trường hợp” (case) khác nhau. Khi một trường hợp khớp, khối mã tương ứng sẽ được thực thi. Đừng quên dùng lệnh break để thoát khỏi switch sau khi tìm thấy trường hợp đúng nhé!
Ví dụ về việc kiểm tra ngày trong tuần:
let homNay = "Thứ Hai";
switch (homNay) {
case "Thứ Bảy":
case "Chủ Nhật":
console.log("Hôm nay là cuối tuần!");
break;
case "Thứ Hai":
console.log("Bắt đầu tuần mới làm việc thôi!"); // Dòng này sẽ được in ra
break;
default:
console.log("Hôm nay là một ngày bình thường.");
}
Toán tử ba ngôi (? :): Cách viết tắt cho if…else
Toán tử ba ngôi javascript là một cú pháp cực kỳ ngắn gọn cho câu lệnh if...else đơn giản. Nó hoạt động theo cấu trúc: điều_kiện ? giá_trị_nếu_đúng : giá_trị_nếu_sai.
Thay vì viết:
let loggedIn = true;
let message;
if (loggedIn) {
message = "Chào mừng bạn quay trở lại!";
} else {
message = "Vui lòng đăng nhập.";
}
Bạn có thể viết ngắn gọn như sau:
let loggedIn = true;
let message = loggedIn ? "Chào mừng bạn quay trở lại!" : "Vui lòng đăng nhập.";
console.log(message);
Tiện lợi và giúp code của bạn trông chuyên nghiệp hơn rất nhiều!
Khám phá tất cả các loại vòng lặp trong JavaScript
Vòng lặp là một khái niệm cực kỳ mạnh mẽ. Nó cho phép bạn thực hiện một hành động lặp đi lặp lại nhiều lần mà không cần viết lại cùng một đoạn mã. Có bao nhiêu vòng lặp trong JavaScript? Có khá nhiều loại, mỗi loại phù hợp với một nhiệm vụ cụ thể. Hãy cùng WiWeb tìm hiểu ngay bây giờ.
Vòng lặp for: Lặp với số lần xác định trước
Vòng lặp for trong JS là gì? Đây là vòng lặp phổ biến nhất khi bạn biết chính xác số lần muốn lặp. Cú pháp của nó gồm 3 phần:
- Khởi tạo: Chạy một lần duy nhất trước khi vòng lặp bắt đầu (ví dụ:
let i = 0). - Điều kiện: Được kiểm tra trước mỗi lần lặp. Nếu đúng, vòng lặp tiếp tục.
- Cập nhật: Chạy sau mỗi lần lặp (ví dụ:
i++).
Ví dụ in các số từ 1 đến 5:
for (let i = 1; i <= 5; i++) {
console.log("Số thứ: ", i);
}
Vòng lặp while: Lặp khi điều kiện còn đúng
Khi nào nên sử dụng vòng lặp while? Hãy dùng while khi bạn không biết trước số lần lặp, mà chỉ muốn vòng lặp tiếp tục chạy chừng nào một điều kiện cụ thể vẫn còn đúng. Vòng lặp while sẽ kiểm tra điều kiện trước, sau đó mới thực thi khối mã.
Ví dụ, một game đơn giản yêu cầu người chơi đoán số:
let soBiAn = 7;
let doan = 0;
while (doan !== soBiAn) {
// Giả sử đây là nơi bạn nhận input từ người dùng
doan = parseInt(prompt("Hãy đoán một số!"));
}
console.log("Chúc mừng bạn đã đoán đúng!");
Vòng lặp do…while: Đảm bảo thực thi ít nhất một lần
Vòng lặp do...while rất giống while, nhưng có một khác biệt quan trọng: nó sẽ thực thi khối mã trước, sau đó mới kiểm tra điều kiện. Điều này đảm bảo rằng đoạn mã bên trong vòng lặp luôn được chạy ít nhất một lần, bất kể điều kiện đúng hay sai.
let luaChon;
do {
luaChon = prompt("Nhập 'exit' để thoát.");
} while (luaChon !== 'exit');
console.log("Bạn đã thoát chương trình.");
So sánh chi tiết: Sự khác biệt giữa vòng lặp for và while là gì?
- Vòng lặp
for: Lý tưởng khi bạn biết chính xác số lần lặp. Cú pháp của nó gom cả khởi tạo, điều kiện và cập nhật vào một dòng, rất rõ ràng. - Vòng lặp
while: Phù hợp khi số lần lặp không xác định và phụ thuộc vào một điều kiện có thể thay đổi trong quá trình chạy. Biến điều kiện cần được khởi tạo bên ngoài và cập nhật bên trong vòng lặp.
Vòng lặp for…in: Duyệt qua các thuộc tính (keys) của Object
Khi làm việc với các đối tượng (Object), bạn thường cần lấy ra danh sách các thuộc tính (hay còn gọi là key). Vòng lặp for...in được sinh ra cho nhiệm vụ này.
const user = {
ten: "An",
tuoi: 25,
ngheNghiep: "Lập trình viên"
};
for (let key in user) {
console.log(key + ": " + user[key]);
// Kết quả:
// ten: An
// tuoi: 25
// ngheNghiep: Lập trình viên
}
Vòng lặp for…of: Duyệt qua các giá trị (values) của Array, String
Khác với for...in, vòng lặp for...of được dùng để duyệt qua các giá trị của các cấu trúc dữ liệu có thể lặp lại được (iterable) như Mảng (Array) hoặc Chuỗi (String). Đây là cách làm hiện đại và dễ đọc hơn nhiều so với vòng lặp for truyền thống.
const mauSac = ["Đỏ", "Vàng", "Xanh"];
for (let mau of mauSac) {
console.log(mau);
// Kết quả:
// Đỏ
// Vàng
// Xanh
}
Làm chủ Vòng lặp với Lệnh break và continue
Đôi khi, bạn không muốn một vòng lặp chạy cho đến khi kết thúc. Bạn có thể muốn thoát ra giữa chừng hoặc bỏ qua một vài lần lặp không cần thiết. JavaScript cung cấp hai lệnh mạnh mẽ để bạn kiểm soát vòng lặp của mình: break và continue.
Lệnh break: Thoát khỏi vòng lặp ngay lập tức
Lệnh break giống như một nút thoát hiểm. Khi gặp lệnh này, vòng lặp sẽ dừng lại ngay lập tức và chương trình sẽ tiếp tục thực thi các dòng mã ngay sau vòng lặp. Nó rất hữu ích khi bạn đã tìm thấy thứ mình cần.
Ví dụ, tìm số chẵn đầu tiên trong một mảng:
const numbers = [1, 3, 5, 6, 7, 9];
for (let num of numbers) {
if (num % 2 === 0) {
console.log("Đã tìm thấy số chẵn đầu tiên: ", num); // In ra: 6
break; // Thoát khỏi vòng lặp ngay
}
console.log("Kiểm tra số: ", num);
}
Lệnh continue: Bỏ qua lần lặp hiện tại và đi tiếp
Lệnh continue thì khác. Nó không thoát khỏi vòng lặp mà chỉ bỏ qua phần còn lại của lần lặp hiện tại và nhảy ngay đến lần lặp tiếp theo. Nó rất tiện khi bạn muốn bỏ qua một số phần tử không hợp lệ.
Ví dụ, chỉ in ra các số lẻ:
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // Bỏ qua tất cả các số chẵn
}
console.log("Số lẻ: ", i);
}
Kết luận
Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết về điều kiện và vòng lặp JavaScript. Đây là những kiến thức nền tảng vô cùng quan trọng mà bất kỳ lập trình viên nào cũng phải nắm vững.
Để bạn dễ ghi nhớ, hãy cùng WiWeb điểm lại những ý chính:
- Câu lệnh điều kiện (
if,switch): Giúp chương trình của bạn rẽ nhánh, đưa ra quyết định dựa trên các điều kiện cụ thể. - Vòng lặp (
for,while,do...while…): Giúp tự động hóa các tác vụ lặp đi lặp lại, xử lý dữ liệu trong mảng và đối tượng một cách hiệu quả. - Điều khiển vòng lặp (
break,continue): Cung cấp khả năng kiểm soát chính xác luồng chạy của vòng lặp, giúp code linh hoạt hơn.
Nắm vững cú pháp là một chuyện, viết code tốt lại là chuyện khác. Dưới đây là một vài mẹo nhỏ từ WiWeb:
- Đặt tên biến có ý nghĩa: Thay vì
let x = 18;, hãy dùnglet userAge = 18;. Điều này giúp người khác (và cả bạn trong tương lai) dễ dàng hiểu được mục đích của biến. - Giữ cho điều kiện đơn giản: Nếu điều kiện trong
ifquá phức tạp, hãy tách nó ra một hàm riêng. - Cẩn thận với vòng lặp vô hạn: Luôn đảm bảo rằng điều kiện dừng của vòng lặp
whilesẽ xảy ra. Một vòng lặp vô hạn có thể làm treo trình duyệt của bạn! - Chọn đúng loại vòng lặp: Sử dụng
forkhi biết số lần lặp,whilekhi không biết, vàfor...ofđể duyệt mảng một cách sạch sẽ.
Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại bình luận bên dưới, WiWeb sẽ rất vui được giải đáp!
Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!
06/02/2026
05/02/2026
04/02/2026
03/02/2026
02/02/2026
21/01/2026