Các loại vòng lặp trong JavaScript – All In One – https://final-blade.com

Posted on Updated on by adminChuyên mục:Kiến thức Internet
Vòng lặp là một phần không hề thiếu trong bất kể một ngôn từ lập trình nào. Và JavaScript cũng vậy, trong JavaScript vòng lặp thường được sử dụng để giải quyết và xử lý đối tượng người dùng hoặc mảng. Trong bài viết này tất cả chúng ta sẽ cùng nhau tìm hiểu và khám phá về những loại vòng lặp trong JavaScript nhé !

1. Vòng lặp for trong JavaScript

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

123

for(leti=0;i< =10;i+ +){

/ / Code here

}

Giải thích về cú pháp của vòng lặp for :

  • let i = 0: Khởi tạo giá trị ban đầu cho vòng for
  • i <= 10: Điều kiện để dừng vòng lặp
  • i++: Tăng i lên 1 đơn vị để khi đã thực hiện xong 1 vòng lặp

Ví dụ sau đây sẽ in ra trình duyệt những số tăng dần từ 1 đến 10 :

123

for(leti=1;i< =10;i+ +){

document.write(i+

‘
‘

);

}

Tất nhiên bạn cũng hoàn toàn có thể viết vòng lặp for lồng nhau :

12345

for(leti=1;i< =10;i+ +){

for(letj=1;j< =10;j+ +){

/ / Code here

}

}

Ví dụ in ra trình duyệt 10 lần những dãy số từ 1 đến 10 :

123456

for(leti=1;i< =10;i+ +){

for(letj=1;j< =10;j+ +){

document.write(j+’ ‘);

}

document.write(

‘
‘

);

}

Vòng lặp for trong javaScriptKết quả

2. Vòng lặp for…in trong JavaScript

Về tính năng thì cũng giống như vòng lặp for. Vòng lặp for … in dùng để lặp những thành phần trong mảng hoặc object. Cú pháp của vòng lặp for … in :

123

for(variableinobject){

/ / Code here

}

Vòng lặp for … in hoàn toàn có thể được sử dụng như sau :

12345678910

varinformation={‘ name ‘:’ Long ‘,’ age ‘:30};

for(letiininformation){

document.write(information[i]+’ ‘);

}

/ / Kết quả : Long 30

varcolor=[‘ red ‘,’ yellow ‘,’ blue ‘,’ white ‘];

for(letxincolor){

document.write(color[x]+’ ‘);

}

/ / Kết quả : red yellow blue white

3. Vòng lặp for…of (ES6)

Vòng lặp for … of trong ES6 giúp tất cả chúng ta hoàn toàn có thể lặp qua những mảng, object thậm chí còn cả chuỗi một cách thuận tiện hơn so với hai vòng lặp for ở trên. Hãy xem ví dụ để biết chúng có gì đặc biệt quan trọng nhé :

12345

varcolor=[‘ red ‘,’ yellow ‘,’ blue ‘,’ white ‘]

;

for(letxofcolor){

document.write(x+’ ‘);

}

/ / Kết quả : red yellow blue white

Như bạn có thể thấy, khi sử dụng vòng lặp for...of thì biến x đã mang giá trị của phần tử. Nên chúng ta không cần phải sử dụng color[x] như ở vòng lặp thông thường nữa. Hơn thế nữa nó còn có thể lặp chuỗi nữa đấy:

12345

varstrings=’ vi-magento.com ‘;

for(letxofstrings){

document.write(x+’ ‘);

}

/ / Kết quả : v i – m a g e n t o. c o m

4. Vòng lặp while trong JavaScript

Đây là vòng lặp khác đơn thuần trong JavaScript. Nó sẽ lặp cho đến khi điều kiện kèm theo bạn thiết lập là sai. Vòng lặp while có cú pháp như sau :

123

while(condition){

/ / Code here

}

Trong đó condition là điều kiện để dừng vòng lặp. Ví dụ tôi muốn xuất ra ngoài trình duyệt dãy số từ 1 đến 10 đoạn code của tôi sẽ như sau:

123456

vari=1;

while(i< =10){

document.write(i+’ ‘);

i+ +;

}

/ / Kết quả : 1 2 3 4 5 6 7 8 9 10

Hãy luôn nhớ tăng lên 1 đơn vị chức năng cho biến i sau mỗi lần lặp. Nếu không vòng lặp sẽ chạy vô hạn .

5. Vòng lặp do…while trong JavaScript

Là một biến thể của vòng lặp while, vòng lặp do … while có cú pháp như sau :

123

do{

/ / Code here

}while(condition);

Như bạn hoàn toàn có thể thấy vòng lặp do … while sẽ triển khai đoạn code trong vòng lặp trước sau đó mới kiểm tra điều kiện kèm theo. Như vậy mặc dầu điều kiện kèm theo có đúng hay không thì nó cũng sẽ lặp 1 lần. Đây cũng là điểm khác nhau giữa vòng lặp while và do … while .

123456

vari=1;

do{

document.write(i+’ ‘);

i+ +;

}while(i<1);

/ / Kết quả : 1

Ví dụ in ra trình duyệt dãy số từ 1 đến 10 bằng vòng lặp do … while :

123456

vari=1;

do{

document.write(i+’ ‘);

i+ +;

}while(i< =10);

/ / Kết quả : 1 2 3 4 5 6 7 8 9 10

6. Vòng lặp forEach trong JavaScript

Sử dụng vòng lặp forEach thì code sẽ trở nên rõ ràng và ngăn nắp hơn so với vòng lặp for, while. Ta có cú pháp như sau :

123

arr.forEach(functioncallback(currentValue,index,array){

/ / Code here

}[,thisArg])

Trong đó :

  • callback: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số:
  • currentValue: phần tử hiện tại đang được xử lý của array.
  • index: chỉ mục(key) của phần tử hiện tại đang được xử lý của array.
  • array: mảng hiện tại đang gọi hàm forEach.
  • thisArg: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback.

Ví dụ tính tổng của những số trong mảng sử dụng vòng lặp forEach ( )

123456

constnumbers=[1,2,3,4,5,6,7,8,9,10];

letsum=0;

numbers.forEach(function(element){

sum+ =element;

});

console.log(sum)

;

/ / 55

Kết luận

Ở trên là những loại vòng lặp trong JavaScript. Tùy vào từng trường hợp đơn cử mà tất cả chúng ta sẽ xác lập nên sử dụng loại vòng lặp nào cho thích hợp. Nếu bạn có vướng mắc gì về nội dung bài viết vui vẻ để lại phản hồi bên dưới .

Bài viết liên quan

admin