vòng lặp for trong javascript là một câu lệnh luồng điều khiển được sử dụng để thực thi lặp đi lặp lại một khối mã cho đến khi một điều kiện nhất định là đúng.

Bạn đang xem : vòng lặp for của js

JavaScript For Loop – Hướng dẫn đầy đủ

Trong hướng dẫn này, bạn sẽ tìm hiểu vòng lặp trong JavaScript là gì, vòng lặp for là gì, cách sử dụng vòng lặp for. Chúng tôi cũng sẽ xem xét các loại vòng lặp khác nhau và sẽ bao gồm chi tiết vòng lặp ‘for’ với các ví dụ.

Vòng lặp là gì?

Vòng lặp là một câu lệnh luồng điều khiển được sử dụng để thực thi lặp đi lặp lại một khối mã cho đến khi điều kiện đưa ra trong vòng lặp là đúng.

Nói cách đơn giản, vòng lặp là một khối mã được thực thi lặp đi lặp lại cho đến khi một điều kiện được đáp ứng. Điều kiện được gọi là điều kiện lặp và nó được đưa ra trong vòng lặp.

Tại sao chúng ta sử dụng vòng lặp?

Việc sử dụng vòng lặp phổ biến nhất là lặp lại một khối mã một số lần.

Ví dụ: bạn có thể muốn in một tin nhắn nhiều lần. Bạn có thể sử dụng một vòng lặp để làm điều này.

Vòng lặp rất hữu ích trong khi lập trình, nó là một trong những tính năng được sử dụng nhiều nhất của bất kỳ ngôn ngữ lập trình nào.

chẳng hạn, nếu chúng tôi muốn in “Hello, World!” Sau đó 10 lần thay vì viết mã in trong 10 lần, chúng ta có thể sử dụng một vòng lặp và viết mã một lần.

Đây là mã để in “Hello, World!” 10 lần.

Ví dụ

  for (var i = 0; i & lt; 10; i ++) {
  console.log ("Xin chào, Thế giới!");
}  

▶ Chạy mã

Các loại vòng lặp trong javascript

JavaScript có nhiều loại vòng lặp khác nhau. Đây là danh sách chúng.

  • vòng lặp for : Vòng lặp lặp lại một khối mã trong một số lần được chỉ định
  • for … in : Vòng lặp lặp lại một khối mã cho từng thuộc tính của một đối tượng
  • for … of : Vòng lặp được sử dụng để lặp qua các vòng lặp có thể lặp lại như Mảng, Chuỗi, v.v.
  • while : Vòng lặp lặp lại một khối mã trong khi một điều kiện nhất định là đúng
  • do … while : Điều này cũng thực thi một khối mã cho đến khi một điều kiện nhất định là đúng nhưng nó thực thi khối mã ít nhất một lần

Vòng lặp for

trong JavaScript

Vòng lặp for là một trong những vòng lặp được sử dụng nhiều nhất trong JavaScript. Nó được sử dụng để lặp lại một khối mã với số lần xác định.

Cú pháp – vòng lặp for

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

  for ([khởi tạo]; [điều kiện]; [Lặp lại]) {
  // mã ở đây
}  

vòng lặp for bao gồm 3 phần điều khiển:

  1. Khởi tạo : Khởi tạo là một phần của vòng lặp for nơi chúng tôi khởi tạo bộ đếm của vòng lặp for. Nó là nơi bắt đầu vòng lặp for. Ví dụ let i = 0
  2. Điều kiện : Phần điều kiện là một câu lệnh trả về true hoặc false , ví dụ: i & gt; 10 . nếu điều kiện là true thì khối mã của nội dung vòng lặp sẽ được thực thi, nếu điều kiện là false thì vòng lặp bị ngắt.
  3. Lặp lại : Trong phần này, bộ đếm của vòng lặp for được cập nhật. Ví dụ i ++ , i-- , i + = 2 , v.v.

Hãy xem một vòng lặp for hoạt động.

Ví dụ

  for (var i = 0; i & lt; 5; i ++) {
  để tên = "John";
  console.log ("Chào" + tên);
}  
  • Khởi tạo

    : i = 0 đang khởi tạo thành 0

  • Điều kiện

    : i & lt; 5 đang kiểm tra xem 5 có lớn hơn

  • Lặp lại

    : i ++ đang tăng biến khởi tạo lên 1 trong mỗi lần lặp

