JavaScript cho vòng lặp – Giải thích với các ví dụ

Vòng lặp là một khái niệm lập trình mà chúng tôi liên tục gặp phải và triển khai với tư cách là nhà phát triển JavaScript.

Và nhiều nhà phát triển đã quen thuộc với các vòng lặp, nhưng không phải ai cũng hiểu cách chúng hoạt động và tại sao hoặc khi nào họ nên sử dụng một loại vòng lặp cụ thể.

Trong bài viết này, chúng ta sẽ tìm hiểu vòng lặp for là gì, chúng hoạt động như thế nào và tại sao chúng ta sử dụng chúng. Chúng ta cũng nên nhớ rằng có một số loại vòng lặp, mỗi loại thực hiện một chức năng cụ thể mặc dù chúng hầu như có thể thực hiện cùng một chức năng chung.

Vòng lặp là gì?

Vòng lặp là các chương trình máy tính thực thi một tập lệnh hoặc một khối mã trong một số lần nhất định mà không cần phải viết lại cho đến khi đáp ứng một điều kiện nhất định. Nói cách khác, các vòng lặp cho phép mã của bạn thực thi một hoặc nhiều câu lệnh bao nhiêu lần tùy ý.

Một lần nữa, có nhiều loại vòng lặp, nhưng chúng ta sẽ chỉ xem xét vòng lặp for trong bài viết này.

Hầu như mọi ngôn ngữ lập trình cấp cao, kể cả JavaScript, đều có vòng lặp for. Chúng ta sẽ chỉ xem xét JavaScript trong bài viết này và chúng ta sẽ xem xét cú pháp của nó và một số ví dụ.

Đối với vòng lặp trong JavaScript

Vòng lặp for là một câu lệnh lặp mà bạn sử dụng để kiểm tra các điều kiện nhất định và sau đó thực thi lặp lại một khối mã miễn là các điều kiện đó được đáp ứng.

Cú pháp của vòng lặp for

for (initialExpression; condition; updateExpression) {
    // for loop body: statement
}

Khối mã ở trên là cú pháp tiêu chuẩn được sử dụng bởi vòng lặp for. Hãy xem xét từng tham số để xem ý nghĩa và tác dụng của nó:

• initialExpression: Điều này được sử dụng để đặt giá trị của một biến đếm và nó chỉ được đánh giá một lần trước khi vòng lặp bắt đầu. Tùy thuộc vào phạm vi, các biến đếm này thường được khai báo với var hoặc let từ khóa.
• condition: Đây là biểu thức đánh giá hằng số xác định xem vòng lặp có được thực thi hay không. Nói một cách đơn giản, nếu điều kiện này trả về true, khối mã của vòng lặp for sẽ được thực thi. Nếu nó trả về false, vòng lặp for kết thúc.
• updateExpression: Điều này thường được sử dụng để cập nhật hoặc tăng initialExpression biến đếm. Nói cách khác, khi điều kiện là đúng, nó sẽ cập nhật giá trị của initialExpression.

Tóm lại, vòng lặp for gây ra initialExpression biến, được đặt thành giá trị bắt đầu, tăng hoặc giảm để đáp ứng với updateExpression miễn là đáp ứng được điều kiện. Cuối cùng, câu lệnh, sẽ luôn được thực thi nếu điều kiện được đánh giá là đúng.

Đối với các ví dụ về vòng lặp trong JavaScript

Tại thời điểm này, chúng ta đã hiểu vòng lặp là gì, vì vậy hãy xem một số ví dụ và xem chúng ta có thể sử dụng vòng lặp như thế nào.

Cách hiển thị văn bản nhiều lần

Hãy bắt đầu bằng cách hiển thị một số văn bản nhiều lần cho đến khi điều kiện của chúng tôi được đáp ứng.

for (var i = 0; i < 3; i++) {
  let name = "John Doe";
  console.log("Hi, my name is " + name);
}

Đầu ra:

"Hi, my name is John Doe"
"Hi, my name is John Doe"
"Hi, my name is John Doe"

Đây là cách chương trình xử lý vòng lặp này:

Ghi chú: Vòng lặp kết thúc vì 3 không nhỏ hơn 3 nên nó trả về false.

Cách hiển thị một dãy số bằng vòng lặp For

Lần này, hãy hiển thị một dãy số bằng cách hiển thị giá trị lặp.

for (let i = 2; i <= 5; i++) {
    console.log(i);  // printing the value of i
}

Đầu ra:

2
3
4
5

Đây là cách chương trình xử lý vòng lặp này:

