Lặp lại mã html với javascript

Khi bạn code một cái gì đó, sẽ có lúc bạn muốn lặp lại một hành động hoặc chạy một đoạn code nào đó nhiều lần. Ví dụ: giả sử chúng ta có một hàm gọi là saySomething mà chúng ta muốn gọi liên tục 10 lần

Một cách chúng ta có thể làm điều này là chỉ cần gọi hàm 10 lần bằng cách sao chép và dán

saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();

Điều này hoạt động và hoàn thành những gì chúng tôi đặt ra để làm, nhưng. chúng ta không nên làm điều gì đó như thế này. Rốt cuộc, sao chép mã không bao giờ là một ý tưởng hay. Nếu chúng tôi có một đồng xu cho mỗi lần bạn đọc nó ở đây, chúng tôi sẽ có khoảng bốn hoặc năm đồng xu. #killing_it

Bây giờ, ngay cả khi chúng tôi quyết định sao chép một số mã một vài lần theo cách thủ công, cách tiếp cận này không thực sự hiệu quả trong thực tế. Số lần chúng tôi cần sao chép mã của mình sẽ thay đổi dựa trên một số yếu tố bên ngoài, chẳng hạn như số lượng mục trong bộ sưu tập dữ liệu, một số kết quả từ một số dịch vụ web, số lượng chữ cái trong một từ và nhiều thứ khác mà . Nó sẽ không phải lúc nào cũng là một số cố định như 10. Thông thường, số lần chúng tôi muốn lặp lại một số mã có thể rất RẤT lớn. Chúng tôi không muốn sao chép và dán một cái gì đó vài trăm hoặc hàng nghìn lần để lặp lại một cái gì đó. Đó sẽ là khủng khiếp

Những gì chúng ta cần là một giải pháp chung để lặp lại mã với quyền kiểm soát số lần mã lặp lại. Trong JavaScript, giải pháp này được cung cấp dưới dạng một thứ gọi là vòng lặp. Có ba loại vòng lặp chúng ta có thể sử dụng để lặp lại một số mã

• cho các vòng lặp
• vòng lặp while
• làm. vòng lặp while

Mỗi biến thể trong số ba biến thể vòng lặp này cho phép chúng tôi chỉ định mã mà chúng tôi muốn lặp lại (còn gọi là vòng lặp) và một cách để dừng lặp lại khi một điều kiện được đáp ứng. Trong các phần sau, chúng ta sẽ tìm hiểu tất cả về chúng

trở đi

Chúa ơi. Một cuốn sách JavaScript của Kirupa?

Để nâng cao kỹ năng JavaScript của bạn ra ngoài vũ trụ, mọi thứ bạn cần để trở thành chuyên gia về JS đều có sẵn ở cả ấn bản bìa mềm và kỹ thuật số

MUA TRÊN AMAZON

vòng lặp for

Một trong những cách phổ biến nhất để tạo vòng lặp là sử dụng câu lệnh for để tạo vòng lặp for. Vòng lặp for cho phép chúng tôi chạy lặp lại một số mã cho đến khi một biểu thức chúng tôi chỉ định trả về false. Để giúp làm rõ định nghĩa này, chúng ta hãy xem một ví dụ

Nếu chúng ta phải dịch ví dụ saySomething trước đây của mình bằng cách sử dụng for, thì nó sẽ giống như sau

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

Nếu bạn muốn theo dõi tích cực hơn và xem mã này cho chính mình, hãy nhập mã này vào bên trong một số thẻ tập lệnh trong tài liệu HTML

  
  Loops!

  



  

Khi tài liệu của bạn đã sẵn sàng, hãy lưu tài liệu của bạn và xem trước nó trong trình duyệt của bạn. Sau khi trang được tải, đây là những gì bạn sẽ thấy

Lời chào. sẽ được lặp lại mười lần trên trang của bạn. Điều này được thực hiện nhờ vòng lặp for, vì vậy chúng ta sẽ cảm ơn nó bằng cách tìm hiểu tất cả về cách thức hoạt động của nó. Đầu tiên, đây là ngôi sao của chúng ta

for (let i = 0; i < 10; i++) {
	saySomething();
}

