Cách sử dụng vòng lặp for trong JavaScript

Giải thích:

• Khởi tạo (let i = 0): Thực hiện trước khi vòng lặp bắt đầu.
• Điều kiện (i < 5): Vẫn có điều kiện kiểm tra.
• Bước lặp (i++): Được di chuyển vào trong { }.

Kết quả đầu ra:

Giá trị: 0
Giá trị: 1
Giá trị: 2
Giá trị: 3
Giá trị: 4

Vòng lặp for không có điều kiện (vòng lặp vô hạn)

Nếu bỏ trống cả ba phần của vòng lặp for, nó sẽ chạy vô hạn (trừ khi có câu lệnh break).

Ví dụ: Tạo vòng lặp vô hạn và dừng bằng break

for (;;) {
    console.log("Chạy mãi mãi");
    break;  // Dừng vòng lặp để tránh chạy vô hạn
}

Giải thích:

• Không có khởi tạo, điều kiện, hay bước lặp.
• Vòng lặp sẽ chạy mãi mãi trừ khi có break để dừng nó.

Kết quả đầu ra:

Chạy mãi mãi

Lưu ý: Nếu không có break, vòng lặp này sẽ tiếp tục chạy vô hạn, gây treo trình duyệt hoặc chương trình.

Vòng lặp for...in và for...of trong JavaScript

Bên cạnh vòng lặp for thông thường, JavaScript còn cung cấp hai loại vòng lặp đặc biệt:

• for...in: Duyệt qua các thuộc tính (key) của một đối tượng (object).
• for...of: Duyệt qua các phần tử của mảng hoặc các đối tượng có thể lặp (iterable object như Array, String, Set, Map).

Dưới đây là chi tiết về cách sử dụng và ứng dụng của từng loại vòng lặp.

Vòng lặp for...in

Cách hoạt động

• for...in duyệt qua các thuộc tính (key) của một đối tượng.
• Giá trị của mỗi key có thể được truy xuất bằng object[key].
• Thường được dùng để duyệt các thuộc tính của một object.

Ví dụ: Duyệt qua các thuộc tính của một object

let person = { name: "John", age: 30, city: "New York" };

for (let key in person) {
    console.log(key + ":", person[key]);
}

Giải thích:

• key lần lượt nhận giá trị "name", "age", "city".
• person[key] lấy giá trị tương ứng của thuộc tính đó trong object.

Kết quả đầu ra:

name: John
age: 30
city: New York

Ứng dụng của vòng lặp for...in

Duyệt qua tất cả thuộc tính của một object.
Kiểm tra dữ liệu của một object một cách linh hoạt.
Có thể sử dụng để lặp qua các chỉ mục (index) của mảng, nhưng không khuyến khích do for...of tốt hơn cho mảng.

Lưu ý khi dùng for...in với mảng:

• for...in không đảm bảo thứ tự các phần tử trong mảng.
• Nên dùng for...of để duyệt mảng thay vì for...in.

Ví dụ không khuyến khích:

let numbers = [10, 20, 30, 40];
for (let index in numbers) {
    console.log("Chỉ mục:", index, "Giá trị:", numbers[index]);
}

Kết quả đầu ra:

Chỉ mục: 0 Giá trị: 10
Chỉ mục: 1 Giá trị: 20
Chỉ mục: 2 Giá trị: 30
Chỉ mục: 3 Giá trị: 40

Mặc dù vẫn hoạt động, nhưng vòng lặp này trả về chỉ mục (index) thay vì giá trị. Vì vậy, for...of sẽ tốt hơn khi duyệt mảng.

Vòng lặp for...of

Cách hoạt động

• for...of duyệt trực tiếp qua các giá trị của mảng hoặc iterable object (chuỗi, Set, Map, v.v.).
• Thường được dùng để duyệt nhanh qua mảng mà không cần truy cập chỉ mục.

Ví dụ: Duyệt qua từng phần tử trong một mảng

let numbers = [1, 2, 3, 4];

for (let num of numbers) {
    console.log(num);
}

Giải thích:

• num lần lượt nhận giá trị 1, 2, 3, 4 mà không cần dùng numbers[i].

Kết quả đầu ra:

1
2
3
4

Ví dụ 1: Duyệt từng ký tự trong chuỗi

let text = "Hello";

for (let char of text) {
    console.log(char);
}

Kết quả đầu ra:

H
e
l
l
o