Ghi chú: Vòng lặp kết thúc vì 6 không nhỏ hơn hoặc bằng 5, vì vậy điều kiện trả về sai.

Cách hiển thị một dãy số chẵn

Bây giờ chúng ta hãy hiển thị một chuỗi các số chẵn chỉ bằng cách hiển thị giá trị lặp lại:

for (let i = 2; i <= 10; i+=2) {
    console.log(i);  // printing the value of i
}

Đầu ra:

2
4
6
8
10

Đây là cách chương trình xử lý vòng lặp này:

Giả sử chúng ta muốn lấy các số lẻ. Tất cả những gì chúng ta phải làm là thay đổi initialExpression bằng nhau 1 hoặc bất kỳ số lẻ nào chúng tôi muốn bắt đầu từ như được thấy bên dưới

for (let i = 1; i <= 10; i+=2) {
    console.log(i);  // printing the value of i
}

Làm thế nào để phá vỡ một hoạt động cho vòng lặp

Cho đến giờ, chúng ta đã biết cách tạo vòng lặp for, nhưng điều quan trọng cần đề cập là chúng ta có thể thoát ra khỏi vòng lặp bằng cách sử dụng break. Câu lệnh break được sử dụng để kết thúc vòng lặp ngay lập tức khi nó gặp phải.

for (let i = 1; i <= 10; i++) {    
    if (i == 5) {
        break;
    }
    console.log(i);
}

Đầu ra:

1
2
3
4

Cách hiển thị tổng các số tự nhiên

Bây giờ chúng ta hãy lặp từ 1-10 và sau đó cộng các số này lại với nhau khi số lần lặp tăng lên:

let sum = 0;

for (let i = 1; i <= 10; i++) {
    sum += i;  // This is same as: sum = sum + i
}

console.log('The sum of 1 to 10 is: ', sum); // "The sum of 1 to 10 is:  55"

Ghi chú: chúng tôi đang thêm console.log(…) bên ngoài vòng lặp, vì vậy nó chỉ cho chúng ta đầu ra cuối cùng khi vòng lặp kết thúc.

Chúng tôi cũng có thể quyết định sử dụng các biến để đặt số lượng điều kiện tối đa theo cách này:

let sum = 0;
let n = 10;

for (let i = 1; i <= n; i++) {
    sum += i;  // this is same as: sum = sum + i
}

console.log('The sum of 1 to 10 is: ', sum); // "The sum of 1 to 10 is:  55"

Cách thực hiện các vòng lặp vô hạn với vòng lặp For

Điều này có thể làm treo hệ thống của bạn, vì nó tiếp tục chạy cho đến khi bộ nhớ đầy, vì điều kiện luôn được đánh giá là đúng.

for(let i = 1; i > 0; i++) {
    // block of code
}

Cách lặp qua một mảng để kiểm tra các số chẵn và lẻ

Hầu hết thời gian bạn sẽ làm việc với mảng, vì vậy hãy xem cách chúng ta có thể lặp qua một mảng số để xuất ra tất cả các số chẵn và lẻ:

var numbers = [1, 4, 44, 64, 55, 24, 32, 55, 19, 17, 74, 22, 23];
var evenNumbers = [];
var oddNumbers = [];

for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 != 1) {
        evenNumbers.push(numbers[i]);
    } else {
        oddNumbers.push(numbers[i]);
    }
}

console.log("The even numbers are: " + evenNumbers); // "The even numbers are: 4,44,64,24,32,74,22"
console.log("The odd numbers are: " + oddNumbers); // "The odd numbers are: 1,55,55,19,17,23"

Cách lặp qua một dãy số để lấy số tối đa và tối thiểu

Cuối cùng, trước khi kết thúc bài viết này, chúng ta hãy xem cách lấy số lớn nhất và nhỏ nhất từ ​​một mảng với vòng lặp for:

Tối đa:

var numbers = [1, 4, 44, 64, 55, 24, 32, 55, 19, 17, 74, 22, 23];
var max = 0;

for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

console.log(max); // 74

tối thiểu:

var numbers = [4, 44, 64, 55, 24, 32, 55, 19, 17, 74, 22, 23];
var min = numbers[0];

for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] < min) {
        min = numbers[i];
    }
}

console.log(min); // 4

Phần kết luận

Trong bài viết này, chúng ta đã tìm hiểu vòng lặp JavaScript là gì và xem xét một số ví dụ.

Điều quan trọng là phải hiểu rằng có nhiều loại vòng lặp khác, bao gồm cả vòng lặp while, được sử dụng tốt nhất khi bạn không biết số lần lặp. Mặt khác, luôn sử dụng vòng lặp for khi bạn biết số lần lặp.