1./ Đặt vấn đề

Vòng lặp được sử dụng trong chương trình để công cụ tự động lặp đi lặp lại. Kiểu cơ bản nhất của vòng lặp được dùng trong Java là kiểu cấu trúc while và do...while cái mà bạn có thể tìm trong bài viết " làm thế nào để xây dựng while and do vòng lặp trong JavaScript."

Vì  cấu trúc while và do...while là điều kiện cơ bản,nó có thể thi hành một cấu trúc và trả về một kết quả True. Cấu trúc vòng lặp For bao gồm một bộ đếm vòng lặp, cho phép bạn xác định số lượng vòng lặp trước.

Trong hướng dẫn này, ta sẽ được học về cấu trúc For bao gồm For.. of và for.. in, là những công cụ cần cho ngôn ngữ lập trình JavaScript.

2./ Vòng lặp For

Câu lệnh của vòng lặp For có tối đa ba biến số nhằm triển khai, thực thi lặp đi lặp lại một khối mã.

Chúng ta cùng xem một ví dụ

for (initialization; condition; final expression) {
    // code to be executed
}

Trong cú pháp trên có ba biến số trong vòng lặp For: 

+) initialization: Biểu thức khởi tạo, hay có cách gọi khác là lần chạy đầu tiên

+) condition: Điều kiện thực hiện vòng lặp.

+) final expression: biểu thức cuối cùng, hay có thể hiểu là biểu thức chạy sau cùng mỗi lần của vòng lặp

Một ví dụ thực tế về vòng lặp:

// Khởi tạo câu lệnh For với 5 lần lặp
for (let i = 0; i < 4; i++) {
    // in ra màn hình console
    console.log(i);
}

Sau khi chạy đoạn mã trên ta sẽ có kết quả sau:

Output
0
1
2
3

Trong ví dụ thực tế ở trên, chúng ta đã khởi tạo vòng lặp For với lần chạy đầu tiên có biến i=0, và điều kiện của vong lặp là miễn biến i<0 thì vòng lặp vẫn tiếp tục chạy. Khi điều kiện được thỏa mã thì chúng ta sẽ chạy biểu thức cuối cùng i++  nhằm tăng giá trị của biến i sau mỗi lần lặp. Sử dụng hàm console.log(i) để in ra các số, bắt đầu bằng 0 và dừng lại sau khi biến i đạt giá trị 4.

Nếu không sử dụng vòng lặp, chúng ta vẫn có thể đạt được kết quả tương ứng bằng cách sau đây: 

// Đặt biến ban đầu bằng 0
let i = 0;

// Giá trị của i sẽ tăng lên một cách thủ công thêm từng lần
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

Nếu không có vòng lặp, chúng ta sẽ phải viết tăng số lượng dòng. Ngoài ra nếu muốn tiếp tục lặp thì sẽ phải tiếp tục tăng số lượng dòng.

Hãy cùng tìm hiểu từng bước của biểu thức để có thể hiểu rõ chúng.

3./ Biểu thức khởi tạo

let i = 0;

Chúng ta sẽ gọi ra biến i bằng một từ khóa let ( có thể được thay bằng var) và gắn cho nó giá trị bằng 0. Tên của biến thì có thể chọn bất kỳ, nhưng chúng ta hay lựa chọn i. Giá trị i là viết tắt của lặp, nó thích hợp và giúp thu gọn mã .

4./ Điều kiện lặp

Các vong lặp while và do...loops, hay vòng lặp for đều có điểm chung là phải có điều kiện lặp. Đậy là điều kiện đã sử dụng ở trên:

i < 4;

Chúng ta đã đặt biến khởi tạo ở trên, biến i sẽ bắt đầu chạy từ 0. Với điều kiện này chúng ta hiểu là biểu thức sẽ đúng với điều kiện i phải nhỏ hơn 4.

5./ Biều thức kết thúc

