Với các vòng lặp, chúng ta có thể lặp lại các phần của mã. Hầu hết thời gian điều này có nghĩa là chúng tôi lặp lại một số loại hướng dẫn cho các trường hợp khác nhau
Hãy tưởng tượng rằng chúng ta cần nướng 20 chiếc bánh, chúng ta sẽ không có công thức làm cho 20 chiếc bánh mà chỉ có một công thức duy nhất, sau đó chúng ta lặp lại 20 lần
Các vòng lặp cũng rất tốt để đếm, giả sử bạn cần hiển thị các năm từ 1970 đến 2019, bạn có thể sử dụng vòng lặp for để thêm các phần tử đó
Chúng ta có những vòng lặp nào trong JavaScript?
Danh sách các vòng lặp trong JavaScript đang tăng lên hàng năm, hầu hết các bổ sung được thực hiện để sử dụng dễ dàng hơn với mảng và các loại dữ liệu khác. Bạn cũng nên xem bài viết “JavaScript là gì” của chúng tôi, chỉ để bao gồm tất cả những điều cơ bản
Loại vòng lặp trong JavaScript
forwhiledo/whilefor/inforEach"vòng lặp" cho mảngfor/of
Tất cả các loại đều có mục đích riêng và chúng tôi sẽ giải thích từng loại một, sau này, chúng tôi cũng có một ví dụ mà bạn có thể sử dụng trên một trang web đơn giản
vòng lặp for trong JavaScript
Vòng lặp for là một trong những vòng lặp cơ bản trong tất cả các ngôn ngữ. Nó cho phép chúng ta làm việc với một mảng số, đếm số,
Vòng lặp for có 3 phần. khởi tạo, điều kiện và biểu thức cuối cùng.
Với phần khởi tạo, chúng tôi đặt giá trị bắt đầu cho biến vòng lặp của mình; . Nhiều khi tôi được dùng làm tên cho biến; . Trên thực tế, một cái tên giúp mã của bạn dễ đọc hơn.
Điều kiện là một phần quan trọng của vòng lặp for vì nó đảm bảo rằng vòng lặp của bạn sẽ có kết thúc, điều kiện khi nó ngừng lặp, lặp…
Biểu thức cuối cùng là một câu lệnh sẽ chạy ở cuối vòng lặp, sau mỗi lần lặp của vòng lặp. Biểu thức cuối cùng trong hầu hết các trường hợp là một dạng tăng/giảm nào đó của biến vòng lặp. 99% thời gian mã này bằng với i++, điều đó có nghĩa là chúng tôi tăng _______8_______ lên 1.
Xem ví dụ dưới đây để tìm hiểu làm thế nào để tăng hai
Với vòng lặp for, chúng ta có thể
Đếm từ 1 đến 100
- Từ 100 đến 1
- Nhận tất cả các số chẵn từ 1 đến 100 [xem ví dụ bên dưới]
- Nhận 10 bản ghi đầu tiên từ một mảng
- …
vòng lặp while trong JavaScript
Vòng lặp while sẽ lặp qua mã đã cho miễn là điều kiện là đúng
Nó chỉ có "một" phần, điều kiện. Rất nhiều lần giá trị của điều kiện bị thay đổi trong chính vòng lặp.
Trong khi vòng lặp có thể được sử dụng cho
- Chờ đợi một điều kiện là đúng
- Tăng giá trị cho đến khi chúng tôi đạt được một số giá trị không xác định
- Tìm kiếm phần cuối của cây [dữ liệu]
- ...
Bạn phải cẩn thận với vòng lặp while, vì rất nhiều lần, các nhà phát triển mắc lỗi và điều kiện sẽ không bao giờ kích hoạt, điều này có nghĩa là vòng lặp đó không bao giờ kết thúc. Loại mã này sau đó làm cho ứng dụng không phản hồi, mã không có lỗi, nhưng đây là lỗi thời gian chạy và khó tìm. Để tránh loại lỗi này, bạn có thể thêm một bộ đếm để ngắt vòng lặp sau một số vòng lặp
làm. trong khi lặp lại
Vòng lặp while0 và while rất giống nhau, với một điểm khác biệt quan trọng nữa là. while sẽ chạy ít nhất một lần và nó sẽ chạy cho đến khi điều kiện đúng. [xem ví dụ với kẹo bên dưới để so sánh cả hai loại vòng lặp]
Vì vậy, lần chạy đầu tiên này hữu ích để làm gì? . Đôi khi điều này làm cho mã sạch hơn và dễ kiểm soát hơn
Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay hôm nay
dùng thử miễn phílàm. trong khi vs. trong khi lặp lại
Tất cả chúng ta đều thích kẹo, hãy để tôi giải thích điều này bằng kẹo. . ]
Chúng tôi có một điều kiện là mỗi thứ Sáu, chúng tôi sẽ tặng một viên kẹo cho tất cả nhân viên, mỗi giờ. Những ngày khác chúng tôi không phát kẹo, chúng tôi đều biết rằng thứ sáu là đặc biệt. Điều này làm cho việc làm. vòng lặp while hoàn hảo cho những người hảo ngọt
handOutCandies sẽ chỉ thực hiện khi ngày là thứ 6 và lặp lại sau mỗi giờ, chúng ta nhận được 1 viên kẹo cho 1 tuần làm việc
làm. while sẽ cho phép handOutCandies thực thi mỗi khi chúng tôi chạy kiểm tra, điều này có nghĩa là chúng tôi nhận được ít nhất một viên kẹo mỗi ngày hoặc 5 viên kẹo mỗi tuần
Tôi biết bây giờ bạn muốn có nhiều kẹo hơn, nhưng điều này không có nghĩa là bạn sẽ luôn sử dụng do. vòng lặp while, hãy cẩn thận khi sử dụng nó;]
vì. trong vòng lặp trong JavaScript
while2 là một vòng lặp quan trọng đối với JavaScript vì nó lặp qua tất cả các thuộc tính có thể đếm được của một đối tượng JavaScript. Nói cách khác, nếu chúng ta có một đối tượng, chúng ta có thể đọc tất cả các giá trị của đối tượng đó bằng cách sử dụng vòng lặp while2
while2 rất hữu ích nếu chúng tôi có một đối tượng mà chúng tôi không biết gì về nó và điều này cho phép chúng tôi chuyển qua các thuộc tính và đưa ra quyết định. Điều này xảy ra rất nhiều với các cuộc gọi máy chủ. Ngoài ra, điều này làm cho việc sử dụng các nguyên mẫu dễ dàng hơn vì chúng ta có thể tạo một vòng lặp mà không cần biết tất cả các thuộc tính
while5 có thể bị nhầm với vòng lặp for each lặp qua tất cả các đối tượng trong một mảng. Chúng ta vẫn có thể sử dụng while2 nhưng nó sẽ trả về cho chúng ta các chỉ số của mảng đã cho, không phải đối tượng. Vòng lặp tốt hơn sẽ là phương thức forEach của một mảng hoặc vòng lặp while8
phương thức forEach của một mảng
Phương thức forEach là một "vòng lặp" lặp lại tất cả các đối tượng trong một mảng bằng một phương thức. Để sử dụng forEach, chúng ta cần cung cấp một hàm tiêu thụ đối tượng
Đây là một cách tiếp cận rất trực quan khi bạn đã quen với nó. Bạn sử dụng một mảng làm cơ sở và phương thức tiêu thụ, nó trả về tất cả các đối tượng cần thiết. Bạn không cần phải đếm, quan tâm đến các trường hợp cạnh hoặc suy nghĩ về các loại và giá trị, chỉ cần sử dụng các đối tượng mà bạn mong đợi
Cho đến phiên bản JavaScript mới nhất, đây là cách ưa thích, nhưng phiên bản mới nhất đã giới thiệu vòng lặp while8. Không có gì sai với forEach, nhưng đôi khi đối với. làm cho việc sử dụng sạch hơn.
vì. của vòng lặp
while8 vòng lặp lặp qua các đối tượng. Vì. of mạnh hơn một chút vì nó có thể lặp lại các đối tượng kiểu mảng [e. g. , đối số hoặc NodeList], TypedArray, do/while3, do/while4 và các lần lặp do người dùng xác định [một cách để thực hiện triển khai tùy chỉnh for. của vòng lặp]
Đây là một đoạn mã, tương tự như đoạn mã mà chúng ta đã trình bày bằng cách sử dụng phương thức forEach, mỗi lần lặp lại cho chúng ta khả năng làm việc với đối tượng
Cảm ơn bạn đã đăng ký
😎
Tìm hiểu xem có nhà phát triển nào trong bạn hay không bằng cách trả lời một số câu hỏi
Với ứng dụng này, bạn cho phép chúng tôi gửi email cho bạn
Ví dụ về cách sử dụng vòng lặp trong JavaScript
Thật tuyệt khi có ví dụ sinh động hơn về cách sử dụng vòng lặp trong JavaScript. Chúng tôi quyết định viết một trang web đơn giản sẽ giới thiệu tất cả các vòng lặp có thể có cho bạn. Nếu bạn muốn tạo một ví dụ phức tạp hơn, hãy xem bài đăng trên blog của chúng tôi Cách tạo bộ lọc danh sách JavaScript và biểu mẫu Liên hệ trong JavaScript
Ví dụ của chúng tôi có 2 phần;
Chúng tôi bắt đầu với trang web, đó là một tài liệu HTML đơn giản. Tiếp theo, chúng ta thêm tất cả mã bên trong tệp JavaScript, mã sẽ tạo tất cả nội dung cho trang web bằng các vòng lặp
Xây dựng một trang web để hiển thị tất cả các vòng lặp trong JavaScript
Chúng ta cần bắt đầu với một mẫu HTML đơn giản [chúng tôi có một mẫu trên bài đăng trên blog HTML là gì, hãy xem thử]
Sao chép vào clipboard1. Thêm liên kết vào tệp CSS
Chúng tôi cần kết nối tệp JavaScript nơi chúng tôi xác định tất cả các chức năng và HTML của mình
Nếu tệp của bạn được đặt tên khác hoặc nằm trong thư mục con, bạn nên thay đổi giá trị của thuộc tính do/while5
2. Thêm các phần tử để đếm đơn giản
Từ giờ trở đi, chúng tôi thêm tất cả các phần tử hiển thị bên trong thẻ của tài liệu HTML
Sao chép vào clipboardChúng tôi thêm nhãn "Đếm. ", đó chỉ là một văn bản bên trong HTML, tiếp theo chúng ta thêm một
thẻ để lưu trữ giá trị. Chúng tôi thêm tất cả các giá trị bên trong bộ phận [
] nhãn. Chúng tôi sử dụng do/while6 cho thẻ này để chúng tôi có thể tìm thấy nó trong mã của mình. Mã JavaScript tìm phần tử và thay đổi HTML cho chúng ta bằng một dãy số bằng cách sử dụng vòng lặp for
Sau các thẻ div, thêm hai thẻ do/while7 nữa để tạo khoảng trống
3. Thêm phần tử để hiển thị số chẵn
Chúng tôi lặp lại các bước tương tự cho tất cả các ví dụ về vòng lặp trong JavaScript
Hãy cẩn thận khi sử dụng các giá trị mới cho do/while8
4. Thêm các phần tử vào danh sách các dải
Lần này chúng ta sử dụng một phần tử khác, một danh sách không có thứ tự, hoặc
- nhãn. Nhãn và phanh giữ nguyên
- thẻ vào danh sách không có thứ tự của chúng tôi, đối với mỗi ban nhạc, chúng tôi thêm một mục danh sách mới
Chúng tôi thêm một danh sách phụ mà chúng tôi sử dụng để hiển thị phương thức forEach
Đừng quên thay đổi id và nhãn để bạn biết danh sách nào là danh sách nào
Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay hôm nay
dùng thử miễn phí5. Thêm một danh sách cho các thuộc tính ban nhạc
Tương tự như danh sách các dải, chúng tôi tạo danh sách các thuộc tính bằng danh sách không có thứ tự
Thêm phanh ở đây là tốt
6. làm. bộ đếm trong khi [và trong khi]
Các yếu tố này sẽ có một bộ đếm đơn giản, sẽ thay đổi mỗi giây
Vì chúng tôi giới thiệu hai thứ nên chúng tôi có hai nhãn một cho loại vòng lặp "Làm trong khi" hoặc "Trong khi"
Đối với bộ đếm, chúng tôi sử dụng thẻ
do/while9Chúng tôi đã tạo một tài liệu HTML, đây là mã cuối cùng
Sao chép vào clipboardHãy viết JavaScript và trình bày cách sử dụng vòng lặp
Chúng tôi đã chuẩn bị tài liệu HTML sẽ hiển thị tất cả các giá trị cho chúng tôi. Nó trình bày kết quả cho các vòng lặp khác nhau mà chúng tôi sử dụng trong JavaScript
Đã đến lúc viết mã và xem kết quả. Trong ví dụ này, chúng tôi sử dụng dữ liệu đơn giản, nhưng việc sử dụng vòng lặp với dữ liệu từ nguồn JSON phức tạp thực tế giống nhau. Kiểm tra bài đăng trên blog của chúng tôi để xem dữ liệu JSON là gì
1. Đếm đến 20 bằng vòng lặp for trong JavaScript
Hàm đầu tiên chúng ta viết là countTo20 như tên gọi nó đếm đến 20, bắt đầu từ 1.
Hầu hết các hàm chúng ta viết đều có một biến ngay từ đầu, biến này có nghĩa là giữ một tham chiếu đến phần tử của chúng ta trong DOM, đây là phần tử, hiển thị giá trị trên màn hình. Trong trường hợp của chúng tôi, chúng tôi sử dụng
Sao chép vào clipboardfor/in0 với id chofor/in1. Đọc thêm về DOM trong JavaScriptBiến sau đây là vòng lặp for của chúng ta. Bây giờ chúng ta có thể thấy tất cả các bộ phận đang hoạt động. Chúng tôi khởi tạo biến
ivới 1. Tiếp theo, chúng tôi muốn đếm đến 20, điều này có nghĩa là biến i cần nhỏ hơn hoặc bằng 20. Cuối cùng, chúng ta cần tăng giá trị của i với mỗi lần lặp lạiChúng ta đặt giá trị là innerHTML, đây là thuộc tính thay đổi văn bản hiển thị.
Đối với giá trị, chúng tôi sử dụng chuỗi ký tự, điều này có nghĩa là chúng tôi sử dụng dấu gạch ngược ` thay vì dấu nháy đơn bình thường. Chúng tôi sử dụng backticks để cho phép sử dụng các biến trong văn bản
for/in32. Số chẵn, thay đổi bước bằng vòng lặp for
Với chức năng này, chúng tôi chỉ ra cách chúng tôi có thể thay đổi cách vòng lặp tăng giá trị. Đây là một cách tốt để hiển thị số chẵn
Nếu bạn so sánh nó với hàm đếm, tất cả những gì thay đổi là biến i++ trở thành i+=2, có nghĩa là chúng ta lấy giá trị của biến i và thêm 2
Sao chép vào clipboardChúng tôi cũng sử dụng backticks ở đây.
3. sử dụng cho. phương thức của vòng lặp và forEach trong JavaScript
Đây là cách tạo danh sách các dải từ một mảng, được lưu trữ trong một biến có tên
for/in4Chúng tôi cần một biến có tên ul cho danh sách không có thứ tự của chúng tôi. Hơn nữa, chúng ta cũng cần tạo một mảng, đây sẽ là danh sách các dải. Chúng tôi có thể khởi tạo danh sách bằng dấu ngoặc vuông [[]] và sau đó chỉ cần thêm tên bạn muốn, chỉ cần đảm bảo phân tách chúng bằng dấu phẩy.
sử dụng cho. của vòng lặp, giờ đây chúng ta có thể làm việc với từng tên dải. Trong vòng lặp, chúng tôi tạo một mục danh sách mới bằng cách sử dụng
Sao chép vào clipboardfor/in5. Tiếp theo, chúng tôi đặt giá trị bằng cách sử dụngfor/in6, cuối cùng, chúng tôi cần cập nhật danh sách bằng cách sử dụngfor/in7Đoạn mã dưới đây là sự so sánh về cách bạn có thể triển khai cùng chức năng như trước đây nhưng sử dụng phương thức
for/in8Phương thức forEach yêu cầu một hàm có một tham số cho đối tượng của chúng ta từ mảng, chúng ta đặt tên cho nó là band như trong for. của vòng lặp
Sao chép vào clipboard4. Nhận thuộc tính đối tượng với for. trong vòng lặp
Làm việc với các đối tượng là một phần quan trọng của lập trình và đôi khi chúng ta không biết gì về một đối tượng mà chúng ta có. Ví dụ: khi chúng tôi nhận được một đối tượng từ máy chủ hoặc bất kỳ nguồn nào khác. Trong trường hợp đó, sẽ rất hữu ích khi có cách đi qua các thuộc tính của đối tượng đó
Trong trường hợp của chúng tôi, chúng tôi tạo đối tượng của mình, điều đó sẽ kiểm tra các thuộc tính. Đây là
Sao chép vào clipboardfor/in9 của chúng tôi, nó có mô tả về một ban nhạc. Chúng tôi đã thêm một bộ thuộc tính tối thiểu mô tả một ban nhạc, nhưng bạn có thể tự do và thêm một số thuộc tính khácKhi chúng ta có một đối tượng, chúng ta có thể sử dụng for. trong vòng lặp và in ra các thuộc tính của đối tượng đó
Trong vòng lặp, chúng tôi tạo một mục danh sách mới và thêm nó vào danh sách của chúng tôi. Chúng tôi hơi điên rồ ở đây và thêm một số phong cách, chúng tôi in đậm tên của thuộc tính để nó trông đẹp hơn trên trang web của chúng tôi
5. làm. vòng lặp while và while - với một ví dụ ngược lại
mặc dù làm. vòng lặp while và while chuẩn hơn là không, chúng tôi giữ chúng đến cùng. Chúng tôi muốn cho bạn thấy một bộ đếm đơn giản. Đối với điều đó, chúng ta cần một vài điều đặc biệt.
Chúng ta cần đánh dấu các chức năng của mình bằng async, điều đó có nghĩa là các chức năng sẽ chạy trong một luồng riêng biệt và sẽ không ngăn luồng chính thực thi. Điều này có nghĩa là chúng ta không cần đợi họ thực thi điều gì đó
Chúng tôi muốn các chức năng không đồng bộ để chúng tôi thực thi chúng khi tải trang, nhưng chúng chạy trong thời gian dài hơn. Chính xác là 10 giây.
Tiếp theo, chúng ta cần một cách đơn giản để mô phỏng độ trễ 1 giây. Đối với điều đó, chúng ta cần một chức năng gọi là ngủ. Nó tạo một newTimeout và sau đó chúng tôi đợi nó thực thi. Tại thời điểm này, bạn chỉ cần thuận theo dòng chảy và sử dụng nó. Chúng tôi hứa rằng nó sẽ trông thật tuyệt trên màn hình
Sao chép vào clipboardCuối cùng, chúng tôi sử dụng các vòng lặp
Đầu tiên, chúng ta sử dụng vòng lặp while. Chúng tôi nhận được nhịp của mình với id whileCount và thay đổi giá trị của nó cho mỗi lần lặp lại. Khi kết thúc quá trình lặp, chúng tôi gọi hàm
Sao chép vào clipboardforEach0 từ trênVòng lặp do while cũng làm như vậy. Nhưng chúng tôi sử dụng các id khác nhau để có hai bộ đếm trên màn hình
Sao chép vào clipboardHãy nhớ rằng vòng lặp do while luôn chạy một lần nên rất tốt cho việc khởi tạo. Để thực hành, bạn có thể thay đổi các điều kiện và sử dụng
forEach1. Bạn sẽ thấy sự khác biệt ở đó.6. Chạy tất cả các mã
Chúng tôi đã thêm tất cả mã, bây giờ chúng tôi cần kết hợp tất cả các chức năng và thực thi chúng khi tải tài liệu. Chúng tôi thêm một chức năng mới gọi là runAll. Tất cả chức năng này làm, nó gọi tất cả các chức năng khác mà chúng tôi có
Sao chép vào clipboardNếu chúng tôi muốn thực thi một đoạn mã khi tải tài liệu HTML, chúng tôi cần một chút mã ưa thích.
tài liệu. addEventListener là một cách để nói với trang web của chúng tôi rằng chúng tôi muốn lắng nghe một sự kiện và sự kiện đó là khi trang tải xong. Sự kiện này được gọi là DOMContentLoaded. Nếu sự kiện này tải, chúng tôi sẽ chạy chức năng runAll của mình [hãy cẩn thận, không có dấu ngoặc sau runAll, chúng tôi chỉ đang liên kết chức năng và sự kiện, không thực thi chức năng]
Sao chép vào clipboardKết luận về cách sử dụng vòng lặp trong JavaScript
Chúng tôi muốn chỉ cho bạn cách sử dụng vòng lặp trong JavaScript theo nhiều cách khác nhau. Vòng lặp là một phần quan trọng của lập trình, mặc dù bạn chỉ có thể sử dụng vòng lặp
fortiêu chuẩn, nhưng cách bạn lặp vẫn tiếp tục thay đổi để làm cho cuộc sống của chúng ta dễ dàng hơnNếu bạn có bất kỳ câu hỏi hoặc nhận xét xin vui lòng gửi chúng dưới đây. Để chúng tôi tại CodeBrainer có thể cải thiện blog của chúng tôi cho bạn hơn nữa
Bạn có thể tạo vòng lặp trong HTML không?
Thuộc tính vòng lặp là thuộc tính boolean . Khi xuất hiện, nó chỉ định rằng âm thanh sẽ bắt đầu lại mỗi khi kết thúc.Làm cách nào để lặp văn bản trong HTML?
vòng lặp văn bản vô hạn liên tục 1 vòng lặp văn bản vô hạn liên tục 2Chủ Đề
Sử dụng JavaScript chúng tôi thêm