for...of giúp trích xuất từng ký tự trong chuỗi một cách dễ dàng.

Ví dụ 2: Duyệt qua Set

let uniqueNumbers = new Set([10, 20, 30, 40]);

for (let num of uniqueNumbers) {
    console.log(num);
}

Giải thích:

• num lần lượt nhận giá trị 1, 2, 3, 4 mà không cần dùng numbers[i].

Kết quả đầu ra:

10
20
30
40

Set không chứa phần tử trùng lặp, nên vòng lặp sẽ duyệt qua từng giá trị duy nhất.

Ví dụ 3: Duyệt qua Map

let userRoles = new Map([
    ["Alice", "Admin"],
    ["Bob", "Editor"],
    ["Charlie", "Viewer"]
]);

for (let [user, role] of userRoles) {
    console.log(user + " là " + role);
}

Kết quả đầu ra:

Alice là Admin
Bob là Editor
Charlie là Viewer

for...of giúp duyệt qua cả key và value trong Map mà không cần truy cập thủ công.

So sánh for...in và for...of trong JavaScript

Ứng dụng thực tế của vòng lặp for trong JavaScript

Vòng lặp for là một công cụ mạnh mẽ giúp tự động hóa nhiều tác vụ trong lập trình. Dưới đây là một số ứng dụng phổ biến trong thực tế:

Duyệt qua danh sách sản phẩm trong mảng và hiển thị lên giao diện

Khi làm việc với danh sách sản phẩm trong một trang web thương mại điện tử, ta có thể sử dụng vòng lặp for để hiển thị chúng lên giao diện.

Ví dụ: Hiển thị danh sách sản phẩm trong HTML

let products = ["iPhone", "Samsung Galaxy", "MacBook", "iPad"];

for (let i = 0; i < products.length; i++) {
    console.log("Sản phẩm:", products[i]);
}

Hiển thị danh sách sản phẩm trong div hoặc table.
Duyệt qua danh sách sản phẩm để thêm vào giỏ hàng.

Tạo bảng dữ liệu tự động trong HTML

Vòng lặp for giúp tạo bảng động bằng cách lặp qua dữ liệu và thêm vào HTML.

Ví dụ: Tạo bảng hiển thị số từ 1 đến 5

let tableHTML = "<table border='1'><tr><th>STT</th><th>Giá trị</th></tr>";

for (let i = 1; i <= 5; i++) {
    tableHTML += `<tr><td>${i}</td><td>Giá trị ${i}</td></tr>`;
}

tableHTML += "</table>";
document.write(tableHTML);

Ứng dụng:
Hiển thị danh sách người dùng, đơn hàng, báo cáo.
Tạo bảng động dựa trên dữ liệu từ API hoặc cơ sở dữ liệu.

Tính tổng, trung bình của một dãy số

Vòng lặp for giúp thực hiện các phép tính nhanh chóng, chẳng hạn như tính tổng hoặc trung bình của một danh sách số.

Ví dụ: Tính tổng và trung bình của một mảng số

let numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

let average = sum / numbers.length;
console.log("Tổng:", sum);
console.log("Trung bình:", average);

let products = ["iPhone", "Samsung", "MacBook", "iPad"];
let search = "MacBook";
let found = false;

for (let i = 0; i < products.length; i++) {
    if (products[i] === search) {
        console.log(`${search} được tìm thấy ở vị trí ${i}`);
        found = true;
        break;
    }
}

if (!found) {
    console.log("Không tìm thấy sản phẩm");
}

let images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let index = 0;

function showImage() {
    console.log("Hiển thị ảnh:", images[index]);
    index = (index + 1) % images.length; // Quay lại ảnh đầu tiên khi hết danh sách
}

setInterval(showImage, 2000); // Cập nhật ảnh mỗi 2 giây Hiển thị thông báo quảng cáo tự động.

for (let i = 0; ; i++) { // Không có điều kiện dừng
    console.log(i);
}

for (let i = 0; i < 10; i++) { 
    console.log(i);
}

let numbers = [10, 20, 30, 40];
for (let i = 0; i <= numbers.length; i++) { // Lỗi: `i <= numbers.length`
    console.log(numbers[i]); // `numbers[4]` sẽ là `undefined`
}

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

let person = { name: "John", age: 30 };
for (let i = 0; i < person.length; i++) { // Lỗi: Object không có `length`
    console.log(person[i]);
}

for (let key in person) {
    console.log(key + ":", person[key]);
}