Hướng dẫn dùng for...in JavaScript
Các vòng lặp được sử dụng trong lập trình để tự động hóa các tác vụ 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à while và do...while, các câu lệnh bạn có thể xem lại trong bài "Cách xây dựng vòng lặp while và do...while trong JavaScript". Show Bởi vì trong khi các câu lệnh while và do..while dựa trên điều kiện, chúng thực thi khi và chỉ khi điều kiện đã cho trả về true . Câu lệnh for cũng dựa trên điều kiện nhưng nó có thêm tính năng bổ sung như bộ đếm vòng lặp cho phép bạn thiết lập số lần lặp trước. Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu về câu lệnh for , bao gồm cả câu lệnh for...of và for...in là các phần tử quan trọng trong ngôn ngữ lập trình Javascript.
Vòng lặp ForCâ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 thực thi lặp lại của một khối mã. Chúng ta hãy xem về dụ để hiểu rõ vấn đề này.
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à bước lặp. Dưới đây là ví dụ đơn giản minh họa cách hoạt động của câu lệnh for forExample.js
Khi chúng ta chạy đoạn code trên sẽ nhận được kết quả sau: 6 7 8 9 0Trong ví dụ trên, chúng ta đã khởi tạo vòng lặp for với let i = 0, bắt đầu vòng lặp tại 0. Chúng ta đặt điều kiện là i <4, có nghĩa là miễn dưới 4, vòng lặp sẽ tiếp tục chạy. Biểu thức cuối cùng của chúng ta về i ++ tăng biến i lên 1 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 lại đến 3. Nếu không sử dụng vòng lặp, chúng ta có thể đạt được kết quả tương tự khi sử dụng đoạn mã sau. noLoop.js
Vòng lặp không lặp tại chỗ, trong khối mã trên nếu chúng ta muốn tăng số lần lặp chúng ta phải thêm nhiều dòng hơn. Bây giờ chúng ta sẽ đi qua từng biểu thức trong vòng lặp để hiểu chúng đầy đủ hơn. Khởi tạoBiểu thức đầu tiên là khởi tạo. Bạn nhìn vào khởi tạo bên dưới như sau.
Chúng ta khai báo 1 biến i với từ khóa let (từ khóa var cũng có thể được sử dụng) và nhận giá trị là 0. Biến có thể được đặt tên bất kỳ đúng quy tắc. Biến i là viết tắt của iteration, nhất quán và giữ mã nhỏ gọn. Nên tôi thường sử dụng nó. Điều kiệncũng giống như vòng lặp while và do...while , vòng lặp for cũng thường chứa 1 điều kiện. Câu lệnh điều kiện của chúng ta dưới đây.
Chúng ta đã thiết lập biến lắp của chúng ta là i và gán cho nó giá trị 0 để bắt đầu. Bây giờ điều kiện là true khi biến i nhỏ hơn 4 trong ví dụ này. Bước Lặp (Final Expression)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 giá trị, nhưng nó có thể được sử dụng cho bất kỳ mục đích nào.
Trong ví dụ của chúng ta, chúng ta tăng biến lên 1 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. Đặt 3 biểu thức lại cùng nhauChúng ta đã xem xét ba biểu thức có trong vòng lặp for, chúng ta có thể xem lại toàn bộ vòng lặp như sau. // Khởi tạo câu lệnh for với 5 lần lặp Đầu tiên chúng ta khai báo biến i và đặt nó bằng 0 . Sau đó chúng ta đặt điều kiện cho vòng lặp chạy đến giá trị nhỏ hơn 4 thì dừng lại , cuối cùng là biểu thức tăng giá trị lên 1 sau mỗi lần lặp. khối lệnh của chúng ta sẽ in ra giá trị lên màn hình console, kết quả là 0 1 2 3 Tùy chọn cách viết biểu thứcCó tất cả 3 biểu thức trong vòng lặp for . Ví dụ sau, chúng ta có thể viết câu lệnh for không có biểu thức khởi tạo bởi vì chúng ta khởi tạo ngoài vòng lặp.
Output 7 8 9 0Trong trường hợp này dấu ; rất cần thiết cho biểu thức khởi tạo, điều kiện, bước lặp, kể cả khi không có gì trong biểu thức. Bên dưới, chúng ta cũng có thể xóa điều kiện khỏi vòng lặp. Chúng ta sẽ sử dụng câu lệnh if kết hợp với câu lệnh break để báo cho vòng lặp ngừng chạy khi i lớn hơn 3 , đó là điều kiện ngược lại với true
Output 0 1 2 3
Cảnh báo: Câu lệnh break phải bao gồm điều kiện dừng của câu lệnh if . Nếu không vòng lặp sẽ chạy vô hạn và có thể làm hỏng trình duyệt của bạn. Cuối cùng, Biểu thức cuối cùng có thể loại bỏ bằng cách thay thế bằng cách đặt ở cuối vòng lặp, nhưng vẫn phải giữ dấu ; nếu không nó sẽ không chạy nữa.
0Chúng ta có thể nhìn ví dụ bên dưới, Bao gồm cả 3 câu lệnh thường 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 1 mảngChúng ta có thể sử dụng vòng lặp for để sửa đổi 1 mảng. Trong ví dụ tiếp theo, chúng ta sẽ tạo ra 1 mảng rỗng và điền các phần tử vào trong mảng đó với vòng lặp modifyArray.js 1Thực thi code sẽ cho ra kết quả bên dưới 2Chúng ta thiết lập 1 vòng lặp chạy cho đến khi i<3, có nghĩa i==3 vòng lặp sẽ dừng lại, ta thấy cuối mỗi vòng lặp các giá trị mới sẽ được cập nhật. Chiều dài của 1 mảngĐôi khi, chúng tôi có thể muố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 lại sẽ là bao nhiêu. Thay vì khai báo một số tĩnh, như chúng ta đã làm trong các ví dụ trước, chúng ta có thể sử dụng thuộc tính length của một mảng để có vòng lặp chạy nhiều lần thông qua chỉ số mảng. loopThroughArray.js 3Chúng ta có kết quả sau. Output flounder salmon pike Trong ví dụ này, Chúng ta tăng từng chỉ số của mảng bằng fish[i] (ví dụ: vòng lặp sẽ tăng thông qua fish[0], fish[1],....fish[fish.length -1])), điều này sẽ linh động hơn trọng việc duyệt mảng. Thông tin chi tiết hơn về vòng lặp for có sẵn trên Mozilla Developer Network các bạn nên thảm khảo thêm. Vòng lặp For...inCâu lệnh for...in lặp lại các thuộc tính của đối tượng . Để chứng minh, chúng ta sẽ tạo một đối tượng sark đơn giản với một vài cặp tên shark.js 4Sử dụng vòng lặp for...in , chúng ta có thể dễ dàng truy cập tên các thuộc tính của đối tượng 5Output species color numberofTeeth Chúng ta cũng có thể truy nhập giá trị mỗi thuộc tính bằng cách sử dụng tên các thuộc tính làm giá trị chỉ mục của đối tượng 6
7Đặt chúng lại với nhau chúng ta có thể truy nhập tất cả tên và giá trị của đối tượng. 8 9Chúng ta sử dụng phương thưc toUpperCase() để sửa đổi tên thuộc tính thành viết hoa, và theo sau nó là giá trị của các thuộc tính. for...in là vòng lặp cực kỳ hữu ích để lặp qua các thuộc tính đối tượng Xem lại for...in trêb Mozilla Developer Network để biết thêm thông tin. Vòng lặp For...OfCâu lệnh for ... in là hữu ích cho việc lặp qua các thuộc tính đố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, chúng ta có thể sử dụng câu lệnh for...of , câu lệnh for...of là tính năng mới của ECMAScript 6. ECMAScript (hoặc ES) là một đặc tả ngôn ngữ kịch bản được tạo để chuẩn hóa JavaScript. Trong ví dụ này cho 1 vòng lặp for...of, chúng ta sẽ tạo 1 mảng và in từng phần tử ra màn hình console. sharks.js 0Chúng ta sẽ nhận kết quả đầu ra sau. 1Ta cũng có thể in ra chỉ mục được liên kết với các phần tử chỉ mục bằng cách sử dụng phương thức entries (). sharks.js 2
31 chuỗi có thể được lặp giống như mảng sharkString.js 4 5Trong trường hợp này, chúng ta lặp qua từng ký tự trong chuỗi, in chúng theo thứ tự tuần tự. Tìm hiểu thêm sự khác nhau giữa vòng lặp for...of và for...in trên Mozilla Developer Network. Phần kết luận
Vòng lặp là một phần không thể thiếu trong lập trình bằng JavaScript và được sử dụng để tự động hóa các tác vụ lặp lại và làm cho mã ngắn gọn và hiệu quả hơn. |