Vòng lặp for trong JavaScript

Vòng lặp for trong JavaScript
Vòng lặp for trong JavaScript

Chức năng của Vòng lặp for trong JavaScript

Vòng lặp for trong JavaScript dùng để duyệt qua các giá trị trong một mảng hoặc đối tượng rồi lấy các giá trị hoặc khóa (key) của từng phần tử.

Code Vòng lặp for trong JavaScript

Vòng lặp for cơ bản trong JavaScript

<script>
for(let i=0;i<12;i++){
let thang = i+1;
document.write("Tháng "+thang+"<br>"); 
}
</script>

let i=0: khai báo biến i bằng 0.

i: điều kiện nếu biến i nhỏ hơn 12 thì tiếp tục chạy vòng lặp.

i++: mỗi vòng lặp thì i tăng lên 1.

Kết quả:

Tháng 1
Tháng 2
Tháng 3
Tháng 4
Tháng 5
Tháng 6
Tháng 7
Tháng 8
Tháng 9
Tháng 10
Tháng 11
Tháng 12
// for một mảng
document.write("<b>for một mảng</b><br>"); 
const mang = ["Lực", "Vân", "Quỳnh"];
for(let i=0; i< mang.length; i++){
var giatri = mang[i];
document.write(giatri+"<br>"); 
}

Kết quả:

Lực
Vân
Quỳnh

Chạy Thử

Vòng lặp for...in trong JavaScript

Dùng để lấy khóa (key) của một đối tượng và lấy giá trị của khóa (key):

<script>
let nhanvien1 = {ten: "Lực", tuoi: 35};
for (let key in nhanvien1) {
 document.write(key+" "+nhanvien1[key]+"<br>"); 
}
</script>

Kết quả:

ten Lực
tuoi 35

Chạy Thử

Vòng lặp for...of trong JavaScript

Dùng để lặp một mảng, chuỗi, Set, Map,... sau đó có thể lấy giá trị hoặc khóa (key) của chúng:

<script>
var mang = ["Vân","Lực","Quỳnh"];

// Lấy giá trị của mảng
document.write("<b>Lấy giá trị của mảng</b><br>"); 
for (let value of mang) {
document.write(value+"<br>"); 
}

// Lấy giá trị, khóa(key) của mảng
document.write("<b>Lấy giá trị, khóa(key) của mảng</b><br>"); 
for (let [key, giatri] of mang.entries()) {
document.write("Vị trí "+key+": "+giatri+"<br>"); 
}

// Lặp một chuỗi
document.write("<b>Lặp một chuỗi</b><br>"); 
var chuoi = "webmoi0705";
for (let value of chuoi) {
document.write(value+"<br>"); 
}
</script>

Kết quả:

Lấy giá trị của mảng
Vân
Lực
Quỳnh
Lấy giá trị, khóa(key) của mảng
Vị trí 0: Vân
Vị trí 1: Lực
Vị trí 2: Quỳnh
Lặp một chuỗi
w
e
b
m
o
i
0
7
0
5

Chạy Thử

Khi nào nên dùng vòng lặp for trong JavaScript?

Không phải trường hợp nào cũng cần dùng cùng một kiểu vòng lặp. Việc chọn đúng loại giúp đoạn JavaScript dễ đọc, ít thao tác dư thừa và thể hiện rõ mục đích xử lý dữ liệu. Có thể dựa vào loại dữ liệu và cách bạn muốn truy cập phần tử để lựa chọn.

Dùng for khi cần kiểm soát vị trí và số lần lặp

Vòng lặp for phù hợp khi bạn biết hoặc có thể xác định điều kiện lặp, đồng thời cần chủ động kiểm soát biến đếm. Đây là lựa chọn thuận tiện khi cần làm việc với chỉ số của từng phần tử trong mảng.

const numbers = [10, 20, 30, 40];

for (let i = 0; i < numbers.length; i++) {
    console.log(`Phần tử ${i}: ${numbers[i]}`);
}

Điểm mạnh của for là có thể dễ dàng thay đổi bước tăng, giới hạn lặp hoặc bỏ qua một số vị trí theo điều kiện riêng. Vì vậy, nó đặc biệt hữu ích khi quá trình duyệt dữ liệu phụ thuộc vào chỉ số.

Dùng for...in khi cần duyệt thuộc tính của đối tượng

for...in thích hợp khi mục tiêu là lần lượt lấy tên các thuộc tính của một đối tượng. Sau khi có tên thuộc tính, bạn có thể dùng nó để truy cập giá trị tương ứng.

const user = {
    name: "An",
    age: 25,
    city: "Hà Nội"
};

for (const key in user) {
    console.log(key, user[key]);
}

Kiểu vòng lặp này nên được ưu tiên cho đối tượng thay vì cố sử dụng for chỉ để lấy từng thuộc tính. Với mảng, for...in thường không phải lựa chọn phù hợp nếu bạn muốn duyệt các giá trị theo thứ tự.

Dùng for...of khi cần lấy trực tiếp giá trị phần tử

for...of phù hợp khi bạn chỉ quan tâm đến giá trị của từng phần tử trong một đối tượng có thể lặp, chẳng hạn như mảng hoặc chuỗi. Cách viết này giúp tránh phải quản lý chỉ số khi chỉ cần xử lý dữ liệu.

const products = ["Laptop", "Chuột", "Bàn phím"];

for (const product of products) {
    console.log(product);
}

So với việc truy cập numbers[i] trong vòng lặp thông thường, for...of làm rõ ngay ý định: lấy lần lượt từng giá trị để xử lý. Đây thường là lựa chọn dễ đọc khi không cần biết vị trí của phần tử.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Vòng lặp for trong JavaScript.

  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Đánh giá
Chia sẻ nội dung đánh giá của bạn về Vòng lặp for trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !