Cách Sử Dụng Vòng Lặp “For” Để Duyệt Qua Một Mảng Trong JavaScript

Cách Sử Dụng Vòng Lặp "For" Để Duyệt Qua Một Mảng Trong JavaScript

Cách Sử Dụng Vòng Lặp “For” Để Duyệt Qua Một Mảng Trong JavaScript

Trong lập trình, vòng lặp là một công cụ rất quan trọng, cho phép chương trình thực thi một đoạn mã lặp đi lặp lại cho đến khi một điều kiện cụ thể được đáp ứng.

Ví dụ, giả sử bạn có một danh sách các tên và bạn muốn in từng tên ra màn hình. Nếu không sử dụng vòng lặp, bạn sẽ phải viết mã lặp lại nhiều lần để xuất từng tên. Nhưng với vòng lặp, bạn có thể lặp qua danh sách mà không cần phải lặp lại mã nhiều lần.

Bài viết này sẽ hướng dẫn bạn cách sử dụng vòng lặp for để duyệt qua một mảng (array) trong JavaScript, đồng thời giới thiệu về các thành phần cơ bản của vòng lặp này.

Mảng (Array) Trong JavaScript Là Gì?

Mảng trong JavaScript là một biến chứa nhiều phần tử (element). Mỗi phần tử trong mảng có thể là một chuỗi (string), số nguyên (integer), hoặc một kết hợp của cả hai. Các phần tử của mảng thường được đặt trong cặp dấu ngoặc vuông [] và phân cách nhau bởi dấu phẩy.

Ví dụ về một mảng chứa các tên:

JavaScript
let names = ['Minh', 'Anh', 'Hương'];

Vòng Lặp (Loop) Trong JavaScript Là Gì?

Vòng lặp là một cấu trúc điều kiện dùng để thực thi một đoạn mã lặp đi lặp lại cho đến khi một điều kiện nhất định được thỏa mãn. Cụ thể, vòng lặp sẽ chạy một chuỗi các lệnh và kết thúc khi điều kiện được đặt ra không còn đúng nữa.

Cách Duyệt Qua Một Mảng Bằng Vòng Lặp For Trong JavaScript

Vòng lặp for là một trong những vòng lặp phổ biến nhất trong JavaScript. Nó giúp lặp qua các phần tử trong mảng và thực thi một đoạn mã cho mỗi phần tử.

Dưới đây là cú pháp cơ bản của vòng lặp for:

JavaScript
for (biểu_thức1; biểu_thức2; biểu_thức3) {
  // code cần thực thi
}
  • biểu_thức1: Là biểu thức khởi tạo, thường được dùng để khai báo biến đếm cho vòng lặp, ví dụ let i = 0.
  • biểu_thức2: Là biểu thức điều kiện, nó sẽ trả về true hoặc false. Nếu điều kiện đúng, vòng lặp sẽ tiếp tục chạy, nếu sai, vòng lặp sẽ dừng lại.
  • biểu_thức3: Là biểu thức cập nhật, thường dùng để tăng hoặc giảm giá trị của biến đếm, ví dụ i++ (tăng i lên 1 đơn vị sau mỗi lần lặp).

Ví dụ cụ thể về việc sử dụng vòng lặp for để duyệt qua mảng:

Giả sử chúng ta có một mảng chứa các tên:

JavaScript
let names = ['Minh', 'Anh', 'Hương'];

Chúng ta có thể sử dụng vòng lặp for để duyệt qua từng phần tử của mảng và in từng tên ra console như sau:

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

Giải thích:

  1. let i = 0: Khởi tạo biến đếm i với giá trị ban đầu là 0.
  2. i < names.length: Điều kiện lặp, khi i nhỏ hơn chiều dài của mảng names, vòng lặp sẽ tiếp tục.
  3. i++: Sau mỗi lần lặp, giá trị của i sẽ được tăng lên 1.

Kết quả của đoạn mã trên sẽ in ra:

JavaScript
Minh
Anh
Hương

Cách Hoạt Động Của Vòng Lặp “For” Chi Tiết Hơn

Hãy cùng phân tích kỹ hơn về cách vòng lặp hoạt động qua một ví dụ khác:

JavaScript
const cities = ['Hà Nội', 'Đà Nẵng', 'Hồ Chí Minh'];
for (let i = 0; i < cities.length; i++) {
    console.log(cities[i]);
}
  • Biểu thức khởi tạo: let i = 0, đây là nơi chúng ta khởi tạo biến đếm i.
  • Biểu thức điều kiện: i < cities.length, điều kiện này sẽ kiểm tra xem i có nhỏ hơn chiều dài của mảng cities hay không. Nếu điều kiện đúng, vòng lặp sẽ tiếp tục, nếu sai, vòng lặp sẽ dừng lại.
  • Biểu thức cập nhật: i++, sau mỗi lần lặp, giá trị của i sẽ được tăng lên 1.

Vòng lặp sẽ tiếp tục chạy cho đến khi i bằng chiều dài của mảng (tức là 3), và sau đó vòng lặp sẽ dừng lại.

Kết quả đầu ra của đoạn mã trên là:

JavaScript
Hà Nội
Đà Nẵng
Hồ Chí Minh

Kết Luận

Trong bài viết này, chúng ta đã tìm hiểu về khái niệm mảng trong JavaScript, cách hoạt động của vòng lặp for, và cách sử dụng vòng lặp này để duyệt qua các phần tử của một mảng. Vòng lặp for là một công cụ mạnh mẽ, cho phép chúng ta tiết kiệm thời gian và công sức khi làm việc với dữ liệu lớn, bằng cách tự động hóa quá trình xử lý.

Nếu bạn mới bắt đầu học lập trình JavaScript, hãy thử áp dụng vòng lặp for vào các bài toán của mình để hiểu rõ hơn về cách hoạt động của nó và nâng cao kỹ năng lập trình của bạn!

Tham khảo khóa học của tôi: Học javascript căn bản thông qua lập trình 1 game: Link 1Link 2

Leave a Reply