Làm thế nào để bạn đặt một vòng lặp trong html?

Tại sao các vòng lặp hữu ích?

Vòng lặp là làm đi làm lại một việc. Thông thường, mã sẽ hơi khác mỗi khi chạy vòng lặp hoặc cùng một mã sẽ chạy nhưng với các biến khác nhau

Ví dụ mã lặp

Giả sử chúng ta muốn vẽ 100 vòng tròn ngẫu nhiên trên phần tử

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

<button>Updatebutton> <canvas>canvas>

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Đây là mã JavaScript triển khai ví dụ này

________số 8

Có và không có vòng lặp

Bây giờ bạn không cần phải hiểu tất cả mã, nhưng hãy xem phần mã thực sự vẽ 100 vòng tròn

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

• for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
  

  9, được xác định trước đó trong mã, trả về một số nguyên trong khoảng từ
  10 đến
  11

Bạn sẽ nắm được ý cơ bản — chúng tôi đang sử dụng một vòng lặp để chạy 100 lần lặp lại mã này, mỗi lần lặp lại sẽ vẽ một vòng tròn ở một vị trí ngẫu nhiên trên trang. Số lượng mã cần thiết sẽ giống nhau cho dù chúng ta vẽ 100 vòng tròn, 1000 hay 10.000. Chỉ có một số phải thay đổi

Nếu chúng tôi không sử dụng vòng lặp ở đây, chúng tôi phải lặp lại đoạn mã sau cho mọi vòng tròn mà chúng tôi muốn vẽ

Điều này sẽ trở nên rất nhàm chán và khó duy trì

Vòng qua một bộ sưu tập

Hầu hết khi bạn sử dụng vòng lặp, bạn sẽ có một bộ sưu tập các mục và muốn làm điều gì đó với mọi mục

Một loại tập hợp là

cho. của vòng lặp

Công cụ cơ bản để lặp qua một tập hợp là vòng lặp

Trong ví dụ này,

1. Cho bộ sưu tập
   17, lấy vật phẩm đầu tiên trong bộ sưu tập
2. Gán nó cho biến
   18 và sau đó chạy mã giữa các dấu ngoặc nhọn
   19
3. Lấy vật phẩm tiếp theo và lặp lại (2) cho đến khi bạn xem hết bộ sưu tập

bản đồ () và bộ lọc ()

JavaScript cũng có nhiều vòng lặp chuyên dụng hơn cho các bộ sưu tập và chúng tôi sẽ đề cập đến hai trong số chúng ở đây

Bạn có thể sử dụng

while(condition)

{

lines of code to be executed

}

Ở đây chúng tôi chuyển một hàm vào

while(condition)

{

lines of code to be executed

}

Bạn có thể sử dụng

while(condition)

{

lines of code to be executed

}

Cái này trông rất giống với

Lưu ý rằng cả

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Tiêu chuẩn cho vòng lặp

Trong ví dụ "vẽ vòng tròn" ở trên, bạn không có tập hợp các mục để lặp qua. bạn thực sự chỉ muốn chạy cùng một mã 100 lần. Trong trường hợp như vậy, bạn nên sử dụng vòng lặp

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Ở đây chúng tôi có

1. Từ khóa
   88, theo sau là một số dấu ngoặc đơn
2. Bên trong dấu ngoặc đơn, chúng tôi có ba mục, được phân tách bằng dấu chấm phẩy
   1. Trình khởi tạo - đây thường là một biến được đặt thành một số, được tăng lên để đếm số lần vòng lặp đã chạy. Đôi khi nó còn được gọi là biến đếm
   2. Một điều kiện — điều kiện này xác định thời điểm vòng lặp sẽ dừng lặp. Đây thường là một biểu thức có toán tử so sánh, một bài kiểm tra để xem liệu điều kiện thoát có được đáp ứng hay không
   3. Biểu thức cuối cùng - điều này luôn được đánh giá (hoặc chạy) mỗi khi vòng lặp trải qua một lần lặp đầy đủ. Nó thường dùng để tăng (hoặc trong một số trường hợp là giảm) biến đếm, để đưa nó đến gần điểm mà điều kiện không còn nữa _______185
3. Một số dấu ngoặc nhọn chứa một khối mã — mã này sẽ được chạy mỗi khi vòng lặp lặp lại

Tính bình phương

Hãy xem một ví dụ thực tế để chúng ta có thể hình dung rõ ràng hơn những gì chúng làm

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Điều này mang lại cho chúng tôi đầu ra sau