Biểu thức kết thúc sẽ được thực hiện ở cuối mỗi vòng lặp. Nó thường được sử dụng để tăng, giảm giá trị của biến, nhưng ngoài ra có còn có thể được sử dụng cho các mục đích khác

i++

Ở ví dụ này chúng ta sẽ tăng giá trị với i++. Nó sẽ được chạy i = i + 1.

Khác với biểu thức khởi tạo và điều kiện, thì biểu thức kết thúc mà không có dấu chấm phẩy.

6./ khi hoạt động

Bây giờ chúng ta sẽ xem cả ba biểu thức cùng hoạt động trong vòng lặp for và xem các bước thực hiện vòng lặp

// Khởi tạo câu lênh for với 5 lần lặp
for (let i = 0; i < 4; i++) {
    console.log(i);
}

Đầu tiên chúng ta khởi tạo i với giá trị bằng 0. Sau đó ta sẽ thiết lập vòng lặp i đến 4. Cuối cùng, chúng ta sẽ tăng i từng đơn vị một. Kết quả được in ra với giá trị i lần lượt là 0, 1, 2, 3.

7./ Biểu thức tùy chọn

Tất cả ba biểu thức trong vòng lặp for là tùy chọn. Ví dụ, chúng ta có thể viết lệnh tương tự cho câu lệnh không có biểu thức khởi tạo bằng cách khởi tạo biến bên ngoài vòng lặp.

// Khai báo biến ngoài vong lặp
let i = 0;

// Khởi tạo vòng lặp
for (; i < 4; i++) {
    console.log(i);
}

Output
0
1
2
3

Ở biểu thức thứ nhất này, chúng ta vẫn phải truyền vào các biểu thức khởi tạo, điều kiện, và biểu thức kết thúc, ngay cả khi nó đã được bỏ qua.

Dưới đây, chúng ta có thể bỏ điều kiện lặp ra khỏi vòng lặp. Chúng ta sẽ sử dụng câu lệnh if kết hợp với break, và cho biến i chạy đến 3, đó là điều kiện ngược với điều kiện thật sự

// Khai báo biến ngoài vong lặp
let i = 0;

// Bỏ qua khởi tạo và điều kiện
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}

Output
0
1
2
3

Chú ý: cấu trúc break phải được tính nếu điều kiện đc bỏ qua, nếu không vòng lặp sẽ chạy mãi mãi như 1 vòng lặp vĩnh cửu và có khả năng phá vỡ trình duyệt.

Cuối cùng, ta có thể bỏ biểu thức kết thúc ra khỏi vòng lặp. Tuy nhiên vẫn phải để các dấu chấm phẩy, nếu không vòng lặp sẽ không hoạt động.

// Khai báo biến ngoài vòng lặp
let i = 0;

// Bỏ tất cả các biểu thức
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

Output
0
1
2
3

Như chúng ta có thể thấy từ các ví dụ trên, bao gồm cả ba biểu thức thường tạo ra mã ngắn gọn và dễ đọc nhất. Tuy nhiên, thật hữu ích khi biết rằng các biểu thức có thể được bỏ qua trong trường hợp bạn gặp phải nó trong tương lai.

8./ Khả năng sửa đổi một mảng

Chúng ta có thể sử dụng vòng lặp for để sửa nội dung một mảng.

Ví dụ sau đây, chúng tôi sẽ tạo ra một mảng và dữ liệu bằng đếm số vòng lặp.

// Tham số đầu vào là một mảng rỗng
let arrayExample = [];

// Tham số đầu vào sẽ lặp 3 lần
for (let i = 0; i < 3; i++) {
    // In ra các giá trị sau mỗi lần lặp
    arrayExample.push(i);
    console.log(arrayExample);
}

Output
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

Chúng ta sẽ thiết lập vòng lặp có điều kiện i<3, và sẽ gọi ra màn hình console những arrayExample ở cuối mỗi vòng lặp. Cùng với phương thức này chúng ta có thể nhìn thấy những mảng mới cùng với các giá trị mới.