Sơ đồ luồng – Cách hoạt động của vòng lặp for

Sơ đồ luồng bên dưới cho thấy luồng của vòng lặp for trong JavaScript.

Từ sơ đồ trên, bạn có thể thấy vòng lặp for thực thi mã theo thứ tự nào. Trình tự thực hiện như sau:

  1. vòng lặp for

    đầu tiên khởi tạo biến bộ đếm

  2. Sau đó, nó so sánh biến bộ đếm với điều kiện
  3. Nếu điều kiện là đúng thì nó thực thi khối mã của phần nội dung vòng lặp, sau đó cập nhật biến bộ đếm và việc thực thi quay trở lại bước 2
  4. Nếu điều kiện sai thì nó sẽ phá vỡ vòng lặp

Ví dụ – Đây là một ví dụ lặp qua một mảng và in từng phần tử.

Ví dụ

  var arr = [1, 2, 3, 4, 5];
for (var i = 0; i & lt; arr.length; i ++) {
  console.log (arr [i]);
}  

Sử dụng Biến khởi tạo để có đầu ra linh hoạt

Biến khởi tạo (i trong ví dụ trên) được cập nhật sau mỗi lần lặp. Chúng ta có thể sử dụng biến này trong phần nội dung vòng lặp để nhận được một số kết quả thú vị.

Giả sử bạn muốn in các số từ 1-10 hoặc bạn muốn tìm bình phương của mọi số từ 1-10, trong những trường hợp như vậy, biến khởi tạo có thể sử dụng.

Ví dụ 1 – In 0-10

Ví dụ

  for (var i = 1; i & lt; = 10; i ++) {
  console.log (i);
}  

Ví dụ 2 – Tìm bình phương của các số từ 1-10

Ví dụ

  for (var i = 1; i & lt; = 10; i ++) {
  console.log (i * i);
}  

lồng vào vòng lặp for trong javascript

Bạn có thể sử dụng vòng lặp for bên trong vòng lặp for khác. Đây được gọi là vòng lặp for lồng nhau.

Các vòng lặp lồng nhau rất hữu ích khi bạn muốn xem qua một danh sách các mục và sau đó thực hiện điều gì đó với từng mục. Ví dụ: bạn muốn lặp lại một danh sách các số và thực hiện một loạt các thao tác trên mỗi số.

Ví dụ về vòng lặp lồng nhau:

Ví dụ

  for (var i = 0; i & lt; 5; i ++) {
  for (var j = 0; j & lt; 5; j ++) {
    console.log (i + "" + j);
  }
}  

Một ví dụ khác để lặp qua một mảng các mảng.

Ví dụ

  let arr = [[1, "một", 2, "hai"], [3, "ba", 4, "bốn"]];
for (var i = 0; i & lt; arr.length; i ++) {
  for (var j = 0; j & lt; arr [i] .length; j ++) {
    console.log (arr [i] [j]);
  }
}  

 Ezoic

báo cáo quảng cáo này

Bây giờ hãy để chúng tôi xem một số tình huống mà bạn có thể nghĩ đến hoặc bạn có thể gặp phải khi làm việc với vòng lặp for. Chúng ta sẽ xem xét các tình huống sau:

  1. Khi bạn không khởi tạo biến bộ đếm
  2. Khi bạn để trống tình trạng của mình
  3. Khi bạn không cập nhật biến bộ đếm
  4. Khi bạn để trống tất cả (tức là khởi tạo, điều kiện và lặp lại)
  5. Khi bạn không sử dụng dấu ngoặc nhọn

Ví dụ 1 – Vòng lặp for lồng nhau không khởi tạo

Đây là tình huống mà bạn không khởi tạo biến bộ đếm. Trong trường hợp này, một lỗi sẽ được đưa ra nếu biến không được khởi tạo mà được sử dụng. Thông báo lỗi sẽ là ReferenceError: i không được xác định .

Vì vậy, bạn có thể để trống phần khởi tạo nhưng để sử dụng biến trong nội dung vòng lặp, bạn cần xác định biến này trước vòng lặp.

Ví dụ

  var i = 0;