Mã này tính bình phương cho các số từ 1 đến 9 và viết ra kết quả. Cốt lõi của mã là vòng lặp

Hãy chia dòng

while(condition)

{

lines of code to be executed

}

1. while(condition)
   
   {
   
   lines of code to be executed
   
   }

   43. biến đếm,

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   44, bắt đầu từ

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   45. Lưu ý rằng chúng tôi phải sử dụng

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   46 cho bộ đếm, vì chúng tôi đang chỉ định lại nó mỗi khi chúng tôi đi một vòng

2. while(condition)
   
   {
   
   lines of code to be executed
   
   }

   47. tiếp tục đi vòng lặp miễn là

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   44 nhỏ hơn

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   49

3. while(condition)
   
   {
   
   lines of code to be executed
   
   }

   70. thêm một vào

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   44 mỗi lần trong vòng lặp

Bên trong vòng lặp, chúng ta tính bình phương giá trị hiện tại của

while(condition)

{

lines of code to be executed

}

while(condition)

{

lines of code to be executed

}

while(condition)

{

lines of code to be executed

}

1. Trong lần chạy đầu tiên,

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   75, vì vậy chúng tôi sẽ thêm

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   76
2. Trong lần chạy thứ hai,

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   77, vì vậy chúng tôi sẽ thêm

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   78
3. Và như thế…
4. Khi

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   44 trở thành

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   49, chúng tôi sẽ ngừng chạy vòng lặp và chuyển thẳng sang đoạn mã tiếp theo bên dưới vòng lặp, in thông báo

   while(condition)
   
   {
   
   lines of code to be executed
   
   }

   91 trên một dòng mới

Lặp qua các bộ sưu tập với vòng lặp for

Bạn có thể sử dụng vòng lặp

Hãy xem lại ví dụ về

Chúng ta có thể viết lại mã đó như thế này

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Trong vòng lặp này, chúng tôi đang bắt đầu

while(condition)

{

lines of code to be executed

}

while(condition)

{

lines of code to be executed

}

while(condition)

{

lines of code to be executed

}

Điều này hoạt động tốt và trong các phiên bản đầu tiên của JavaScript,

• bạn có thể bắt đầu

  while(condition)
  
  {
  
  lines of code to be executed
  
  }

  44 tại

  while(condition)
  
  {
  
  lines of code to be executed
  
  }

  45, quên rằng chỉ số mảng đầu tiên là 0, không phải 1
• bạn có thể dừng lại ở _______ 322, quên rằng chỉ số mảng cuối cùng là ở _______ 323

Vì những lý do như thế này, tốt nhất bạn nên sử dụng

Đôi khi bạn vẫn cần sử dụng vòng lặp

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Câu đầu ra cuối cùng không được hình thành tốt

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Chúng tôi muốn nó xử lý con mèo cuối cùng theo cách khác, như thế này

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Nhưng để làm điều này, chúng ta cần biết khi nào chúng ta đang lặp lại vòng lặp cuối cùng và để làm điều đó, chúng ta có thể sử dụng vòng lặp

while(condition)

{

lines of code to be executed

}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Thoát vòng lặp với break

Nếu bạn muốn thoát khỏi một vòng lặp trước khi hoàn thành tất cả các lần lặp, bạn có thể sử dụng câu lệnh break. Chúng ta đã gặp điều này trong bài viết trước khi xem xét các câu lệnh switch — khi một trường hợp gặp trong câu lệnh switch khớp với biểu thức đầu vào, câu lệnh

Tương tự với các vòng lặp — một câu lệnh

Giả sử chúng tôi muốn tìm kiếm thông qua một loạt các liên hệ và số điện thoại và chỉ trả lại số chúng tôi muốn tìm?

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Bây giờ đến JavaScript

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

