Loop trong JavaScript

Loop trong JavaScript

Tóm tắt: trong hướng dẫn này, bạn sẽ học cách sử dụng câu lệnh JavaScript for loop để tạo một vòng lặp với nhiều tùy chọn khác nhau.

Các bài viết liên quan:

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

Câu lệnh JavaScript loop cho phép bạn tạo một vòng lặp với ba biểu thức tùy chọn. Sau đây minh họa cú pháp của câu lệnh vòng lặp for:

for (khởi tạo; điều kiện; hậu biểu thức) {
  // các câu lệnh
}
Loop trong JavaScript

1) Khởi tạo

Biểu thức khởi tạo khởi tạo vòng lặp. Biểu thức khởi tạo chỉ được thực hiện một lần khi vòng lặp bắt đầu. Bạn thường sử dụng phần khởi tạo là để khởi tạo một biến bộ đếm. Nếu bạn sử dụng từ khóa var để khai báo biến bộ đếm, biến đó sẽ có hàm hoặc phạm vi toàn cục. Nói cách khác, bạn có thể tham chiếu đến biến bộ đếm sau khi vòng lặp kết thúc. Tuy nhiên, nếu bạn sử dụng từ khóa let để khai báo biến counter, thì biến đó sẽ có phạm vi bị chặn, phạm vi này chỉ có thể truy cập bên trong vòng lặp.

2) Điều kiện

Điều kiện là một biểu thức được đánh giá một lần trước mỗi lần lặp. Câu lệnh bên trong vòng lặp chỉ được thực thi khi điều kiện đánh giá là true. Vòng lặp được kết thúc nếu điều kiện đánh giá là sai. Lưu ý rằng điều kiện là tùy chọn. Nếu bạn bỏ qua nó, câu lệnh vòng lặp for sẽ coi nó là true.

3) Hậu biểu thức

Câu lệnh vòng lặp for cũng đánh giá biểu thức sau mỗi lần lặp vòng lặp. Nói chung, bạn sử dụng biểu thức sau để cập nhật biến bộ đếm. Lưu đồ sau minh họa vòng lặp for: JavaScript for Loop Trong vòng lặp for, ba biểu thức là tùy chọn. Sau đây là cách sử dụng vòng lặp for mà không có bất kỳ biểu thức nào:

for(;;){
  
}

Một số ví dụ về For

Hãy lấy một số ví dụ về việc sử dụng vòng lặp for.

  1. Ví dụ về for đơn giản

Ví dụ sau sử dụng for hiển thị các số nguyên có giá trị từ 1 đến 5 trong cửa sổ Console.

for (var counter = 1; counter < 5; counter++) {
    console.log('trong vòng lặp:' + counter);
}
console.log('ngoài vòng lặp:' + counter);

Làm thế nào nó hoạt động.

  • Đầu tiên, khai báo một bộ đếm biến và khởi tạo nó thành 1.
  • Thứ hai, hiển thị giá trị của bộ đếm trong cửa sổ Console nếu bộ đếm nhỏ hơn 5.
  • Thứ ba, tăng giá trị của bộ đếm lên một trong mỗi lần lặp của vòng lặp.

Vì vòng lặp for sử dụng từ khóa var để khai báo bộ đếm nên phạm vi của bộ đếm là toàn cục. Do đó, chúng ta có thể truy cập biến đếm sau khi vòng lặp kết thúc. Từ ES6, bạn có thể sử dụng từ khóa let để khai báo biến bộ đếm là cục bộ của vòng lặp:

for (let counter = 1; counter &lt;5; counter ++) {
	console.log ('Bên trong vòng lặp:' + couter);
}
console.log ('Bên ngoài vòng lặp:' + counter);

Lỗi:

ReferenceError: counter không được xác định

Việc truy cập biến bộ đếm sau vòng lặp gây ra lỗi ReferenceError.

  1. Vòng lặp for không có phần khởi tạo

Ví dụ sau sử dụng vòng lặp for mà không sử dụng phần khởi tạo:

var j = 1;
for (; j < 10; j + = 2) {
  console.log (j);
}
  1. Vòng lặp for không có điều kiện

Tương tự như biểu thức khởi tạo, biểu thức điều kiện là tùy chọn. Nếu bạn bỏ qua biểu thức điều kiện, bạn cần sử dụng câu lệnh break để kết thúc vòng lặp.

for (let j = 1;; j += 2) {
    console.log(j);
    if (j > 10) {
        break;
    }
}
  1. Vòng lặp for không có bất kỳ biểu thức nào