cho (; i & lt; 5; i ++) {
  console.log (i);
}  

Ví dụ 2 – Vòng lặp for lồng nhau không có điều kiện

Đây là một tình huống mà bạn không đưa ra bất kỳ điều kiện nào trong vòng lặp for. Trong trường hợp này, vòng lặp sẽ thực thi mãi mãi và sẽ không bao giờ bị phá vỡ.

Để ngắt vòng lặp, bạn cần đưa ra một điều kiện trong thân vòng lặp và ngắt vòng lặp khi điều kiện là đúng.

Ví dụ

  for (var i = 0;; i ++) {
  console.log (i);
  nếu (tôi == 5) {
    phá vỡ;
  }
}  

Lưu ý: câu lệnh break dùng để ngắt vòng lặp. Chúng ta sẽ xem tuyên bố break chi tiết trong phần tới.

Ví dụ 3 – Vòng lặp for lồng nhau không lặp lại

Đây là tình huống mà bạn không đưa ra bất kỳ lần lặp nào trong vòng lặp for. Trong trường hợp này, vòng lặp sẽ thực thi mãi mãi và sẽ không bao giờ bị phá vỡ vì biến không được cập nhật và được giữ nguyên.

Vì vậy, bạn có thể cập nhật biến đã khởi tạo trong khối mã.

Ví dụ

  for (var i = 0; i & lt; 5;) {
  console.log (i);
  i ++;
}  

Ví dụ 4 – Vòng lặp for lồng nhau không khởi tạo, không có điều kiện và không lặp lại

Đây là tình huống mà bạn không đưa ra bất kỳ khởi tạo, điều kiện và lặp lại nào trong vòng lặp for. Trong trường hợp này, những điều sau có thể xảy ra:

  1. Nếu bất kỳ biến đã sử dụng nào không được xác định, thì sẽ xảy ra lỗi.
  2. Vòng lặp phải được cung cấp một số điều kiện để phá vỡ, nếu không, vòng lặp sẽ thực thi mãi mãi.
  3. Điều kiện bên trong khối mã phải ở trạng thái

    true

    . Nếu không, vòng lặp sẽ thực thi mãi mãi.

Vì vậy, bạn có thể để trống tất cả nhưng để sử dụng biến trong phần nội dung vòng lặp, bạn cần xác định biến đó trước vòng lặp.

Ví dụ

  // xác định một biến
var i = 0;
vì (; ; ) {
  console.log (i);
  if (i == 5) {// điều kiện
    phá vỡ;
  }
  // cập nhật biến
  i ++;
}  

Ví dụ 5 – Không có dấu ngoặc nhọn

Khi bạn chỉ có một dòng mã trong nội dung vòng lặp for, bạn có thể bỏ qua dấu ngoặc nhọn.

Nhưng nếu bạn có nhiều dòng mã, bạn cần sử dụng dấu ngoặc nhọn. Mã bên trong dấu ngoặc nhọn được biểu diễn dưới dạng một khối.

Ví dụ

  for (var i = 0; i & lt; 5; i ++)
  console.log (i);  

Hãy cùng tìm hiểu sơ lược về vòng lặp for … in và for … of. Chúng ta sẽ xem chúng chi tiết trong phần tới.

for … in loop

Vòng lặp for … in được sử dụng để lặp lại các thuộc tính của một đối tượng. Nó cũng được sử dụng để lặp lại trên một mảng.

Chúng ta chưa thảo luận về đối tượng nhưng ở đây chúng ta đang lấy một ví dụ đơn giản: tập trung vào vòng lặp ở đây thay vì đối tượng.

Cú pháp – for … in

Cú pháp của vòng lặp for … in như sau:

  for (var propertyName in object) {
  // làm việc gì đó
}  

propertyName là tên thuộc tính của đối tượng. Đối tượng là đối tượng có các thuộc tính sẽ được lặp lại.

Từ khóa in được sử dụng để lặp lại các thuộc tính của đối tượng.

Đây là một ví dụ:

Ví dụ

  var car = {
  tên: "ford",
  màu đen",
  mô hình: "mustang"
}

for (var prop in car) {// prop đại diện cho các thuộc tính của xe hơi
  console.log (`$ {prop} = $ {car [prop]}`);
}  

▶ Chạy mã

