Các vòng lặp trong javascript
Vòng lặp là một thành phân vô cùng quan trọng của các ngôn ngữ lập trình và thường sẽ là một trong những thứ được lập trình viên tiếp cận đầu tiên. Hẳn lập trình viên nào cũng quen với các loop phổ biến như for, while . Javascript thì cũng tương tự như vậy, tuy nhiên nó còn thêm một đống thứ kéo theo và đôi lúc không biết nó giúp ích cho dev hay lại chính là nguyên nhân tạo thêm bug. Trong bài viết mở đầu cho series Loop, mình sẽ giới thiệu về các loại vòng lặp trong Javascript For loopĐầu tiên hẳn sẽ là loop phổ biến nhất và có phần lớn trong các ngôn ngữ lập trình : for Với vòng lặp for ta sẽ khởi tạo biến đếm, kiểm tra điều kiện và tăng hoặc giảm biến được thực hiện trên cùng một dòng, do đó khá dễ dàng cho những người mới tiếp cận để debug và cũng giảm khả năng sinh ra lỗi Cú pháp
Ví dụ
Kết quả
While loopBên cạnh for thì while cũng là một trong những vòng lặp tương đối basic. Câu lệnh while tạo ra một vòng lặp thực thi một khối lệnh (block of code) cho đến khi điều kiện vẫn đúng. Cú pháp
Ví dụ
Kết quả
Do ... While**do-while** về cơ bản khá giống với **while**, chúng chỉ khác nhau duy nhất. Đối với **Do While** dù điều kiện lặp như thế nào thì đoạn code vẫn được chạy ít nhất 1 lần còn nếu điều kiện thỏa mãn thì sẽ tương tự như **While** : tạo ra thêm vòng lặp Cú pháp
Ví dụ
Kết quả
forEach()Hàm này thì có vẻ đã không quá còn basic như những hàm phía trên nữa. forEach sẽ lặp lại từng phần tử trong mảng theo thứ tự index và thực thi function được truyền vào. Lưu ý rằng forEach sẽ không thực thi function đầu vào cho các phần tử không có giá trị Cú pháp
Hàm được truyền vào forEach sẽ nhận tối đa 3 đối số đầu vào:
Ví dụ
Kết quả
Lưu ý rằng bạn không nhất thiết phải truyền toàn bộ 3 đối số vào, chỉ truyền vào những đối số cần thiết. Nhìn qua thì thấy forEach khá là đem lại nhiều điều đơn giản cho lập trình viên, không cần quan tâm đến khởi tạo biến đếm, điều kiện dừng .... Tuy nhiên trong đó cũng tiềm tàng khá nhiều điều hay ho mà mình sẽ trình bày trong phần tiếp theo của series MapTiếp tục là một hàm sẽ giúp bạn loop các phần tử của một Array. Tuy nhiên **map** sẽ tạo ra một mảng mới chứ không phải thực thi với mảng gọi đến nó như **forEach**. Cú pháp
Tương tự như forEach, map cũng lấy 3 tham số đầu vào
Ví dụ
Kết quả
Có thể thấy thì hàm này thường để dùng khi muốn thay đối giá trị toàn bộ mảng tạo ra một thực thể mới chứ không đơn thuần dùng để truy xuất. For...inVòng lặp này có đôi chút khác biệt với các hàm phía trên, For ... in mục đích chủ yếu được dùng để loop trong một object chứ không phải array . Số lượng vòng lặp sẽ tương ứng với số lượng thuộc tính của object Mỗi array cũng là một object đặc biệt, do đó ta vẫn có thể sử đụng for...in cho array, tuy nhiên key sẽ tương ứng với giá trị index của từng phần tử Cú pháp
Ví dụ
Kết quả
for...in không được khuyến khích sử dụng với những mảng mà thứ tự index của nó quan trọng. Thêm một ví dụ:
Với ví dụ trên được loop bởi forEach thì kết quả sẽ theo thứ tự là 0, 1, 2, 3 còn với for...in thì sẽ không đảm bảo như vậy. Thêm một điều nữa, với for...in, nó sẽ duyệt qua cả những thuộc tính kế thừa của object . Do đó nếu muốn chỉ duyệt qua thuộc tính riêng của object thì cú pháp cần thay đổi một chút
for...ofVòng lắp được ra mắt trong phiên bản ES6. Hàm này có thể sử dụng để duyệt phần lớn các đối tượng từ Array, String, Map, WeakMap, Set ,... Cú pháp
Ví dụ
Kết quả
Một ví dụ khác
Bài viết được tham khảo trực tiếp và có chính sửa tại bài viết All type of loops in JavaScript, a brief explanation |