1. Trước hết, chúng tôi có một số định nghĩa về biến — chúng tôi có một mảng thông tin liên hệ, với mỗi mục là một chuỗi chứa tên và số điện thoại được phân tách bằng dấu hai chấm
2. Tiếp theo, chúng tôi gắn một trình lắng nghe sự kiện vào nút (_______703) để khi nhấn nút này, một số mã sẽ chạy để thực hiện tìm kiếm và trả về kết quả
3. Chúng tôi lưu trữ giá trị đã nhập vào kiểu nhập văn bản trong một biến có tên là

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   04, trước khi làm trống kiểu nhập văn bản và lấy tiêu điểm lại, sẵn sàng cho lần tìm kiếm tiếp theo. Lưu ý rằng chúng tôi cũng chạy phương thức

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   05 trên chuỗi, do đó các tìm kiếm sẽ không phân biệt chữ hoa chữ thường
4. Bây giờ đến phần thú vị, vòng lặp
   15
   1. Bên trong vòng lặp, trước tiên chúng ta tách liên hệ hiện tại ở ký tự dấu hai chấm và lưu trữ hai giá trị kết quả trong một mảng có tên là

      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }
      
      canvas {
        display: block;
      }
      
      body {
        margin: 0;
      }
      
      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
      

      07
   2. Sau đó, chúng tôi sử dụng một câu lệnh có điều kiện để kiểm tra xem

      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }
      
      canvas {
        display: block;
      }
      
      body {
        margin: 0;
      }
      
      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
      

      08 (tên của liên hệ, một lần nữa được viết thường bằng

      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }
      
      canvas {
        display: block;
      }
      
      body {
        margin: 0;
      }
      
      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
      

      05) có bằng với

      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }
      
      canvas {
        display: block;
      }
      
      body {
        margin: 0;
      }
      
      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
      

      04 đã nhập hay không. Nếu đúng, chúng tôi nhập một chuỗi vào đoạn văn để báo cáo số của liên hệ là gì và sử dụng
      28 để kết thúc vòng lặp
5. Sau vòng lặp, chúng tôi kiểm tra xem chúng tôi có đặt liên hệ hay không và nếu không, chúng tôi đặt văn bản đoạn văn thành "Không tìm thấy liên hệ. "

Ghi chú. Bạn cũng có thể xem mã nguồn đầy đủ trên GitHub (cũng có thể xem nó đang chạy trực tiếp)

Bỏ qua các lần lặp với continue

Câu lệnh continue hoạt động tương tự như

HTML về cơ bản giống như ví dụ trước — một kiểu nhập văn bản đơn giản và một đoạn để xuất

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

JavaScript hầu như cũng giống nhau, mặc dù bản thân vòng lặp hơi khác một chút

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Đây là đầu ra

1. Trong trường hợp này, đầu vào phải là một số (

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   13). Vòng lặp
   88 được cung cấp một bộ đếm bắt đầu từ 1 (vì chúng tôi không quan tâm đến 0 trong trường hợp này), một điều kiện thoát cho biết vòng lặp sẽ dừng khi bộ đếm trở nên lớn hơn đầu vào

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   13 và một trình vòng lặp thêm 1 vào
2. Trong vòng lặp, chúng ta tìm căn bậc hai của mỗi số bằng Math. sqrt(i), sau đó kiểm tra xem căn bậc hai có phải là một số nguyên hay không bằng cách kiểm tra xem nó có bằng chính nó khi nó được làm tròn xuống số nguyên gần nhất hay không (đây là cách mà Math. floor() thực hiện với số được truyền)
3. Nếu căn bậc hai và căn bậc hai làm tròn xuống không bằng nhau (

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   16), điều đó có nghĩa là căn bậc hai không phải là số nguyên, vì vậy chúng tôi không quan tâm đến nó. Trong trường hợp như vậy, chúng tôi sử dụng câu lệnh

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   17 để chuyển sang vòng lặp tiếp theo mà không ghi lại số ở bất kỳ đâu
4. Nếu căn bậc hai là một số nguyên, chúng ta hoàn toàn bỏ qua khối

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   18, vì vậy câu lệnh

   html {
     width: 100%;
     height: inherit;
     background: #ddd;
   }
   
   canvas {
     display: block;
   }
   
   body {
     margin: 0;
   }
   
   button {
     position: absolute;
     top: 5px;
     left: 5px;
   }
   

   17 không được thực thi;

Ghi chú. Bạn cũng có thể xem mã nguồn đầy đủ trên GitHub (cũng có thể xem nó đang chạy trực tiếp)

trong khi và làm. trong khi

Đầu tiên, chúng ta hãy xem xét vòng lặp while. Cú pháp của vòng lặp này trông giống như vậy

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Điều này hoạt động theo cách rất giống với vòng lặp

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Ba mục giống nhau vẫn còn và chúng vẫn được xác định theo thứ tự giống như trong vòng lặp for. Điều này là do bạn phải xác định một trình khởi tạo trước khi có thể kiểm tra xem điều kiện có đúng hay không. Sau đó, biểu thức cuối cùng được chạy sau khi mã bên trong vòng lặp đã chạy (một lần lặp đã hoàn thành), điều này sẽ chỉ xảy ra nếu điều kiện vẫn đúng