Tất cả ba biểu thức của câu lệnh vòng lặp for đều là tùy chọn do đó bạn có thể bỏ qua tất cả chúng. Một lần nữa, bạn phải sử dụng câu lệnh break để kết thúc vòng lặp và cũng sửa đổi biến bộ đếm để điều kiện cho câu lệnh break trở thành đúng tại một số điểm.

// khởi tạo j
let j = 1;
for (;;) {
    // thoát khỏi loop nếu j>10;
    if (j > 10) break;
    console.log(j);
    // tăng j
    j += 2;
}
  1. Vòng lặp for không có thân vòng lặp

Điều thú vị là câu lệnh for có thể có một câu lệnh trống. Trong trường hợp này, bạn đặt dấu chấm phẩy (;) ngay sau câu lệnh for. Ví dụ sau đây tính tổng các số từ 1 đến 10.

Biểu thức được đặt ở hậu biểu thức, do đó, nó sử dụng một câu lệnh rỗng trong thân vòng lặp.

let sum = 0;
for (let i = 0; i <= 9; i++, sum += i);
console.log(sum);

Trong hướng dẫn này, bạn đã học cách sử dụng câu lệnh JavaScript for loop để tạo một vòng lặp với các tùy chọn khác nhau.

Giới thiệu về câu lệnh vòng lặp while trong JavaScript

Câu lệnh while trong JavaScript tạo một vòng lặp thực thi một khối mã miễn là điều kiện kiểm tra đánh giá là true.

Sau đây minh họa cú pháp của câu lệnh while.

while (expression) {
    // statement
}

Câu lệnh while đánh giá biểu thức trước mỗi lần lặp của vòng lặp.

Nếu biểu thức đánh giá là true, câu lệnh while sẽ thực hiện câu lệnh. Nếu biểu thức được đánh giá là false, thì việc thực thi sẽ tiếp tục với câu lệnh sau vòng lặp while.

Vòng lặp while đánh giá biểu thức trước mỗi lần lặp, do đó, vòng lặp while được gọi là vòng lặp đẹp nhất. Vì lý do này, có thể câu lệnh bên trong vòng lặp while không bao giờ được thực thi.

Lưu đồ sau minh họa câu lệnh lặp while:

Loop trong JavaScript

Lưu ý rằng nếu bạn muốn thực hiện ít nhất một câu lệnh và kiểm tra điều kiện sau mỗi lần lặp, bạn nên sử dụng câu lệnh do-while.

Ví dụ về vòng lặp while trong JavaScript

Xem ví dụ sau sử dụng câu lệnh while:

let count = 1;
while (count < 10) {
    console.log('trong vòng lặp'+count);
    count +=2;
}

Cách thức hoạt động của script

Đầu tiên, bên ngoài vòng lặp, biến đếm được đặt thành 1.

Thứ hai, trước khi lần lặp đầu tiên bắt đầu, câu lệnh while sẽ kiểm tra xem số đếm có nhỏ hơn 10 hay không và thực hiện các câu lệnh bên trong thân vòng lặp.

Thứ ba, trong mỗi lần lặp, số gia của vòng lặp được đếm bằng 2 và sau 5 lần lặp, điều kiện đếm <10 không còn đúng nữa nên vòng lặp kết thúc.

Đầu ra của tập lệnh trong cửa sổ giao diện điều khiển như sau:

  • 1
  • 3
  • 5
  • 7
  • 9

Ví dụ sau sử dụng câu lệnh lặp while để thêm 5 số ngẫu nhiên từ 0 đến 10 vào một mảng:

// tạo một mảng năm số ngẫu nhiên từ 1 đến 10
let rands = [];
let count = 0; // biến đếm
const size = 5; // số lần lặp

while(count < size) { // điều kiện lặp
    rands.push(Math.round(Math.random() * 10)); // tạo random
    count++; // cộng giá trị lặp
    console.log('size = ' + count);
}

Đầu ra:

  • size = 1
  • size = 2
  • size = 3
  • size = 4
  • size = 5

Trong ví dụ này:

Đầu tiên, khai báo và khởi tạo một mảng.

Thứ hai, thêm một số ngẫu nhiên từ 0 đến 10 trong mỗi lần lặp vòng lặp bên trong câu lệnh while. Nếu giá trị của số đếm bằng giá trị của biến kích thước, vòng lặp sẽ dừng lại.

Trong hướng dẫn này, bạn đã học cách sử dụng câu lệnh JavaScript while để tạo một vòng lặp đẹp nhất thực thi một khối mã miễn là điều kiện là đúng.

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply