Vòng lặp Đối với, Đối với ... Trong vòng lặp và Đối với ... Trong Vòng lặp trong JavaScript
Vòng lặp được sử dụng trong lập trình để tự động hóa các việc lặp đi lặp lại. Các loại vòng lặp cơ bản nhất được sử dụng trong JavaScript là câu lệnhwhile và do...while , bạn có thể xem lại trong “ Cách tạo vòng lặp While và Do… While trong JavaScript ”. Bởi vì các câu lệnh while và do...while dựa trên điều kiện , chúng thực thi khi một câu lệnh đã cho trả về giá trị là true . Tương tự ở chỗ chúng cũng dựa trên điều kiện, câu lệnh for cũng bao gồm các tính năng bổ sung như bộ đếm vòng lặp , cho phép bạn đặt trước số lần lặp của vòng lặp.
Trong hướng dẫn này, ta sẽ tìm hiểu về câu lệnh for , bao gồm câu lệnh for...of và for...in , là những yếu tố thiết yếu của ngôn ngữ lập trình JavaScript.
Đối với vòng lặp
Câu lệnh for là một loại vòng lặp sẽ sử dụng tối đa ba biểu thức tùy chọn để triển khai việc thực thi lặp lại một khối mã.
Hãy xem một ví dụ về điều đó nghĩa là gì.
for (initialization; condition; final expression) { // code to be executed } Trong cú pháp trên, có ba biểu thức bên trong câu lệnh for : khởi tạo , điều kiện và biểu thức cuối cùng , còn gọi là tăng dần.
Hãy sử dụng một ví dụ cơ bản để chứng minh những gì mỗi câu lệnh này thực hiện.
// Initialize a for statement with 5 iterations for (let i = 0; i < 4; i++) { // Print each iteration to the console console.log(i); } Khi ta chạy mã ở trên, ta sẽ nhận được kết quả sau:
Output0 1 2 3 Trong ví dụ trên, ta đã khởi tạo vòng lặp for với let i = 0 , vòng lặp bắt đầu từ 0 . Ta đặt điều kiện là i < 4 , nghĩa là miễn là i đánh giá thấp hơn 4 , vòng lặp sẽ tiếp tục chạy. Biểu thức cuối cùng của ta về i++ tăng số lượng cho mỗi lần lặp qua vòng lặp. console.log(i) in ra các số, bắt đầu bằng 0 và dừng ngay khi i được đánh giá là 4 .
Nếu không sử dụng vòng lặp, ta có thể đạt được kết quả tương tự bằng cách sử dụng đoạn mã sau.
// Set initial variable to 0 let i = 0; // Manually increment variable by 1 four times console.log(i++); console.log(i++); console.log(i++); console.log(i++); Nếu không có vòng lặp tại chỗ, khối mã sẽ lặp đi lặp lại và bao gồm nhiều dòng hơn. Nếu ta cần tăng dần qua nhiều số hơn, ta cần viết nhiều dòng mã hơn nữa.
Hãy xem qua từng biểu thức trong vòng lặp để hiểu chúng đầy đủ.
Khởi tạo
Biểu thức đầu tiên của ta là khởi tạo . Đây là những gì nó trông giống như.
let i = 0; Ta đang khai báo một biến có tên là i với từ khóa let (từ khóa var cũng được dùng ) và cho nó giá trị 0 . Mặc dù biến có thể được đặt tên bất cứ thứ gì, nhưng i thường được sử dụng nhất. Biến i là viết tắt của i teration, nhất quán và giữ cho mã gọn gàng.
Tình trạng
Giống như ta đã thấy trong vòng lặp while và do...while , vòng lặp for thường chứa một điều kiện . Đây là tuyên bố điều kiện của ta .
i < 4; Ta đã cài đặt rằng biến lặp của ta , i , đại diện cho 0 để bắt đầu. Bây giờ ta đang nói rằng điều kiện là true với điều kiện i nhỏ hơn 4 trong ví dụ này.
Biểu thức cuối cùng
Biểu thức cuối cùng là một câu lệnh được thực hiện ở cuối mỗi vòng lặp. Nó thường được sử dụng để tăng hoặc giảm một giá trị, nhưng nó được dùng cho bất kỳ mục đích nào.
i++ Trong ví dụ của ta , ta đang tăng từng biến một, với i++ . Điều này cũng giống như chạy i = i + 1 .
Không giống như các biểu thức khởi tạo và điều kiện, biểu thức cuối cùng không kết thúc bằng dấu chấm phẩy.
Kết hợp nó với nhau
Bây giờ ta đã xem xét ba biểu thức có trong vòng lặp for , ta có thể xem lại toàn bộ vòng lặp.
// Initialize a for statement with 5 iterations for (let i = 0; i < 4; i++) { console.log(i); } Đầu tiên, ta khai báo i và đặt nó thành 0 . Sau đó, ta đang cài đặt một điều kiện để vòng lặp chạy cho đến khi i nhỏ hơn 4 . Cuối cùng, ta đang tăng i lên 1 mỗi lần lặp. Khối mã của ta in giá trị của i vào console , vì vậy kết quả của ta là 0 , 1 , 2 và 3 dưới dạng kết quả .
Biểu thức tùy chọn
Cả ba biểu thức trong vòng lặp for đều là tùy chọn. Ví dụ, ta có thể viết tương tự câu lệnh for mà không cần biểu thức khởi tạo bằng cách khởi tạo biến bên ngoài vòng lặp.
// Declare variable outside the loop let i = 0; // Initialize the loop for (; i < 4; i++) { console.log(i); } Output0 1 2 3 Trong trường hợp này, đầu tiên ; là cần thiết để biểu thị liệu câu lệnh có tham chiếu đến khởi tạo, điều kiện hoặc biểu thức cuối cùng hay không, ngay cả khi nó bị bỏ qua.
Dưới đây, ta cũng có thể xóa điều kiện khỏi vòng lặp. Ta sẽ sử dụng một if tuyên bố kết hợp với break để nói với vòng lặp để dừng chạy khi i lớn hơn 3 , đó là mặt trái của true điều kiện.
// Declare variable outside the loop let i = 0; // Omit initialization and condition for (; ; i++) { if (i > 3) { break; } console.log(i); } Output0 1 2 3 Cảnh báo : Câu lệnh break phải được bao gồm nếu điều kiện bị bỏ qua, nếu không vòng lặp sẽ chạy mãi mãi như một vòng lặp vô hạn và có khả năng làm sập trình duyệt.
Cuối cùng, biểu thức cuối cùng có thể được loại bỏ bằng cách đặt nó ở cuối vòng lặp. Cả hai dấu chấm phẩy vẫn phải được bao gồm, nếu không vòng lặp sẽ không hoạt động.
// Declare variable outside the loop let i = 0; // Omit all statements for (; ;) { if (i > 3) { break; } console.log(i); i++; } Output0 1 2 3 Như ta có thể thấy từ các ví dụ trên, bao gồm cả ba câu lệnh thường tạo ra mã ngắn gọn và dễ đọc nhất. Tuy nhiên, thật hữu ích khi biết rằng các câu lệnh có thể được bỏ qua trong trường hợp bạn gặp phải nó trong tương lai.
Sửa đổi một mảng
Ta có thể sử dụng vòng lặp for để sửa đổi một mảng .
Trong ví dụ tiếp theo, ta sẽ tạo một mảng trống và điền nó bằng biến đếm vòng lặp.
// Initialize empty array let arrayExample = []; // Initialize loop to run 3 times for (let i = 0; i < 3; i++) { // Update array with variable value arrayExample.push(i); console.log(arrayExample); } Chạy mã JavaScript ở trên sẽ dẫn đến kết quả sau.
Output[ 0 ] [ 0, 1 ] [ 0, 1, 2 ] Ta cài đặt một vòng lặp chạy cho đến khi i < 3 không còn true nữa và ta đang yêu cầu console in mảng arrayExample vào console ở cuối mỗi lần lặp. Với phương thức này, ta có thể thấy cách mảng cập nhật các giá trị mới.
Chiều dài của một mảng
Đôi khi, ta có thể cần một vòng lặp chạy một số lần mà không chắc chắn về số lần lặp sẽ là bao nhiêu. Thay vì khai báo một số tĩnh, như ta đã làm trong các ví dụ trước, ta có thể sử dụng thuộc tính length của một mảng để vòng lặp chạy nhiều lần như có các mục trong mảng.
// Declare array with 3 items let fish = [ "flounder", "salmon", "pike" ]; // Initalize for loop to run for the total length of an array for (let i = 0; i < fish.length; i++) { // Print each item to the console console.log(fish[i]); } Ta sẽ nhận được kết quả sau.
Outputflounder salmon pike Trong ví dụ này, ta tăng dần qua từng index của mảng với fish[i] (ví dụ: vòng lặp sẽ tăng dần qua fish[0] , fish[1] , v.v.). Điều này làm cho index tự động cập nhật với mỗi lần lặp.
Thông tin chi tiết về câu lệnh for có sẵn trên Mạng nhà phát triển Mozilla .
Đối với… Trong vòng lặp
Câu lệnh for...in lặp qua các thuộc tính của một đối tượng. Để chứng minh, ta sẽ tạo một đối tượng shark đơn giản với một vài cặp tên: giá trị .
const shark = { species: "great white", color: "white", numberOfTeeth: Infinity } Sử dụng vòng lặp for...in , ta có thể dễ dàng truy cập từng tên thuộc tính.
// Print property names of object for (attribute in shark) { console.log(attribute); } Outputspecies color numberOfTeeth Ta cũng có thể truy cập các giá trị của từng thuộc tính bằng cách sử dụng tên thuộc tính làm giá trị index của đối tượng.
// Print property values of object for (attribute in shark) { console.log(shark[attribute]); } Outputgreat white white Infinity Đặt chúng lại với nhau, ta có thể truy cập tất cả các tên và giá trị của một đối tượng.
// Print names and values of object properties for (attribute in shark) { console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`); } OutputSPECIES: great white COLOR: white NUMBEROFTEETH: Infinity Ta đã sử dụng phương thức toUpperCase() để sửa đổi tên thuộc tính và theo sau đó là giá trị thuộc tính. for...in là một cách cực kỳ hữu ích để lặp qua các thuộc tính đối tượng.
Đánh giá for...in Mạng nhà phát triển Mozilla để biết thêm thông tin chi tiết.
Đối với… Vòng lặp
Câu lệnh for...in hữu ích để lặp qua các thuộc tính của đối tượng, nhưng để lặp qua các đối tượng có thể lặp lại như mảng và chuỗi , ta có thể sử dụng câu lệnh for...of . Câu lệnh for...of là một tính năng mới hơn của ECMAScript 6 . ECMAScript (hoặc ES) là một đặc tả ngôn ngữ kịch bản được tạo ra để chuẩn hóa JavaScript.
Trong ví dụ về vòng lặp for...of , ta sẽ tạo một mảng và in từng mục trong mảng ra console .
// Initialize array of shark species let sharks = [ "great white", "tiger", "hammerhead" ]; // Print out each type of shark for (let shark of sharks) { console.log(shark); } Ta sẽ nhận được thông tin sau dưới dạng kết quả từ câu lệnh for...of .
Outputgreat white tiger hammerhead Cũng có thể in ra index được liên kết với các phần tử index bằng cách sử dụng phương thức entries() .
... // Loop through both index and element for (let [index, shark] of sharks.entries()) { console.log(index, shark); } Output0 'great white' 1 'tiger' 2 'hammerhead' Một chuỗi có thể được lặp lại theo cách tương tự như một mảng.
// Assign string to a variable let sharkString = "sharks"; // Iterate through each index in the string for (let shark of sharkString) { console.log(shark); } Outputs h a r k s Trong trường hợp này, ta lặp lại từng ký tự trong chuỗi, in chúng theo thứ tự tuần tự.
Để có account chi tiết hơn về sự khác biệt giữa vòng lặp for...in và for...of , hãy đọc về vòng lặp for...of trên Mạng nhà phát triển Mozilla .
Kết luận
Trong hướng dẫn này, ta đã học cách tạo các vòng lặp for trong JavaScript, bao gồm các câu lệnh for , for...of và for...in .
Vòng lặp là một phần không thể thiếu của lập trình trong JavaScript và được sử dụng để tự động hóa các việc lặp đi lặp lại và làm cho mã ngắn gọn và hiệu quả hơn.
Các tin liên quan
Vòng lặp Đối với, Đối với ... Trong vòng lặp và Đối với ... Trong Vòng lặp trong JavaScript2017-10-02
Xử lý các đối tượng trong JavaScript với Object.assign, Object.keys và hasOwnProperty
2017-09-29
Sử dụng Vòng lặp While và Vòng lặp Do ... Trong khi trong JavaScript
2017-09-27
Sử dụng Vòng lặp While và Vòng lặp Do ... Trong khi trong JavaScript
2017-09-27
Cách sử dụng câu lệnh Switch trong JavaScript
2017-09-11
Cách viết các câu lệnh có điều kiện trong JavaScript
2017-08-29
Hiểu các đối tượng trong JavaScript
2017-08-24
Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại
2017-08-15
Cách chuyển đổi kiểu dữ liệu trong JavaScript
2017-08-15
Cách sử dụng các phương thức mảng trong JavaScript: Phương thức Accessor
2017-08-14