Hãy xem lại ví dụ về danh sách mèo của chúng ta, nhưng được viết lại để sử dụng vòng lặp while

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Ghi chú. Điều này vẫn hoạt động giống như mong đợi — hãy xem nó đang chạy trực tiếp trên GitHub (đồng thời xem mã nguồn đầy đủ)

việc làm. vòng lặp while rất giống nhau, nhưng cung cấp một biến thể trong cấu trúc while

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Trong trường hợp này, trình khởi tạo lại xuất hiện trước, trước khi vòng lặp bắt đầu. Từ khóa trực tiếp đứng trước dấu ngoặc nhọn chứa mã để chạy và biểu thức cuối cùng

Sự khác biệt chính giữa vòng lặp

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Hãy viết lại ví dụ danh sách mèo của chúng ta để sử dụng vòng lặp

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Ghi chú. Một lần nữa, điều này hoạt động giống như mong đợi — hãy xem nó đang chạy trực tiếp trên GitHub (đồng thời xem mã nguồn đầy đủ)

Cảnh báo. Với trong khi và làm. trong khi - như với tất cả các vòng lặp - bạn phải đảm bảo rằng trình khởi tạo được tăng lên hoặc, tùy theo trường hợp, giảm đi, để điều kiện cuối cùng trở thành sai. Nếu không, vòng lặp sẽ tiếp tục mãi mãi và trình duyệt sẽ buộc nó dừng lại hoặc nó sẽ bị sập. Cái này gọi là vòng lặp vô tận

học tích cực. khởi động đếm ngược

Trong bài tập này, chúng tôi muốn bạn in ra một bộ đếm ngược khởi chạy đơn giản vào hộp đầu ra, từ 10 xuống Blastoff. Cụ thể, chúng tôi muốn bạn