9./ chiều dài của mảng

Đôi khi chúng ta muốn tạo ra một vòng lặp mà không cần biết rõ cụ thể số lần lặp. Thay vì khai báo số tĩnh chúng ta có thể sử dụng thuộc tính length của một mảng để vòng lặp chạy số lần tương ứng với số phần tử trong mảng.

// Khai báo một mảng có 3 phần tử
let fish = [ "flounder", "salmon", "pike" ];

// Khởi tạo vòng lặp chạy bằng tổng số chiểu dài của mảng
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

Output
flounder
salmon
pike

Ở ví dụ này, chúng ta sẽ tăng lên từng vị trí của mảng với fish[i] ( Ví dụ vòng lặp sẽ chạy fish[0], fish[1], v..v..).  Trường hợp này, vị trí sẽ được tự động cập nhật với mỗi vòng lặp.\

10./ Vòng lặp For...In

Vòng lặp For...In được sử dụng để lặp các đối tượng trong một Object. Để làm sáng tỏ, chúng ta sẽ tạo ra một biến shark là một Object gồm một vài cặp thuộc tính và giá trị.

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}
// In ra màn hình tên thuộc tính của Object
for (attribute in shark) {
    console.log(attribute);
}

Output

species
color
numberOfTeeth

Chúng ta có thể truy cập các giá trị bằng cách sử dụng tên thuộc tính giá trị của Object

// In ra màn hình các giá trị của Object
for (attribute in shark) {
    console.log(shark[attribute]);
}

Output
great white
white
Infinity

Đặt chúng lại với nhau ta sẽ thu được cả thuộc tính và giá trị của thuộc tính.

// In ra màn hình thuộc tính và giá trị
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}

Output
SPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

Chúng tôi đã sử dụng phương thức toUpperCase () để sửa đổi tên thuộc tính và theo sau nó bằng giá trị thuộc tính. Vòng lặp for...in là một cách cực kỳ hữu ích để lặp qua các thuộc tính đối tượng.

11./ Vòng lặp For..Of

Cấu trúc for... in hữu ích được dùng cho lặp lại một Object, nhưng việc lặp lại Object  có thể lặp lại giống như array và strings, ta có thể dùng cấu trúc for.. of. Cấu trúc for.. of là cấu trúc mới đi kèm với ECMAScript 6 . ECMAScript 6 ( hay còn gọi là E6) là 1 loại ngôn ngữ đặc tưng của JavaScript.

Ví dụ về vòng lặp For ... Of, chúng ta có thể tạo ra mảng và in chúng trên màn hình console.

// Khởi tạo một mảng sharks 
let sharks = [ "great white", "tiger", "hammerhead" ];

// in ra những phần tử của shark
for (let shark of sharks) {
    console.log(shark);
}

Output
great white
tiger
hammerhead

Cũng có thể in ra những vị trí của phần từ bằng phương thức entries().

// Lặp qua các trí và phần tử
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}

0 'great white'
1 'tiger'
2 'hammerhead'

Một chuỗi có thể được lặp qua giống như một mảng

// gán cho biến một chuỗi
let sharkString = "sharks";

// In ra những phần tử của chuỗi
for (let shark of sharkString) {
    console.log(shark);
}

Output
s
h
a
r
k
s

Trong trường hợp này chúng ta có thể in ra từng ký tự của chuỗi một cách tuần tự.

12./ Kết luận

Ở bài học này, chúng ta đã được học những cách để xây dựng vòng lặp For tron JavaScript, bao gồm for, for...of,  và for...in.

Vòng lặp là một phần không thể thiếu trong lập trình bằng JavaScript và được sử dụng để tự động hóa các tác vụ lặp lại và làm cho mã ngắn gọn và hiệu quả hơn.