Đây là một vòng lặp for. Nó có thể trông rất khác so với các tuyên bố khác mà chúng ta đã thấy cho đến nay, và đó là bởi vì. tốt, nó rất khác nhau. Để hiểu sự khác biệt, hãy khái quát hóa vòng lặp for thành dạng sau

Chế độ xem cấp cao này tương ứng với các giá trị thực tế từ ví dụ của chúng tôi

Ba vùng có màu khác nhau này, mỗi vùng đóng một vai trò rất quan trọng trong cách hoạt động của vòng lặp của bạn. Để sử dụng tốt vòng lặp for, chúng ta phải biết từng khu vực hoàn thành công việc gì, vì vậy chúng ta sẽ dành vài phút tiếp theo để tìm hiểu sâu hơn về từng phần

Điểm băt đâu

Trong khu vực đầu tiên, chúng tôi xác định điểm bắt đầu cho vòng lặp của chúng tôi. Một điều phổ biến để đặt ở đây là một số mã để khai báo và khởi tạo một biến, tương tự như những gì chúng ta đã làm

Những gì chúng tôi đang nói với JavaScript là bắt đầu vòng lặp của chúng tôi với biến tôi đã khởi tạo thành 0

Bước

Chúng ta sẽ chuyển sang bước tiếp theo

Trong giai đoạn này, chúng tôi chỉ định điểm xuất phát của chúng tôi sẽ phát triển như thế nào. Ví dụ của chúng ta, những gì chúng ta đang nói là mỗi khi vòng lặp của chúng ta chạy, giá trị của i sẽ tăng lên 1. Điều đó được ghi lại bởi i ++ trông khó hiểu. Chúng ta sẽ đề cập đến ý nghĩa của dấu ++ sau này khi xem xét cách hoạt động của các con số và phép toán trong JavaScript, nhưng một cách khác để biểu diễn điều này là nói i = i + 1

Điều kiện (còn gọi là Vòng lặp trong bao lâu)

Quay trở lại giai đoạn mà chúng ta đã bỏ qua, chúng ta có phần điều kiện của vòng lặp xác định khi nào vòng lặp sẽ ngừng chạy

Trong ví dụ của chúng tôi, điều kiện là biến i của chúng tôi nhỏ hơn giá trị của 10

• Nếu biến i của chúng ta nhỏ hơn 10, biểu thức này sẽ cho giá trị đúng và vòng lặp của chúng ta tiếp tục chạy
• Nếu biến i của chúng tôi trở nên bằng hoặc lớn hơn 10, thì điều kiện là sai và vòng lặp của chúng tôi kết thúc

Bây giờ, bạn có thể tự hỏi điều gì khiến biến i của chúng ta thực sự thay đổi. Vâng, điều đó được bảo hiểm tiếp theo

Để tất cả chúng cùng nhau

Ok, bây giờ chúng ta đã xem xét chi tiết hơn từng phần của vòng lặp for, hãy sử dụng kiến ​​thức mới thu được để xem qua tất cả cùng một lúc để xem điều gì đang xảy ra. Ví dụ đầy đủ của chúng tôi, được lặp lại từ trước đó, như sau

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

Khi vòng lặp for của chúng ta ban đầu được nhấn tại điểm bắt đầu, biến i được tạo và khởi tạo thành 0. Tiếp theo, chúng ta chuyển sang phần điều kiện của vòng lặp để xác định xem vòng lặp của chúng ta có tiếp tục chạy hay không. Điều kiện kiểm tra xem giá trị của i có nhỏ hơn 10 không. 0 có nhỏ hơn 10 không? . Khi điều này được thực hiện, phần bước của vòng lặp của chúng tôi bắt đầu. Trong giai đoạn này, biến i được tăng thêm 1 để có giá trị là 1. Tại thời điểm này, vòng lặp của chúng ta đã chạy qua một chu kỳ, thường được gọi là vòng lặp. Đã đến lúc bắt đầu lần lặp tiếp theo