• Vòng lặp từ 10 xuống 0. Chúng tôi đã cung cấp cho bạn một trình khởi tạo —

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  31
• Đối với mỗi lần lặp lại, hãy tạo một đoạn mới và nối nó vào đầu ra

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  32 mà chúng tôi đã chọn bằng cách sử dụng

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  33. Trong các nhận xét, chúng tôi đã cung cấp cho bạn ba dòng mã cần được sử dụng ở đâu đó bên trong vòng lặp

  • html {
      width: 100%;
      height: inherit;
      background: #ddd;
    }
    
    canvas {
      display: block;
    }
    
    body {
      margin: 0;
    }
    
    button {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    

    34 — tạo một đoạn văn mới

  • html {
      width: 100%;
      height: inherit;
      background: #ddd;
    }
    
    canvas {
      display: block;
    }
    
    body {
      margin: 0;
    }
    
    button {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    

    35 — thêm đoạn văn vào đầu ra

    html {
      width: 100%;
      height: inherit;
      background: #ddd;
    }
    
    canvas {
      display: block;
    }
    
    body {
      margin: 0;
    }
    
    button {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    

    32

  • html {
      width: 100%;
      height: inherit;
      background: #ddd;
    }
    
    canvas {
      display: block;
    }
    
    body {
      margin: 0;
    }
    
    button {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    

    37 — làm cho văn bản bên trong đoạn bằng bất cứ thứ gì bạn đặt ở phía bên tay phải, sau dấu bằng
• Các số lần lặp khác nhau yêu cầu đặt văn bản khác nhau trong đoạn văn cho lần lặp đó (bạn sẽ cần một câu lệnh có điều kiện và nhiều dòng

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  37)
  • Nếu số là 10 thì in "Countdown 10" ra đoạn văn
  • Nếu số là 0, hãy in "Blast off. " đến đoạn
  • Đối với bất kỳ số nào khác, chỉ in số đó vào đoạn văn
• Hãy nhớ bao gồm một trình vòng lặp. Tuy nhiên, trong ví dụ này, chúng tôi đang đếm ngược sau mỗi lần lặp lại chứ không phải tăng lên, vì vậy bạn không muốn

  while(condition)
  
  {
  
  lines of code to be executed
  
  }

  70 — làm cách nào để bạn lặp lại xuống dưới?

Ghi chú. Nếu bạn bắt đầu gõ vòng lặp (ví dụ (while(i>=0)), trình duyệt có thể bị kẹt do bạn chưa nhập điều kiện kết thúc. Vì vậy hãy cẩn thận với điều này. Bạn có thể bắt đầu viết mã của mình trong một bình luận để giải quyết vấn đề này và xóa bình luận sau khi hoàn thành

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại ví dụ bằng nút "Đặt lại". Nếu bạn thực sự gặp khó khăn, hãy nhấn "Hiển thị giải pháp" để xem giải pháp

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

học tích cực. Điền vào danh sách khách mời

Trong bài tập này, chúng tôi muốn bạn lấy một danh sách tên được lưu trữ trong một mảng và đặt chúng vào danh sách khách. Nhưng không dễ dàng như vậy — chúng tôi không muốn cho Phil và Lola vào vì họ tham lam và thô lỗ, và luôn ăn hết thức ăn. Chúng tôi có hai danh sách, một dành cho khách thừa nhận và một danh sách dành cho khách từ chối

Cụ thể, chúng tôi muốn bạn

• Viết một vòng lặp sẽ lặp qua mảng

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  40
• Trong mỗi lần lặp lại, hãy kiểm tra xem mục mảng hiện tại có bằng "Phil" hoặc "Lola" hay không bằng cách sử dụng câu lệnh điều kiện
  • Nếu đúng như vậy, hãy nối mục mảng đến cuối đoạn văn ________ 741 ________ 742, theo sau là dấu phẩy và dấu cách
  • Nếu không, nối mục mảng vào cuối

    html {
      width: 100%;
      height: inherit;
      background: #ddd;
    }
    
    canvas {
      display: block;
    }
    
    body {
      margin: 0;
    }
    
    button {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    

    42 của đoạn văn

    html {
      width: 100%;
      height: inherit;
      background: #ddd;
    }
    
    canvas {
      display: block;
    }
    
    body {
      margin: 0;
    }
    
    button {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    

    43, theo sau là dấu phẩy và dấu cách

Chúng tôi đã cung cấp cho bạn

• html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  45 — phần đầu của một dòng sẽ nối một cái gì đó ở phần cuối của

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  46

• html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  47 — phần đầu của một dòng sẽ nối một cái gì đó ở phần cuối của

  html {
    width: 100%;
    height: inherit;
    background: #ddd;
  }
  
  canvas {
    display: block;
  }
  
  body {
    margin: 0;
  }
  
  button {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  

  48

Câu hỏi bổ sung — sau khi hoàn thành thành công các nhiệm vụ trên, bạn sẽ có hai danh sách tên, được phân tách bằng dấu phẩy, nhưng chúng sẽ lộn xộn — sẽ có dấu phẩy ở cuối mỗi danh sách. Bạn có thể tìm ra cách viết các dòng cắt bỏ dấu phẩy cuối cùng trong mỗi trường hợp và thêm dấu chấm vào cuối không?

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại ví dụ bằng nút "Đặt lại". Nếu bạn thực sự gặp khó khăn, hãy nhấn "Hiển thị giải pháp" để xem giải pháp

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

Bạn nên sử dụng loại vòng lặp nào?

Nếu bạn đang lặp qua một mảng hoặc một số đối tượng khác hỗ trợ nó và không cần truy cập vào vị trí chỉ mục của từng mục, thì

Đối với các mục đích sử dụng khác, các vòng lặp

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Chúng ta hãy nhìn vào tất cả chúng một lần nữa

Đầu tiên

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
  ctx.fill();
}

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

và cuối cùng là

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
})

function random(number) {
  return Math.floor(Math.random()*number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

btn.addEventListener('click',draw);

Ghi chú. Ngoài ra còn có các loại/tính năng vòng lặp khác hữu ích trong các tình huống nâng cao/chuyên biệt và nằm ngoài phạm vi của bài viết này. Nếu bạn muốn tiến xa hơn với việc học vòng lặp của mình, hãy đọc hướng dẫn vòng lặp và vòng lặp nâng cao của chúng tôi

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . vòng lặp

Sự kết luận

Bài viết này đã tiết lộ cho bạn các khái niệm cơ bản đằng sau và các tùy chọn khác nhau có sẵn khi lặp mã trong JavaScript. Bây giờ bạn đã rõ tại sao vòng lặp là một cơ chế tốt để xử lý mã lặp lại và hiếm khi sử dụng chúng trong các ví dụ của riêng bạn

Nếu có gì chưa hiểu vui lòng đọc lại bài viết hoặc liên hệ với chúng tôi để được trợ giúp

Làm thế nào tôi có thể sử dụng cho

HTML có chức năng lặp không?