Articles
Giới thiệu về JavaScript
Xử lý lặp trong JavaScript

Xử lý lặp trong JavaScript

Trong bài viết này, chúng tôi sẽ giải thích về xử lý lặp trong JavaScript.

YouTube Video

Câu lệnh for trong JavaScript

Cú pháp Cơ bản 

1for (initialization; condition; update) {
2  // Code to repeat
3}

Câu lệnh for trong JavaScript là một cú pháp để thực hiện lặp. Nó lặp lại việc thực thi một đoạn mã cụ thể miễn là điều kiện nào đó được đáp ứng. Bằng cách sử dụng câu lệnh for, quy trình tương tự có thể được thực hiện nhiều lần một cách hiệu quả.

  • Khởi tạo (initialization): Phần này chỉ được thực thi một lần trước khi bắt đầu vòng lặp. Khởi tạo các biến như biến đếm vòng lặp.
  • Điều kiện (condition): Điều kiện quyết định liệu vòng lặp có tiếp tục hay không. Nếu true, vòng lặp tiếp tục; nếu false, vòng lặp kết thúc.
  • Cập nhật (update): Phần này được thực thi ở cuối mỗi vòng lặp để cập nhật biến đếm vòng lặp.

Ví dụ 

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

Trong trường hợp này, i bắt đầu từ 0, và vòng lặp chạy miễn là i < 5 là true. i++ sẽ tăng i lên 1 sau mỗi lần lặp của vòng lặp. Kết quả là, các số từ 0 đến 4 được hiển thị.

Phạm vi biến đếm vòng lặp

Khai báo hoặc khởi tạo biến trong phần khởi tạo của câu lệnh for. Các biến được khai báo ở đây chỉ có hiệu lực trong vòng lặp.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError
  • Như được hiển thị trong ví dụ này, việc tham chiếu một biến nằm ngoài câu lệnh for sẽ dẫn đến lỗi.

Vòng lặp vô hạn

Đặt một điều kiện không kết thúc vòng lặp sẽ dẫn đến vòng lặp vô hạn. Điều này có thể gây áp lực cho trình duyệt hoặc hệ thống, do đó cần thận trọng.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Mảng và câu lệnh for

Việc sử dụng câu lệnh for kết hợp với mảng là điều phổ biến. Nó tiện lợi để xử lý từng phần tử của một mảng.

Ví dụ 

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

Bằng cách này, bạn có thể xử lý từng phần tử của một mảng bằng cách sử dụng chỉ số.

Các cấu trúc vòng lặp khác

Câu lệnh for...of

Câu lệnh for...of được sử dụng cho các đối tượng có thể lặp lại như mảng và chuỗi.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Điều này cho phép bạn xử lý từng phần tử mà không cần sử dụng chỉ số.

Câu lệnh for...in

Câu lệnh for...in được sử dụng để lặp qua các thuộc tính của một đối tượng.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

Bằng cách này, bạn có thể thực hiện các thao tác trên từng phần tử bằng cách sử dụng các khóa.

Tóm tắt

  • Câu lệnh for là một cấu trúc vòng lặp bao gồm ba phần: khởi tạo, điều kiện và cập nhật.
  • Bạn có thể kiểm soát hành vi của vòng lặp bằng cách sử dụng break hoặc continue.
  • Khi kết hợp với mảng hoặc đối tượng, các phần tử hoặc thuộc tính có thể được xử lý một cách hiệu quả.

Câu lệnh while trong JavaScript

Cú pháp Cơ bản 

1while (condition) {
2    // Code that repeats while the condition is true
3}

Câu lệnh while trong JavaScript là một cấu trúc vòng lặp thực hiện các thao tác lặp lại miễn là điều kiện được chỉ định là true. Tương tự như câu lệnh for, câu lệnh while chỉ chỉ định điều kiện.

  • Điều kiện: Viết biểu thức điều kiện để xác định có tiếp tục vòng lặp hay không. Vòng lặp tiếp tục khi còn true và kết thúc khi nó trở thành false.

Ví dụ 

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

Trong ví dụ này, vòng lặp bắt đầu với biến i ở giá trị 0 và thực hiện miễn là i < 5 là true. Trong mỗi lần lặp, i được tăng thêm 1, và khi i đạt giá trị 5, điều kiện trở thành false và vòng lặp kết thúc. Kết quả là, câu lệnh while hiển thị từ 0 đến 4.

Không giống như câu lệnh for, trong câu lệnh while, việc khởi tạo và cập nhật biến được viết dưới dạng các câu lệnh riêng biệt. Bạn cũng có thể tham chiếu đến biến sau câu lệnh while. Trong trường hợp này, giá trị 5 được hiển thị sau khi câu lệnh while kết thúc.

Vòng lặp vô hạn

Nếu điều kiện luôn là true, một vòng lặp vô hạn sẽ xảy ra và không kết thúc. Vòng lặp vô hạn nên tránh, nhưng nếu được sử dụng có chủ đích, bạn có thể kết thúc vòng lặp bằng một câu lệnh break.

Ví dụ 

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Xử lý mảng với vòng lặp while

Cũng có thể xử lý mảng với câu lệnh while.

Ví dụ 

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Câu lệnh do...while

Cú pháp Cơ bản 

1do {
2    // Code that is executed at least once
3} while (condition);

Câu lệnh do...while, một biến thể của câu lệnh while, kiểm tra điều kiện sau khi thực hiện vòng lặp ít nhất một lần. Trong khi câu lệnh while kiểm tra điều kiện trước tiên, câu lệnh do...while thực thi quá trình một lần trước khi xác minh điều kiện.

Ví dụ 

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

Trong ví dụ này, i được hiển thị từ 0 đến 4. Câu lệnh do...while khác với câu lệnh while ở chỗ nó luôn được thực thi một lần, ngay cả khi điều kiện là false.

Tóm tắt

  • Câu lệnh while được sử dụng để lặp lại mã khi điều kiện là true.
  • Hãy cẩn thận với vòng lặp vô hạn, nhưng bạn có thể kiểm soát luồng của vòng lặp bằng cách sử dụng break và continue.
  • Câu lệnh do...while hữu ích khi bạn muốn thực thi vòng lặp ít nhất một lần.

break và continue

Bạn có thể sử dụng break và continue trong vòng lặp.

  • break được sử dụng để kết thúc vòng lặp trước thời hạn.
  • continue bỏ qua vòng lặp hiện tại và tiếp tục với vòng lặp tiếp theo.

Ví dụ về break 

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

Trong trường hợp này, break được thực thi khi i đạt đến 5. Kết quả là, các số từ 0 đến 4 được hiển thị.

Ví dụ về continue 

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

Trong trường hợp này, continue được thực thi khi i bằng 2. Kết quả là, các số khác 2 được hiển thị.

Vòng lặp lồng nhau trong JavaScript

Trong lập trình JavaScript, một vòng lặp lồng nhau là một cấu trúc trong đó một vòng lặp tồn tại bên trong một vòng lặp khác. Các vòng lặp như vậy rất hiệu quả khi các thuật toán hoặc quy trình cụ thể bao gồm nhiều chiều hoặc lớp. Ví dụ, xử lý một mảng đa chiều với các mảng nằm trong các mảng là một trường hợp điển hình.

Ở đây, chúng tôi sẽ giải thích cấu trúc cơ bản của vòng lặp lồng nhau, các ví dụ sử dụng, các lưu ý cần biết, và các cân nhắc để tối ưu hóa.

Cấu trúc cơ bản của vòng lặp lồng nhau

Cấu trúc cơ bản của vòng lặp lồng nhau là dạng mà một hoặc nhiều vòng lặp nằm trong một vòng lặp khác. Mỗi lần vòng lặp bên ngoài được thực thi một lần, vòng lặp bên trong sẽ được thực thi số lần tương ứng.

Dưới đây là một ví dụ cơ bản về hai vòng lặp lồng nhau.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

Trong đoạn mã trên, i được đếm trong vòng lặp bên ngoài, còn j được đếm trong vòng lặp bên trong. Mỗi lần vòng lặp bên ngoài thực thi một lần, vòng lặp bên trong thực thi hai lần.

Ví dụ thực tế về vòng lặp lồng nhau

Vòng lặp lồng nhau đặc biệt hữu ích trong việc xử lý mảng đa chiều. Ví dụ, khi xử lý một mảng hai chiều, bạn cần xử lý cả hàng (vòng lặp bên ngoài) và cột (vòng lặp bên trong).

Trong ví dụ sau, chúng ta xử lý một mảng hai chiều và in từng phần tử ra.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

Theo cách này, sử dụng vòng lặp lồng nhau cho phép truy cập từng phần tử của mảng hai chiều.

Ghi chú

Có một số điểm cần lưu ý khi sử dụng vòng lặp lồng nhau.

  1. Vấn đề hiệu suất

    Khi vòng lặp lồng nhau trở nên sâu hơn, thời gian thực thi tăng đáng kể. Ví dụ, nếu vòng lặp bên ngoài thực thi 100 lần và vòng lặp bên trong 100 lần, tổng cộng có 10.000 phép toán được thực hiện. Vì vậy, nếu có nhiều lần lặp, bạn nên xem xét tối ưu hóa vòng lặp để đạt được hiệu quả.

  2. Ứng dụng vào các thuật toán phức tạp

    Vòng lặp lồng nhau rất mạnh mẽ, nhưng khi xử lý trở nên phức tạp, mã có thể trở nên khó hiểu. Vì vậy, để duy trì tính dễ đọc của mã, điều quan trọng là tổ chức xử lý bằng các chú thích và hàm thích hợp.

Những cân nhắc về tối ưu hóa

Khi sử dụng vòng lặp lồng nhau, có thể xem xét các cách tối ưu hóa sau.

  1. Kết thúc vòng lặp sớm

    Nếu một điều kiện cụ thể được đáp ứng trong vòng lặp, bạn có thể sử dụng câu lệnh break để thoát khỏi vòng lặp. Điều này có thể tránh được các vòng lặp không cần thiết và cải thiện hiệu suất.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

  1. Di chuyển các phép tính ra ngoài

    Thay vì thực hiện cùng một phép tính trong vòng lặp mỗi lần, bạn có thể thực hiện một lần bên ngoài vòng lặp và sử dụng kết quả để làm cho quá trình hiệu quả hơn.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Tóm tắt

Vòng lặp lồng nhau rất hữu ích trong việc xử lý các cấu trúc dữ liệu và thuật toán phức tạp trong JavaScript. Tuy nhiên, nếu không sử dụng đúng cách, chúng có thể gây ra sự suy giảm hiệu suất và giảm tính dễ đọc của mã. Để sử dụng vòng lặp lồng nhau một cách hiệu quả, điều quan trọng là cố gắng tối ưu hóa vòng lặp và tổ chức mã, đồng thời áp dụng các phương pháp phù hợp tùy thuộc vào tình huống.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các phương pháp tốt nhất cho câu lệnh điều kiện trong JavaScriptCác phương pháp hay nhất cho việc lặp lại trong JavaScript