Đối với lần lặp tiếp theo, vòng lặp bắt đầu lại ngoại trừ biến i không được khởi tạo lại. Giá trị của nó là 1 từ lần lặp trước, do đó, giá trị đó được chuyển sang. Đối với điều kiện, chúng ta kiểm tra lại xem giá trị mới của 1 có nhỏ hơn 10 không. đó là. Mã bên trong vòng lặp của chúng tôi (về cơ bản là hàm sayS Something) và phần bước của vòng lặp trong đó tôi tăng thêm 1 xảy ra. Giá trị của i sau đó được tăng thêm 1 đến giá trị 2 và việc lặp lại này được thực hiện trong ngày. để ngỏ cánh cửa cho lần lặp lại tiếp theo

Quá trình này lặp đi lặp lại lặp đi lặp lại cho đến khi điều kiện i < 10 đánh giá là sai. Vì chúng tôi đã bắt đầu vòng lặp với i là 0, vòng lặp được đặt để kết thúc khi giá trị của i nhỏ hơn 10 và i tăng thêm 1 trong mỗi lần lặp, vòng lặp này (và bất kỳ mã nào chứa trong nó) sẽ chạy 10 lần trước đó . Phù

Một số ví dụ về vòng lặp

Trong phần trước, chúng ta đã phân tích một vòng lặp for đơn giản và đặt tên cho tất cả hoạt động bên trong của nó. Vấn đề về vòng lặp for và hầu hết mọi thứ trong JavaScript là một ví dụ đơn giản không phải lúc nào cũng bao gồm mọi thứ chúng ta có thể cần. Giải pháp tốt nhất là xem thêm một số ví dụ về vòng lặp for, và đó là những gì chúng ta sẽ làm trong vài phần tiếp theo

Phá vỡ một vòng lặp

Đôi khi, chúng tôi có thể muốn kết thúc vòng lặp của mình trước khi nó hoàn thành. Cách chúng ta kết thúc một vòng lặp là sử dụng từ khóa break. Dưới đây là một ví dụ

for (let i = 0; i < 100; i++) {
    document.writeln(i);

    if (i == 45) {
        break;
    }
}

Khi giá trị của i bằng 45, từ khóa break sẽ dừng vòng lặp tiếp tục. Mặc dù ví dụ này chỉ là một chút giả tạo, nhưng khi chúng ta gặp phải một trường hợp trong thế giới thực để kết thúc vòng lặp của mình, bây giờ chúng ta biết phải làm gì

Bỏ qua một lần lặp

Sẽ có lúc chúng tôi muốn vòng lặp của bạn bỏ qua bước lặp hiện tại và chuyển sang vòng lặp tiếp theo. Điều đó được xử lý khéo léo bởi từ khóa continue

let floors = 28;