for … of loop javascript

Vòng lặp for … of được sử dụng để lặp qua các phần tử của một mảng. Nó cũng được sử dụng để lặp qua một đối tượng có thể lặp lại như mảng, chuỗi, NodeList, đối số, v.v.

Cú pháp – for … of

Cú pháp của vòng lặp for … of như sau:

  for (var phần tử của mảng) {
  // làm việc gì đó
}  

Phần tử là phần tử của mảng. Mảng là mảng có các phần tử sẽ được lặp lại.

Đây là một ví dụ:

Ví dụ

  var fruit = ["Apple", "Banana", "Carrot", "Guava", "Orange"];
for (var element of fruit) {
  console.log (phần tử);
}  

▶ Chạy mã

lặp qua Chuỗi bằng vòng lặp for … of

Ví dụ

  var moto = "Học Javascript";
for (var char of moto) {// char là phần tử của moto
  console.log (char);
}  

▶ Chạy mã

vòng lặp for trong ví dụ về javascript

Ví dụ 1: tổng các số từ 1 đến 10

Ví dụ

  var sum = 0;
for (var i = 1; i & lt; = 10; i ++) {
  tổng + = i;
}
console.log (sum);  

Ví dụ 2: Các số chẵn từ m đến n

Ví dụ

  var m = 10, n = 20;
for (var i = m; i & lt; = n; i ++) {
  nếu (i% 2 === 0) {
    console.log (i);
  }
}  

Ví dụ 3: các số nguyên tố từ 0 đến n

Ví dụ

  var n = 10;
for (var i = 2; i & lt; = n; i ++) {
  var isPrime = true;
  for (var j = 2; j & lt; = Math.sqrt (i); j ++) {// vòng lặp lồng nhau
    nếu (i% j === 0) {
      isPrime = false;
      phá vỡ;
    }
  }
  if (isPrime) {
    console.log (i);
  }
}  

Kết luận

Vòng lặp trong javascript được sử dụng để lặp qua các phần tử của một mảng, một đối tượng có thể lặp lại như mảng, chuỗi, NodeList, đối số, v.v.

Vòng lặp được sử dụng phổ biến nhất trong javascript là vòng lặp for.


Xem thêm những thông tin liên quan đến chủ đề vòng lặp for of js

For of Loop with an Array in JavaScript

alt

  • Tác giả: Telusko
  • Ngày đăng: 2021-07-07
  • Đánh giá: 4 ⭐ ( 1044 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Printing all the values of an Array

Hiểu Rõ Về Các Loại Vòng Lặp Trong Javascript Và Cấu Trúc Từng Loại Vòng Lặp

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 3144 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp là một khái niệm rất quen thuộc trong lập trình. Với vòng lặp trong Javascript, chúng thường được dùng để xử lý đối tượng hoặc mảng.

Vòng lặp for…in trong JavaScript

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 5 ⭐ ( 7957 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp for…in được sử dụng để lặp qua các thuộc tính của một đối tượng. Khi chúng ta vẫn chưa bàn luận về đối tượng, bạn có thể không cảm thấy thoải mái với vòng lặp này.

Cách dùng vòng lặp for trong Javascript

  • Tác giả: mylop.edu.vn
  • Đánh giá: 5 ⭐ ( 2048 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu vòng lặp for trong Javascript, đây là vòng lặp được sử dụng rất nhiều khi học lập trình Javascript căn bản.

Hiểu Rõ Về Vòng Lặp For Trong Javascript.

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 9439 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp dùng để thực thi một hành động lặp đi lặp lại và xuất hiện ở mọi bài toán, mọi vấn đề. Hôm nay, mình sẽ đi sâu vào vòng lặp for trong Javascript.

Vòng lặp for…in trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 4254 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp for…in trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Vòng lặp for…of trong JavaScript

  • Tác giả: vi-magento.com
  • Đánh giá: 3 ⭐ ( 6299 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hoàn toàn khác so với for…in đã học ở bài trước, vòng lặp for…of trong JavaScript có thể lặp qua các giá trị của mảng, thậm chí là chuỗi.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  40 Mẫu thiết kế web danh mục đầu tư HTML CSS miễn phí 2020 - Bashooka - mẫu danh mục đầu tư html css

By ads_php