Vòng lặp là một công cụ mạnh mẽ giúp lặp lại một khối mã nhiều lần một cách nhanh chóng, nhưng đôi khi chính vòng lặp sẽ mang lại rất nhiều phiền phức về hiệu năng cũng như bug trong quá trình hoạt động. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về vòng lặp trong JavaScript một trong những ngôn ngữ lập trình Web thông dụng và được sử dụng nhiều nhất hiện nay. Sau đây sẽ là cách sử dụng, ví dụ đi kèm các lưu ý khi sử dụng vòng lặp trong JavaScript:

1. Giới thiệu về vòng lặp trong JavaScript

Vòng lặp là một công cụ rất quan trọng trong lập trình nói chung và lập trình JavaScript nói riêng. Việc sử dụng vòng lặp đúng lúc, đúng chỗ sẽ giúp giảm tải việc viết mã, đồng thời tạo ra hiệu suất tốt hơn cho chương trình. Các loại vòng lặp phổ biến trong trong JavaScript như: for, while, do … while. Đây là những loại vòng lặp cơ bản, cũng như được dùng nhiều nhất trong lập trình, với những loại vòng lặp cơ bản trên chúng ta có thể áp dụng vào rất nhiều tình huống khác nhau.

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

  • Vòng lặp “for"
for (i = 0; i < 20; i++) {
    // Code Block
}

Trong đó:

  • i: là biến điều khiển vòng lặp

  • i = 0: điểm bắt đầu vòng lặp bắt đầu từ không

  • i < 20: là điều kiện dừng vòng lặp. Nó có thể là bất cứ điều kiện gì có thể có giá trị true hoặc false.

  • i++: là bước nhảy tăng chỉ số của i. Nó có thể là: i + 2, i--, … Với ví dụ trên thì vòng lặp sẽ bắt đầu từ 0 và kết thúc khi i = 19

  • Vòng lặp “while"

let i = 0
while (i < 20) {
    // Code block
    i++;
}

Trong đó:

  • i: là biến điều khiển vòng lặp

  • i < 20: là điều kiện dừng vòng lặp. Nó có thể là bất cứ điều kiện gì có thể có giá trị true hoặc false

  • i++: là bước nhảy tăng chỉ số của i. Nó có thể là: i + 2, i--, … Với ví dụ trên thì vòng lặp sẽ bắt đầu từ 0 và kết thúc khi i = 19

  • Vòng lặp “do - while"

let i = 0;
do {
    // Code block
    i++;
} while (i < 20)

Trong đó:

  • i: là biến điều khiển vòng lặp

  • i < 20: là điều kiện dừng vòng lặp. Nó có thể là bất cứ điều kiện gì có thể có giá trị true hoặc false

  • i++: là bước nhảy tăng chỉ số của i. Nó có thể là: i + 2, i--, … Với ví dụ trên thì vòng lặp sẽ bắt đầu từ 0 và kết thúc khi i = 19

  • Vòng lặp “forEach”

array.forEach(function(currentValue, index, arr), thisValue)

Trong đó:

  • function: là hàm sẽ được thực thi trong mỗi vòng lặp

  • currentValue: là giá trị của phần tử hiện tại

  • index: là chỉ số của phần tử hiện tại

  • arr: là mảng của phần tử hiện tại

  • thisValue: giá trị truyền vào function dưới dạng “this"

  • Vòng lặp “for … in”

for (let key in object) {
    // Code block
}

Trong đó:

  • object: đối tượng của vòng lặp có thể là object hoặc array

  • key: là key của phần tử hiện tại

  • Vòng lặp “for … of"

for (let variable in object) {
    // Code block
}

Trong đó:

  • object: đối tượng của vòng lặp có thể là array hoặc string

  • variable: là giá trị tại vòng lặp hiện tại

  • Vòng lặp “map”

array.map(function(currentValue, index, arr), thisValue)

Trong đó:

  • function: là hàm sẽ được thực thi trong mỗi vòng lặp
  • currentValue: là giá trị của phần tử hiện tại
  • index: là chỉ số của phần tử hiện tại
  • arr: là mảng của phần tử hiện tại
  • thisValue: giá trị truyền vào function dưới dạng “this"

3. Tối ưu hóa hiệu suất của vòng lặp trong JavaScript

Trong những hệ thống lớn hiệu suất luôn là yêu cầu không thể thiếu. Với những vòng lặp đã được tìm hiểu ở trên, mỗi vòng lặp đều có ưu, nhược điểm riêng của nó. Nắm vững được vòng lặp trong JavaScript sẽ giúp lập trình viên tự tin cũng như tạo ra những đoạn mã tốt hơn.

  • Sử dụng vòng lặp “for" thay vì “while"
    • Không nên:
let i = 0;
while (i < 20) {
    console.log(i);
    i++;
}
  • Nên:
for (i = 0; i < 20; i++) {
    console.log(i);
}

  • Lý do: khác với vòng lặp “while" vòng lặp “for" cho phép khai báo và cập nhật biến điều khiển ngay trong vòng lặp. Điều này tránh tình huống lặp vô tận và làm cho mã dễ đọc hơn

  • Giảm thiểu số lần truy cập vào thuộc tính của đối tượng

    • Không nên:
for (i = 0; i < arr.length; i++ ) {
    console.log(arr[i]);
}
  • Nên:
cosnt length = arr.length;
for (i = 0; i < length; i++ ) {
    console.log(arr[i]);
}

  • Lý do: trong một tiến trình nhỏ việc này sẽ không thể hiện sự thay đổi quá lớn. Nhưng, việc lưu giá trị vào một biến tạm giúp tránh việc truy cập vào thuộc tính mảng trong mỗi vòng lặp. Việc này sẽ hỗ trợ tốt hơn cho bảo trì mã, giảm độ phức tạp và tăng hiệu suất vòng lặp

  • Sử dụng vòng lặp “for" ngược khi có thể

    • Không nên:
for (i = 0; i < arr.length; i++) {
    console.log(arr[arr.length - i -1]);
}
  • Nên:
for (i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]);
}

  • Lý do: trong một số trường hợp nếu cảm thấy việc lặp từ cuối sẽ tìm được kết quả nhanh hơn, thì việc dùng vòng lặp “for" ngược sẽ tiết kiệm thời gian và tăng hiệu suất vòng lặp.

  • Không nên gọi các hàm trực tiếp trong vòng lặp

    • Không nên:
const length = arr.length;
for (i = 0; i < length; i++) {
    console.log(arr[i]); // Code Execute
}
  • Nên:
const functionExecute(data) {
    console.log(data);
}
const length = arr.length;
for (i = 0; i < length; i++) {
    functionExecute(arr[i]);
}

Lý do: gọi hàm trong vòng lặp sẽ dẫn đến việc tạo và hủy các ngữ cảnh thực thi qua mỗi lần lặp. Bằng việc gọi hàm ngữ cảnh thực thi chỉ cần tạo một lần và được tái sử dụng lại cho đến khi kết thúc vòng lặp, giúp tăng tốc độ thực thi.

  • Sử dụng “forEach" hoặc “map" thay vì vòng lặp truyền thống
    • Không nên:
const length = arr.length;

for (i = 0; i < length; i++) {
    console.log(arr[i]);
}
let newArr = 0;
for (i = 0; i < length; i++) {
    arr[i] += 1;
}
  • Nên:
arr.forEach((e) => {
    console.log(e);
});
const newArr = arr.map((e) => {
    return e + 1;
});
  • Lý do: “forEach" hoặc “map" là các phương thức có sẵn trên mảng trong JavaScript, với việc đã được tối ưu hóa sẵn để thực hiện vòng lặp khiến cho chúng ngắn gọn, dễ đọc và thường sẽ tạo ra mã tối ưu hơn so với việc sử dụng vòng lặp truyền thống

4. Tổng kết

Trên đây là toàn bộ những gì cần thiết nhất để làm quen với vòng lặp trong JavaScript và cách tối ưu hiệu suất của chúng. Bằng những kiến thức cơ bản trên triển khai và phát triển sẽ giúp mã tối ưu và tăng hiệu suất hơn. Ngoài các kiến thức về vòng lặp trong JavaScript thì còn nhiều kiến thức tối ưu sẽ giúp hiệu suất tốt hơn cho hệ thống, cũng như bảo trì dễ dàng hơn

Stringee hiện là đơn vị cung cấp bộ giải pháp giao tiếp Communication APIs giúp doanh nghiệp dễ dàng tích hợp các tính năng giao tiếp như gọi thoại/gọi video/chat vào ứng dụng hoặc website sẵn trong thời gian ngắn với chi phí tối ưu nhất. Giải pháp này cũng được hỗ trợ cho nền tảng React Native, chi tiết xin mời quý bạn đọc xem thêm tại đây.