for (let i = 1; i <= floors; i++) {
    if (i == 13) {
        // no floor here
        continue;
    }

    document.writeln("At floor: " + i + "
");
}

Không giống như break nơi vòng lặp của chúng ta chỉ dừng lại và về nhà, continue báo cho vòng lặp của chúng ta dừng lại và chuyển sang bước lặp tiếp theo. Chúng ta sẽ thường thấy mình sử dụng continue khi xử lý các lỗi mà chúng ta chỉ muốn vòng lặp chuyển sang mục tiếp theo

đi ngược

Không có lý do tại sao điểm xuất phát của chúng tôi phải có một biến được khởi tạo bằng 0 và sau đó tăng biến đó lên

for (let i = 25; i > 0; i--) {
	document.writeln("hello");
}

Bạn có thể dễ dàng bắt đầu ở mức cao và sau đó giảm dần cho đến khi điều kiện vòng lặp của bạn trả về giá trị sai

Bạn có thể đã nghe nói rằng làm điều gì đó như thế này sẽ tăng hiệu suất vòng lặp của bạn. Vẫn chưa rõ liệu giảm dần có thực sự nhanh hơn tăng hay không, nhưng vui lòng thử nghiệm và xem liệu bạn có nhận thấy bất kỳ lợi ích hiệu suất nào không

Bạn không cần phải sử dụng số

Khi điền vào vòng lặp for của bạn, bạn không cần phải chỉ sử dụng các số

________số 8

Bạn có thể sử dụng bất cứ thứ gì bạn muốn miễn là vòng lặp của bạn cuối cùng sẽ đạt đến điểm mà nó có thể kết thúc. Lưu ý rằng trong ví dụ này, chúng tôi đang sử dụng chữ a làm đơn vị tiền tệ để chạy vòng lặp này. Tại mỗi lần lặp, giá trị của i được tăng thêm chữ a và vòng lặp dừng khi i bằng aaaaaaaaa

Ồ, không, anh ấy không

ồ vâng. vâng tôi đã làm. Tôi đến đó, chụp một bức ảnh, đăng lên Facebook, và quay lại

let i = 0;
let yay = true;
 
for (; yay;) {
	if (i == 10) {
		yay = false;
	} else {
	  i++;
	  document.writeln("weird");
  }
}

Bạn không cần phải điền vào ba phần của vòng lặp for để nó hoạt động. Miễn là, cuối cùng, bạn thỏa mãn điều kiện kết thúc của vòng lặp, bạn có thể làm bất cứ điều gì bạn muốn. giống như tôi đã làm. Thêm chi tiết trong bài viết này

Các vòng lặp khác

Sống trong cái bóng của người yêu vòng lặp for là while và do. các biến thể của vòng lặp while. Vì lợi ích của sự hoàn chỉnh, chúng ta hãy nhanh chóng xem xét cả hai

Vòng lặp while

Vòng lặp while lặp lại một số mã cho đến khi điều kiện của nó (một biểu thức khác) trả về false. Hãy xem ví dụ sau

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

0

Trong ví dụ này, điều kiện được biểu thị bằng biểu thức đếm < 10. Với mỗi lần lặp, vòng lặp của chúng tôi tăng giá trị đếm lên 1

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

0

Khi giá trị của đếm trở thành 10, vòng lặp dừng lại vì biểu thức đếm < 10 sẽ trả về false. Nếu bạn nhìn vào mọi thứ mà vòng lặp while làm, thì nó giống như một sự bắt chước tuyệt vời của vòng lặp for. Trong khi vòng lặp for chính thức yêu cầu bạn xác định các giai đoạn bắt đầu, điều kiện và bước, thì vòng lặp while yêu cầu bạn tự xác định các giai đoạn đó theo cách riêng của mình

việc làm. trong khi lặp lại

Bây giờ, chúng ta đến với Meg Griffin của các biến thể vòng lặp. đó sẽ là làm. vòng lặp while có mục đích thậm chí còn ít được xác định hơn so với vòng lặp while. Trong trường hợp vòng lặp while có biểu thức điều kiện trước khi vòng lặp thực thi, do. vòng lặp while có biểu thức điều kiện ở cuối

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

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

2

Sự khác biệt chính giữa vòng lặp while và do. vòng lặp while là nội dung của vòng lặp while không bao giờ có thể được thực thi nếu biểu thức điều kiện của nó sai ngay từ đầu

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

3

với một làm. vòng lặp while, vì biểu thức điều kiện chỉ được đánh giá sau một lần lặp, nên nội dung vòng lặp của bạn được đảm bảo chạy ít nhất một lần

for (let i = 0; i < 10; i++) {
	saySomething();
}

function saySomething() {
	document.writeln("hello!");
}

4

Điều đó có thể có ích trong một số tình huống. Bây giờ, trước khi chúng ta kết thúc mọi thứ, chỉ còn một thông tin cuối cùng tôi cần cho bạn biết trước khi chúng ta tiếp tục. Các câu lệnh break và continue mà chúng ta đã thấy trước đó như một phần của vòng lặp tuyệt vời for cũng hoạt động tương tự khi được sử dụng bên trong while và do. các biến thể của vòng lặp while

Sự kết luận

Vậy là bạn đã có nó - hãy xem các vòng lặp for và cách chúng ta có thể sử dụng chúng cùng với phạm vi bảo hiểm rất cơ bản của while và do. vòng lặp while. Ngay bây giờ, chúng ta có thể không thấy mình sử dụng vòng lặp nhiều. Khi chúng ta bắt đầu gặp nhiều tình huống phức tạp hơn liên quan đến tập hợp dữ liệu, các phần tử trong DOM, thao tác văn bản và các nội dung khác, chúng ta sẽ sử dụng vòng lặp nhiều hơn nữa. Về cơ bản. giữ tất cả các thông tin chúng tôi đã nhìn thấy ở đây thực sự gần