Các vòng lặp được sử dụng trong lập trình để tự động hóa các tác vụ lặp đi lặp lại. Các loại vòng lặp cơ bản nhất được sử dụng trong JavaScript là while và do...while, các câu lệnh bạn có thể xem lại trong bài "Cách xây dựng vòng lặp while và do...while trong JavaScript".
Bởi vì trong khi các câu lệnh while và do..while dựa trên điều kiện, chúng thực thi khi và chỉ khi điều kiện đã cho trả về true . Câu lệnh for cũng dựa trên điều kiện nhưng nó có thêm tính năng bổ sung như bộ đếm vòng lặp cho phép bạn thiết lập số lần lặp trước.
Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu về câu lệnh for , bao gồm cả câu lệnh for...of và for...in là các phần tử quan trọng trong ngôn ngữ lập trình Javascript.
Vòng lặp For
Câu lệnh for là một loại vòng lặp sẽ sử dụng tối đa ba biểu thức tùy chọn để triển khai thực thi lặp lại của một khối mã.
Chúng ta hãy xem về dụ để hiểu rõ vấn đề này.
for (Khởi tạo; điều kiện lặp; bước lặp) {
// code thực thi được viết ở đây
}Trong cú pháp trên có ba biểu thức bên trong câu lệnh for: khởi tạo, điều kiện và bước lặp.
Dưới đây là ví dụ đơn giản minh họa cách hoạt động của câu lệnh for
// 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 mỗi lần lặp
console.log(i);
}Khi chúng ta chạy đoạn code trên sẽ nhận được kết quả sau:
Output0
1
2
3
Trong ví dụ trên, chúng ta đã khởi tạo vòng lặp for với let i = 0, bắt đầu vòng lặp tại 0. Chúng ta đặt điều kiện là i <4, có nghĩa là miễn dưới 4, vòng lặp sẽ tiếp tục chạy. Biểu thức cuối cùng của chúng ta về i ++ tăng biến i lên 1 cho mỗi lần lặp qua vòng lặp. Console.log (i) in ra các số, bắt đầu bằng 0 và dừng lại đến 3.
Nếu không sử dụng vòng lặp, chúng ta có thể đạt được kết quả tương tự khi sử dụng đoạn mã sau.
// Khởi tạo biến ban đầu là 0
let i = 0;
//biến tăng lên 1 trong mỗi câu lệnh dưới đây
console.log(i++);//0, toán tử hậu tố nên in giá trị sau đó mới tăng giá trị
console.log(i++);//1
console.log(i++);//2
console.log(i++);//2Vòng lặp không lặp tại chỗ, trong khối mã trên nếu chúng ta muốn tăng số lần lặp chúng ta phải thêm nhiều dòng hơn.
Bây giờ chúng ta sẽ đi qua từng biểu thức trong vòng lặp để hiểu chúng đầy đủ hơn.
Khởi tạo
Biểu thức đầu tiên là khởi tạo. Bạn nhìn vào khởi tạo bên dưới như sau.
let i = 0;Chúng ta khai báo 1 biến i với từ khóa let (từ khóa var cũng có thể được sử dụng) và nhận giá trị là 0. Biến có thể được đặt tên bất kỳ đúng quy tắc. Biến i là viết tắt của iteration, nhất quán và giữ mã nhỏ gọn. Nên tôi thường sử dụng nó.
Điều kiện
cũng giống như vòng lặp while và do...while , vòng lặp for cũng thường chứa 1 điều kiện. Câu lệnh điều kiện của chúng ta dưới đây.
i < 4;Chúng ta đã thiết lập biến lắp của chúng ta là i và gán cho nó giá trị 0 để bắt đầu. Bây giờ điều kiện là true khi biến i nhỏ hơn 4 trong ví dụ này.
Bước Lặp (Final Expression)
Biểu thức cuối cùng là một câu lệnh được thực hiện ở cuối mỗi vòng lặp. Nó thường được sử dụng để tăng hoặc giảm giá trị, nhưng nó có thể được sử dụng cho bất kỳ mục đích nào.
i++Trong ví dụ của chúng ta, chúng ta tăng biến lên 1 với i++, điều này cũng giống như chạy i=i+1.
Không giống như các biểu thức khởi tạo và điều kiện, biểu thức cuối cùng không kết thúc bằng dấu chấm phẩy.
Đặt 3 biểu thức lại cùng nhau
Chúng ta đã xem xét ba biểu thức có trong vòng lặp for, chúng ta có thể xem lại toàn bộ vòng lặp như sau.
// Khởi tạo câu lệnh for với 5 lần lặpfor (let i = 0; i < 4; i++) {
console.log(i);
}Đầu tiên chúng ta khai báo biến i và đặt nó bằng 0 . Sau đó chúng ta đặt điều kiện cho vòng lặp chạy đến giá trị nhỏ hơn 4 thì dừng lại , cuối cùng là biểu thức tăng giá trị lên 1 sau mỗi lần lặp. khối lệnh của chúng ta sẽ in ra giá trị lên màn hình console, kết quả là 0 1 2 3
Tùy chọn cách viết biểu thức
Có tất cả 3 biểu thức trong vòng lặp for . Ví dụ sau, chúng ta có thể viết câu lệnh for không có biểu thức khởi tạo bởi vì chúng ta khởi tạo ngoài vòng lặp.
//Khởi tạo biến ngoài vòng lặp
let i = 0;
// Khởi tạo vòng lặp
for (; i < 4; i++) {
console.log(i);
}0123Trong trường hợp này dấu ; rất cần thiết cho biểu thức khởi tạo, điều kiện, bước lặp, kể cả khi không có gì trong biểu thức.
Bên dưới, chúng ta cũng có thể xóa điều kiện khỏi vòng lặp. Chúng ta sẽ sử dụng câu lệnh if kết hợp với câu lệnh break để báo cho vòng lặp ngừng chạy khi i lớn hơn 3 , đó là điều kiện ngược lại với true
// Khai báo 1 biến ngoài vòng lặp i
let i = 0;
// bỏ biểu thức khởi tạo và điều kiện nhưng vẫn giữ lại dấu ;
for (; ; i++) {
if (i > 3) {
break;
}
console.log(i);
}
Cuối cùng, Biểu thức cuối cùng có thể loại bỏ bằng cách thay thế bằng cách đặt ở cuối vòng lặp, nhưng vẫn phải giữ dấu ; nếu không nó sẽ không chạy nữa.
// Khai báo biến bên ngoài vòng lặp
let i = 0;
//loại bỏ các biểu thức nhưng vẫn phải giữ dấu ;
for (; ;) {
if (i > 3) {
break;
}
console.log(i);
i++;
}
Output
0
1
2
3Chúng ta có thể nhìn ví dụ bên dưới, Bao gồm cả 3 câu lệnh thường ngắn gọn và dễ đọc nhất, Tuy nhiên, thật hữu ích khi biết rằng các câu lệnh có thể được bỏ qua trong trường hợp bạn gặp phải nó trong tương lai.
Sửa đổi 1 mảng
Chúng ta có thể sử dụng vòng lặp for để sửa đổi 1 mảng.
Trong ví dụ tiếp theo, chúng ta sẽ tạo ra 1 mảng rỗng và điền các phần tử vào trong mảng đó với vòng lặp
// Khởi tạo 1 mảng rỗng
let arrayExample = [];
// Khởi tạo vòng lặp chạy 3 lần
for (let i = 0; i < 3; i++) {
// Cập nhật giá trị mảng với giá trị biến i
arrayExample.push(i);
console.log(arrayExample);
}Thực thi code sẽ cho ra kết quả bên dưới
Output
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]Chúng ta thiết lập 1 vòng lặp chạy cho đến khi i<3, có nghĩa i==3 vòng lặp sẽ dừng lại, ta thấy cuối mỗi vòng lặp các giá trị mới sẽ được cập nhật.
Chiều dài của 1 mảng
Đôi khi, chúng tôi có thể muốn một vòng lặp chạy một số lần mà không chắc chắn về số lần lặp lại sẽ là bao nhiêu. Thay vì khai báo một số tĩnh, như chúng ta đã làm trong các ví dụ trước, chúng ta có thể sử dụng thuộc tính length của một mảng để có vòng lặp chạy nhiều lần thông qua chỉ số mảng.
// Khai báo mảng với 3 chuỗi
let fish = [ "flounder", "salmon", "pike" ];
//Khởi tạo vòng lặp chạy hết chiều dài của mảng
for (let i = 0; i < fish.length; i++) {
//In giá trị các chuỗi ra màn hình console
console.log(fish[i]);
}Chúng ta có kết quả sau.
Trong ví dụ này, Chúng ta tăng từng chỉ số của mảng bằng fish[i] (ví dụ: vòng lặp sẽ tăng thông qua fish[0], fish[1],....fish[fish.length -1])), điều này sẽ linh động hơn trọng việc duyệt mảng.
Thông tin chi tiết hơn về vòng lặp for có sẵn trên Mozilla Developer Network các bạn nên thảm khảo thêm.
Vòng lặp For...in
Câu lệnh for...in lặp lại các thuộc tính của đối tượng . Để chứng minh, chúng ta sẽ tạo một đối tượng sark đơn giản với một vài cặp tên
const shark = {
species: "great white",
color: "white",
numberOfTeeth: Infinity
}Sử dụng vòng lặp for...in , chúng ta có thể dễ dàng truy cập tên các thuộc tính của đối tượng
// In tên thuộc tính của đối tượng
for (attribute in shark) {
console.log(attribute);
}Chúng ta cũng có thể truy nhập giá trị mỗi thuộc tính bằng cách sử dụng tên các thuộc tính làm giá trị chỉ mục của đối tượng
//In giá trị của mỗi thuộc tính
for (attribute in shark) {
console.log(shark[attribute]);
}
Output
great white
white
InfinityĐặt chúng lại với nhau chúng ta có thể truy nhập tất cả tên và giá trị của đối tượng.
//In tên và giá trị thuộc tính của đối tượng
for (attribute in shark) {
console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}
Output
SPECIES: great white
COLOR: white
NUMBEROFTEETH: InfinityChúng ta sử dụng phương thưc toUpperCase() để sửa đổi tên thuộc tính thành viết hoa, và theo sau nó là giá trị của các thuộc tính. for...in là vòng lặp cực kỳ hữu ích để lặp qua các thuộc tính đối tượng
Xem lại for...in trêb Mozilla Developer Network để biết thêm thông tin.
Vòng lặp For...Of
Câu lệnh for ... in là hữu ích cho việc lặp qua các thuộc tính đối tượng, nhưng để lặp qua các đối tượng có thể lặp lại như mảng và chuỗi, chúng ta có thể sử dụng câu lệnh for...of , câu lệnh for...of là tính năng mới của ECMAScript 6. ECMAScript (hoặc ES) là một đặc tả ngôn ngữ kịch bản được tạo để chuẩn hóa JavaScript.
Trong ví dụ này cho 1 vòng lặp for...of, chúng ta sẽ tạo 1 mảng và in từng phần tử ra màn hình console.
// Khởi tạo mảng các loại sharks
let sharks = [ "great white", "tiger", "hammerhead" ];
//In mỗi loại shark ra màn hình console
for (let shark of sharks) {
console.log(shark);
}Chúng ta sẽ nhận kết quả đầu ra sau.
Output
great white
tiger
hammerheadTa cũng có thể in ra chỉ mục được liên kết với các phần tử chỉ mục bằng cách sử dụng phương thức entries ().
...
// Lặp qua cả chỉ mục và phần tử
for (let [index, shark] of sharks.entries()) {
console.log(index, shark);
}
Output
0 'great white'
1 'tiger'
2 'hammerhead'1 chuỗi có thể được lặp giống như mảng
// Gán giá trị của biến là 1 chuỗi
let sharkString = "sharks";
// Lặp lại qua mỗi chỉ mục trong mảng
for (let shark of sharkString) {
console.log(shark);
}
Output
s
h
a
r
k
sTrong trường hợp này, chúng ta lặp qua từng ký tự trong chuỗi, in chúng theo thứ tự tuần tự.
Tìm hiểu thêm sự khác nhau giữa vòng lặp for...of và for...in trên Mozilla Developer Network.
Phần kết luận
Trong hướng dẫn này, chúng tôi chỉ cách xây dựng các vòng lặp trong 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.
Bài viết được dịch từ trang: http://www.digitalocean.com
Bình luận