Vòng lặp for trong ví dụ javascript
|
Khi điều kiện còn đúng, vòng lặp vẫn tiếp tục. Khi điều kiện trở thành sai, vòng lặp kết thúc Show
Ví dụ: hãy hiển thị các số từ 0 đến 5 bằng vòng lặp for for(let i = 0; i <= 5; i+=1) {
console.log(i)
}đầu ra 0 1 2 3 4 5 Trong vòng lặp for cụ thể này, điều kiện là i <=5 Nói cách khác, nếu i nhỏ hơn hoặc bằng 5, chúng tôi tiếp tục hiển thị các giá trị và tăng giá trị của i lên 1 Trong hướng dẫn này, bạn sẽ tìm hiểu mọi thứ bạn cần biết về vòng lặp for trong JavaScript Điêu nay bao gôm
Và nhiều hơn nữa Đối với các vòng lặp được giải thích bằng JavaScriptTrong JavaScript, vòng lặp for có thể lặp lại mã miễn là thỏa mãn điều kiện Một ứng dụng của vòng lặp for là lặp qua một tập hợp các giá trị Trong JavaScript, bạn có thể lưu trữ các giá trị vào các bộ sưu tập có thể lặp lại, chẳng hạn như mảng Đưa ra một mảng các giá trị, bạn thường muốn đi qua từng giá trị một Làm điều này một cách thủ công sẽ rất lãng phí thời gian Đây là nơi có thể sử dụng vòng lặp for Bạn có thể sử dụng vòng lặp for để duyệt qua một lần lặp, chẳng hạn như một mảng, từng phần tử từ đầu đến cuối Dưới đây là một minh họa về vòng lặp for Để biết cách tạo vòng lặp for, trước tiên bạn cần hiểu cú pháp của nó cú phápfor(initialization; condition; lastExpression) {
// code
}Ở đâu
ví dụBây giờ bạn đã hiểu cú pháp của vòng lặp for, hãy xem một số ví dụ về việc sử dụng nó Hiển thị số từ 1 đến 10Hãy sử dụng vòng lặp for để ghi từng giá trị từ 1 đến 10 Đây là giao diện của nó trong mã for (let i = 1; i <= 10; i += 1) {
console.log(i)
}đầu ra 1 2 3 4 5 6 7 8 9 10 Để hỗ trợ sự hiểu biết, chúng ta hãy xem kỹ vòng lặp for và so sánh nó với cú pháp vòng lặp for trong chương trước
Bên trong vòng lặp, chúng ta có một bảng điều khiển biểu thức đơn giản. đăng nhập (tôi) Điều này hiển thị bất kỳ giá trị hiện tại nào của biến i miễn là nó nhỏ hơn hoặc bằng 10 Tiếp theo, hãy xem một ví dụ về việc sử dụng vòng lặp for để truy cập các giá trị của một mảng Lặp qua một mảngNhư đã nêu trước đó, bạn có thể sử dụng vòng lặp for để lặp qua các tập giá trị, chẳng hạn như một mảng Trong ví dụ này, bạn học cách lặp qua một mảng các chuỗi Để lặp qua một mảng, bạn cần cẩn thận Như bạn có thể đã biết, việc truy cập một phần tử mảng xảy ra với một chỉ mục. Nếu chỉ mục này nằm ngoài tầm với của mảng, bạn sẽ gặp lỗi Nếu bạn cố truy cập phần tử thứ 6 của một mảng gồm 5 giá trị, chương trình của bạn sẽ bị lỗi Vì vậy, bạn cần cẩn thận khi lập công thức vòng lặp for để lặp qua một mảng Để lặp qua một mảng bằng vòng lặp for, hãy làm theo ba bước sau
Đây là một ví dụ const names = ["Alice", "Bob", "Charlie"]
for(let i = 0; i < names.length; i += 1) {
console.log(names[i])
}đầu ra Alice Bob Charlie Tiếp theo, chúng ta hãy xem một vòng lặp for với nhiều điều kiện Đối với vòng lặp có nhiều điều kiệnTrước đây, bạn đã thấy các ví dụ trong đó điều kiện lặp đơn giản Tuy nhiên, điều kiện có thể phức tạp hơn miễn là nó đánh giá đúng hoặc sai Một ví dụ phổ biến là khi bạn có nhiều điều kiện lặp được xâu chuỗi cùng với các toán tử logic Ví dụ: hãy tạo một vòng lặp tìm số mục tiêu được cung cấp một mảng số let found = false
let target = 13
const numbers = [1, 5, 13, 8, 12, 176]
for(let i = 0; !found && i < numbers.length; i += 1) {
console.log("Inspecting number " + numbers[i])
if (numbers[i] === target) {
console.log("Target found!")
found = true
}
}đầu ra ________số 8Trong vòng lặp này, điều kiện bao gồm hai phần
Nếu cả hai điều kiện này đều đúng, vòng lặp tiếp tục Tiếp theo, hãy tập trung vào việc kiểm soát luồng của các vòng lặp for trong JavaScript bằng cách kiểm tra các câu lệnh kiểm soát luồng tiếp tục và ngắt Báo cáo luồng điều khiển (ngắt và tiếp tục)Trong JavaScript, bạn có thể kiểm soát luồng của một vòng lặp Với các câu lệnh luồng điều khiển, có thể kết thúc lần lặp hiện tại của một vòng lặp. Bạn cũng có thể sử dụng các câu lệnh luồng điều khiển để thoát khỏi toàn bộ vòng lặp Có hai câu lệnh luồng điều khiển trong JavaScript
Chúng ta hãy xem xét kỹ hơn những tuyên bố này tiếp tụcTrong JavaScript, bạn có thể sử dụng câu lệnh continue để thoát khỏi vòng lặp for hiện tại Điều này hữu ích nếu vòng lặp bao gồm mã không cần thực thi mỗi lần Câu lệnh continue cho phép bạn bỏ qua “phần còn lại của mã” trong vòng lặp Ví dụ: cho một dãy số, hãy sử dụng vòng lặp for để hiển thị thông tin trên từng số. Cụ thể hơn, hãy hiển thị xem số đó là số lẻ hay số chẵn Đây là một ví dụ thực hiện const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (let number of numbers) {
if (number % 2 == 0) {
console.log("Even number " + number)
continue
}
console.log("Odd number " + number)
}đầu ra 0 1 2 3 4 50 Trong đoạn mã này, chúng ta sử dụng câu lệnh continue để nhảy ra khỏi lần lặp hiện tại nếu số đó là số chẵn Điều này là do chúng tôi không muốn in “Số lẻ” ở cuối mỗi lần lặp Nếu không có câu lệnh continue, mã này sẽ luôn in cả “Số chẵn” và “Số lẻ” Bây giờ câu lệnh continue ngăn chặn việc thực thi dòng cuối cùng trong vòng lặp for Để về nhà, bạn có thể sử dụng câu lệnh tiếp tục để bỏ qua phần còn lại của vòng lặp Tiếp theo, chúng ta hãy xem một câu lệnh luồng kiểm soát tích cực hơn, phá vỡ phá vỡTrong JavaScript, bạn có thể sử dụng câu lệnh break để thoát khỏi vòng lặp hoàn toàn Khi câu lệnh break được sử dụng, vòng lặp kết thúc ngay lập tức Điều này hữu ích nếu bạn muốn tiết kiệm tài nguyên và ngừng lặp sau khi một số điều kiện được đáp ứng Ví dụ: cho một số mục tiêu và một danh sách các số, hãy xây dựng vòng lặp for để tìm mục tiêu 0 1 2 3 4 51 đầu ra 0 1 2 3 4 52 Chúng tôi đã sử dụng câu lệnh break để thoát khỏi vòng lặp ngay khi tìm thấy số mục tiêu Điều này là tốt vì sẽ không có ý nghĩa gì nếu tiếp tục tìm kiếm các con số sau khi tìm thấy những gì chúng tôi đang tìm kiếm Để về nhà, hãy sử dụng câu lệnh ngắt để tiết kiệm tài nguyên và thoát khỏi vòng lặp sớm Tiếp theo, chúng ta hãy xem một tình huống trong đó bạn có thể bỏ qua dấu ngoặc nhọn trong vòng lặp for Bạn có nên bỏ qua các dấu ngoặc nhọn với các vòng lặp không?Nếu bạn có biểu thức một dòng trong vòng lặp for, bạn không cần sử dụng dấu ngoặc nhọn Nhân tiện, đây không phải là thứ dành riêng cho vòng lặp. Nó thường áp dụng cho tất cả các loại khối mã khác Tôi đưa vấn đề này lên vì đôi khi nó có thể gây nhầm lẫn Ví dụ: cho một mảng tên, hãy sử dụng vòng lặp for để in tên ra bàn điều khiển 0 1 2 3 4 53 đầu ra Alice Bob Charlie Như bạn có thể thấy, câu lệnh ghi nhật ký giao diện điều khiển không bao quanh các dấu ngoặc nhọn Điều này là do nó là một dòng mã và trình phân tích cú pháp JavaScript biết nó thuộc về vòng lặp Bây giờ hãy xem điều gì sẽ xảy ra nếu chúng ta cố gắng thực hiện điều này với nhiều biểu thức bên trong vòng lặp Ví dụ 0 1 2 3 4 55 đầu ra 0 1 2 3 4 56 Điều này không hoạt động như mong đợi Bạn sẽ thấy một đường đứt nét sau mỗi tên Thay vào đó, bạn nhận được một đường đứt nét duy nhất sau phần tử cuối cùng Điều này là do vòng lặp coi biểu thức cuối cùng nằm ngoài vòng lặp Cách này bỏ qua dấu ngoặc nhọn gây nhầm lẫn Vì vậy, nên sử dụng dấu ngoặc nhọn xung quanh vòng lặp for (và các khối mã khác) để tránh nhầm lẫn và mắc lỗi ngớ ngẩn Bây giờ bạn đã hiểu rõ về vòng lặp for trong JavaScript Tiếp theo, chúng ta hãy xem xét một số lựa chọn thay thế cho vòng lặp for Về cơ bản, bạn sẽ học tất cả các loại vòng lặp khác trong JavaScript Đối với các lựa chọn thay thế vòng lặpMặc dù đây là hướng dẫn về vòng lặp for, nhưng bạn nên chú ý đến các cách tiếp cận thay thế Đôi khi những lựa chọn thay thế này phù hợp hơn với nhu cầu của bạn Có 3 loại vòng lặp chính trong JavaScript
Ngoài những điều này, có 2 biến thể của vòng lặp for để lặp qua các lần lặp
Và khi lặp qua một mảng, bạn cũng có thể sử dụng Array. phương thức forEach() thay vì vòng lặp for Tổng cộng, có 5 lựa chọn thay thế mà bạn có thể cân nhắc khi viết vòng lặp for thông thường Tiếp theo, bạn sẽ tìm hiểu cách thức hoạt động của từng lựa chọn thay thế này Vòng lặp WhileVòng lặp while là một loại vòng lặp phổ biến trong JavaScript Một vòng lặp while lặp lại một đoạn mã miễn là một điều kiện được đáp ứng Dưới đây là một minh họa về vòng lặp while Ý tưởng của vòng lặp while tương tự như vòng lặp for nhưng cú pháp khác Hãy xem xét cú pháp kỹ hơn một chút cú phápTrong JavaScript, vòng lặp while tuân theo cú pháp này 0 1 2 3 4 57 Ở đâu
Không giống như vòng lặp for, vòng lặp while không có biểu thức cuối cùng rõ ràng mà cuối cùng sẽ cập nhật điều kiện thành sai và dừng vòng lặp Do đó, một vòng lặp while có xu hướng trở thành một vòng lặp vô tận Một vòng lặp vô tận có nghĩa là điều kiện luôn đúng và vòng lặp tiếp tục mãi mãi Đây không phải là điều bạn muốn và nó có thể gây ra sự cố nghiêm trọng trong ứng dụng web của bạn Để tránh vòng lặp vô tận, cuối cùng bạn phải sửa đổi điều kiện bằng cách thực hiện một hành động bên trong vòng lặp Ví dụ: khi đếm giá trị, bạn phải tăng biến đếm ở cuối mỗi lần lặp Thí dụHãy sử dụng vòng lặp while để đếm đến 5 và hiển thị các số trong bảng điều khiển 0 1 2 3 4 58 đầu ra 0 1 2 3 4 5 Đây là lần đầu tiên bạn khởi tạo bộ đếm bên ngoài vòng lặp while Bạn đặt biến đếm i thành 0 Sau đó, bạn xây dựng một vòng lặp while trong đó điều kiện cho biết vòng lặp phải tiếp tục cho đến khi bộ đếm lớn hơn 5 Trong vòng lặp while, bạn in giá trị hiện tại của bộ đếm Sau đó, bạn cũng tăng bộ đếm cho vòng tiếp theo Nếu bạn không cập nhật bộ đếm ở cuối vòng lặp, bạn sẽ gây ra vòng lặp vô tận Tiếp theo, chúng ta hãy xem một vòng lặp rất giống được gọi là vòng lặp do-while Vòng lặp Do-WhileVòng lặp do-while rất giống với vòng lặp while Điểm khác biệt duy nhất là vòng lặp do-while luôn thực hiện ít nhất một lần Nếu bạn nghĩ về một vòng lặp while thông thường, nếu điều kiện là sai, thì ngay từ đầu, vòng lặp sẽ không thực hiện một lần nào Trong một số trường hợp, bạn muốn vòng lặp chạy ít nhất một lần bất kể điều gì Đây là lý do tại sao có một biến thể đặc biệt của vòng lặp while được gọi là vòng lặp do-while Hãy bắt đầu bằng cách xem cú pháp của vòng lặp do-while cú phápTrong JavaScript, vòng lặp do-while tuân theo cú pháp này for(initialization; condition; lastExpression) {
// code
}0Ở đâu
Tương tự như vòng lặp while, bạn phải cập nhật điều kiện tại một số điểm để ngăn vòng lặp vô tận Sự khác biệt đặc trưng giữa vòng lặp while và vòng lặp do-while là thứ tự mã. Trong vòng lặp while, điều kiện có trước, câu lệnh theo sau Trong vòng lặp do-while, các câu lệnh nằm trong một khối do đứng trước điều kiện Thí dụCho trước một độ tuổi, hãy in ra độ tuổi và cộng thêm một năm cho đến khi độ tuổi đó là 20+. Hơn nữa, dù ở thời đại nào, hãy in nó ít nhất một lần Ví dụ for(initialization; condition; lastExpression) {
// code
}1đầu ra for(initialization; condition; lastExpression) {
// code
}2Ở đây tuổi là 50, để bắt đầu với. Vì vậy, điều kiện là sai ngay khi chúng ta bắt đầu lặp Nhưng vì bạn đang sử dụng vòng lặp do-while nên tuổi được in ra ít nhất một lần Một ví dụ khác, hãy bắt đầu với độ tuổi thấp hơn for(initialization; condition; lastExpression) {
// code
}3đầu ra for(initialization; condition; lastExpression) {
// code
}4Bây giờ mã in tuổi 15, 16, 17, 18, 19 và dừng khi tuổi là 20 và điều kiện là sai Bây giờ bạn đã biết các loại vòng lặp cơ bản trong JavaScript Các vòng lặp này cũng thường được tìm thấy trong các ngôn ngữ lập trình khác Tiếp theo, chúng ta hãy xem hai biến thể của vòng lặp for
For-Of LoopsVòng lặp for-of cho phép bạn lặp qua một lần lặp theo cách dễ đọc hơn Một iterable có nghĩa là một tập hợp các giá trị có thể được lặp qua Một mảng là một ví dụ về một đối tượng có thể lặp lại. Một chuỗi cũng là một đối tượng có thể lặp lại Hãy xem cú pháp của vòng lặp for-of cú phápfor(initialization; condition; lastExpression) {
// code
}5Ở đâu
Để hiểu điều này, bạn cần xem một ví dụ Thí dụCho một mảng các chuỗi, hãy sử dụng vòng lặp for-of để in ra từng chuỗi for(initialization; condition; lastExpression) {
// code
}6đầu ra Alice Bob Charlie Trước mỗi lần lặp, vòng lặp gán phần tử tiếp theo cho một biến có tên. Sau đó, bạn có thể sử dụng biến tên bên trong vòng lặp để làm bất cứ điều gì bạn muốn Cho đến giờ chúng ta chủ yếu xử lý mảng và vòng lặp for Nhưng như bạn đã biết, mảng không phải là kiểu duy nhất có thể lặp lại trong JavaScript. Chuỗi là một ví dụ khác về kiểu dữ liệu lặp thường được sử dụng Nói cách khác, bạn cũng có thể sử dụng vòng lặp for để lặp qua các chuỗi Hãy xem cách sử dụng vòng lặp for-of khi lặp qua các ký tự của một chuỗi Ví dụ for(initialization; condition; lastExpression) {
// code
}8đầu ra for(initialization; condition; lastExpression) {
// code
}9Như bạn có thể thấy, ý tưởng giống hệt như khi lặp qua một mảng Như bạn có thể thấy, vòng lặp for-of rất tiện dụng vì bạn không cần phải lo lắng về các chỉ mục hoặc điều kiện Vòng lặp For-InMột biến thể vòng lặp for khác là vòng lặp for-in, mà bạn có thể sử dụng để lặp qua các thuộc tính đối tượng Điều này rất giống với vòng lặp for-of ở chương trước Sự khác biệt giữa vòng lặp for-in và vòng lặp for-of là
Trước khi đi vào các ví dụ, hãy xem cú pháp của vòng lặp for-in cú phápfor (let i = 1; i <= 10; i += 1) {
console.log(i)
}0Ở đâu
Thí dụĐưa ra một đối tượng dữ liệu, hãy lặp qua các khóa của nó và in các cặp khóa-giá trị ra bảng điều khiển for (let i = 1; i <= 10; i += 1) {
console.log(i)
}1đầu ra for (let i = 1; i <= 10; i += 1) {
console.log(i)
}2Ở đây, vòng lặp for-in lấy một khóa tại một thời điểm và gán nó cho một biến có tên là khóa. Trong vòng lặp, sau đó bạn sử dụng khóa này để truy cập giá trị cho khóa đó trong đối tượng dữ liệu Bạn không nên sử dụng vòng lặp for-in để lặp qua một mảng. Điều này là do vòng lặp for-in trả về các khóa được liên kết của từng phần tử thay vì các giá trị Ví dụ for (let i = 1; i <= 10; i += 1) {
console.log(i)
}3đầu ra for (let i = 1; i <= 10; i += 1) {
console.log(i)
}4Như bạn có thể thấy, vòng lặp for-in không trả về giá trị chuỗi. Thay vào đó, nó trả về các chỉ mục (đó là vô số khóa liên quan đến từng chuỗi trong mảng) Trừ khi đây là điều bạn muốn, không sử dụng vòng lặp for-in với mảng Cho đến giờ, bạn đã học cách sử dụng tất cả các loại vòng lặp trong JavaScript Bởi vì vòng lặp với mảng rất phổ biến nên chúng ta sẽ dành cả một chương cho Mảng. phương thức forEach(). Đây là một phương pháp đặc biệt được thiết kế để rút ngắn vòng lặp của mảng Mảng. Phương thức forEach()Mảng JavaScript có phương thức forEach() tích hợp Bạn có thể sử dụng phương thức này để lặp qua các phần tử của một mảng mà không cần phải viết vòng lặp for hoặc vòng lặp while Điều này có thể làm cho mã của bạn ngắn gọn và dễ đọc hơn Trong trường hợp bạn quan tâm, vui lòng đọc hướng dẫn đầy đủ về cách sử dụng Array. phương thức forEach() trong JavaScript tại đây Dù sao, đây là phần giới thiệu nhanh về Array. phương thức forEach() cú phápĐây là cú pháp cơ bản của phương thức forEach() trong JavaScript for (let i = 1; i <= 10; i += 1) {
console.log(i)
}5Ở đâu
Thí dụVới một mảng tên, hãy in ra từng tên vào bảng điều khiển bằng phương thức forEach() Đây là giao diện của nó trong mã for (let i = 1; i <= 10; i += 1) {
console.log(i)
}6đầu ra Alice Bob Charlie Đằng sau hậu trường, đoạn mã này tạo ra một vòng lặp. Sau đó, nó lặp qua từng phần tử của mảng và gọi tên từng phần tử Điều này rất tiện dụng và nó thường có thể làm cho mã của bạn ngắn hơn một chút nhưng nó vẫn duy trì khả năng đọc mã và chất lượng tổng thể Bây giờ bạn đã thấy rất nhiều cách để sử dụng các vòng lặp trong JavaScript, hãy kết hợp tất cả lại với nhau 5 cách để in các phần tử mảngDưới đây là 5 cách để in các số của một mảng. Mỗi cách tiếp cận tạo ra kết quả chính xác như nhau for (let i = 1; i <= 10; i += 1) {
console.log(i)
}8Mỗi cách tiếp cận in mảng số theo cách này for (let i = 1; i <= 10; i += 1) {
console.log(i)
}9Sự kết luậnHôm nay bạn đã học về vòng lặp for trong JavaScript Tóm lại, một vòng lặp for có thể được sử dụng để lặp lại mã khi một điều kiện là đúng Khi một điều kiện là sai, vòng lặp for dừng lại Vòng lặp nói chung rất hữu ích theo nhiều cách trong lập trình Chẳng hạn, bạn có thể có một mảng các giá trị và sử dụng một vòng lặp để truy cập một giá trị tại một thời điểm Trong JavaScript, 3 loại vòng lặp chính là
Trong hướng dẫn này, trọng tâm chính là vòng lặp for, nhưng bạn không nên quên các loại vòng lặp khác Mỗi vòng lặp này có thể được sử dụng để hoàn thành cùng một tác vụ với cú pháp khác nhau Ngoài ra, vòng lặp do-while cho phép bạn luôn chạy một đoạn mã ít nhất một lần bất kể điều kiện lặp là gì Vòng lặp for trong JavaScript là gì?Một vòng lặp for lặp lại cho đến khi một điều kiện cụ thể được đánh giá là sai . Vòng lặp JavaScript tương tự như vòng lặp Java và C for.
Vòng lặp for giải thích bằng ví dụ là gì?Vòng lặp "For" được dùng để lặp lại một khối mã cụ thể với số lần đã biết . Ví dụ muốn kiểm tra điểm từng học sinh trong lớp ta lặp từ 1 đến số đó. Khi không biết trước số lần, chúng ta sử dụng vòng lặp "While".
3 phần của JavaScript vòng lặp for là gì?Vòng lặp JavaScript for được sử dụng để thực thi mã nhiều lần. vòng lặp for bao gồm ba phần. khởi tạo, điều kiện và lặp lại .
Vòng lặp for nào là tốt nhất trong JavaScript?Vòng lặp nhanh nhất là vòng lặp for, cả khi có và không có độ dài bộ nhớ đệm đều mang lại hiệu suất thực sự giống nhau. . Vòng lặp while với số lần giảm khoảng 1. Chậm hơn 5 lần so với vòng lặp for Một vòng lặp sử dụng chức năng gọi lại (như forEach tiêu chuẩn), chậm hơn khoảng 10 lần so với vòng lặp for |
