Hãy thử khám phá vòng lặp hoặc trình lặp nào phù hợp với nhu cầu của bạn giúp ngăn chặn những sai lầm ngớ ngẩn làm ảnh hưởng đến hiệu suất của ứng dụng.
Trong phát triển web, JavaScript là một cảm giác mới. Không chỉ có các framework JS như NodeJS, React, Angular Vue, v.v., vani JS còn nền tảng người sử dụng rất lớn. Bây giờ, chúng ta hãy nói về JavaScript hiện đại. Hầu hết mọi ngôn ngữ lập trình đều sử dụng vòng lặp. Ngôn ngữ JS hiện đại cung cấp cho bạn rất nhiều tính linh hoạt khi sử dụng phép lặp các giá trị.
Vậy bạn có biết vòng lặp hoặc phép lặp nào phù hợp với nhu cầu của bạn nhất. Vòng lặp bao gồm nhiều tùy chọn có sẵn như for, for (đảo ngược), for… of, foreach, for… in, và for… await. Bài viết dưới đây sẽ cho bạn thấy.
Bài viết liên quan:
Vòng lặp for nào nhanh nhất?
Câu trả lời: for (reverse)
Tôi đã ngạc nhiên khi vòng lặp for (reverse) là vòng lặp nhanh nhất trong số tất cả các vòng lặp khi tôi thử nghiệm cục bộ. Đây là một ví dụ. Chạy một vòng lặp qua một mảng có hơn một triệu mục.
-
Xin lưu ý rằng kết quả console.time () phụ thuộc nhiều vào cấu hình hệ thống của bạn. Kiểm tra độ chính xác ở đây.
const million = 1000000;
const arr = Array(million);
console.time(‘⏳’);
for (let i = arr.length; i > 0; i — ) {} // for(reverse) :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for :- 1.6ms
arr.forEach(v => v) // foreach :- 2.1ms
for (const v of arr) {} // for…of :- 11.7ms
console.timeEnd(‘⏳’);
-
Vòng lặp for (reverse) và vòng lặp for (forward) mất một khoảng thời gian gần như nhau. for (reverse) chỉ tính toán một biến bắt đầu let i = arr.length một lần, do đó có nhanh hơn 0,1ms. Sau mỗi lần tăng, vòng lặp for (forward) sẽ kiểm tra điều kiện i <arr.length. Hãy bỏ qua điều này vì nó không có sự khác biệt.
-
Mặt khác, foreach là một phương thức trên array nguyên mẫu. So với các vòng lặp bình thường, foreach và for… of sẽ mất nhiều thời gian hơn để lặp qua mảng.
>>> Tham gia khóa học java full stack tại NIIT - ICT Hà Nội để được hướng dẫn với lộ trình bài bản hơn.
Có những loại vòng lặp nào, và khi nào bạn nên sử dụng chúng?
1. Vòng lặp for (forward and reverse) For loop (forward and reverse)
-
Mọi người có lẽ đã quen thuộc với vòng lặp này. Nếu bạn cần lặp lại một khối mã để sửa bộ đếm thời gian, bạn có thể sử dụng vòng lặp for.
-
Theo truyền thống, vòng lặp for là nhanh nhất, vì vậy mà có phải bạn nên sử dụng chúng không? Không cần thiết. Hiệu suất không phải là yếu tố duy nhất. Nói chung, khả năng đọc mã quan trọng hơn, vì vậy hãy chọn kiểu phù hợp với ứng dụng của bạn.
2. ForEach
-
Khi nhận một phần tử mảng, phương thức này thực hiện một hàm callback cho mỗi phần tử. Hơn nữa, hàm callback của foreach chấp nhận giá trị hiện tại và chỉ mục.
-
foreach cũng cho phép bạn sử dụng từ khóa này như một tham số tùy chọn trong hàm callback.
const things = [‘have’, ‘fun’, ‘coding’];
const callbackFun = (item, idex) => {
console.log(`${item} — ${index}`);
}
things.foreach(callbackFun);
o/p:- have — 0
fun — 1
coding — 2
Trong JavaScript, bạn không thể tận dụng hiện tượng đoản mạch nếu bạn sử dụng foreach. Hãy để tôi giới thiệu cho bạn về hiện tượng đoản mạch nếu bạn chưa biết. Khi chúng ta sử dụng một toán tử logic trong JavaScript, như AND (&&), OR (||), chúng ta có thể bỏ qua một phép lặp của một vòng lặp.
3. For…of For…of
For… of được tiêu chuẩn hóa trong ES6 (ECMAScript 6). Bằng cách sử dụng vòng lặp for..of, bạn có thể lặp qua một đối tượng có thể lặp lại như mảng, bản đồ, tập hợp, chuỗi, v.v. Ngoài ra, bạn có thể khiến cho mã code dễ đọc hơn.
const arr = [3, 5, 7];
const str = ‘hello’;
for (let i of arr) {
console.log(i); // logs 3, 5, 7
}
for (let i of str) {
console.log(i); // logs ‘h’, ‘e’, ‘l’, ‘l’, ‘o’
}
Lưu ý: For...of không bao giờ được sử dụng lại trên generator, ngay cả khi for...of kết thúc sớm. Generator bị tắt sau khi thoát khỏi vòng lặp và việc cố gắng lặp lại nó một lần nữa sẽ không tạo ra kết quả.
4. For…in For…in
-
For… in lặp qua một biến mà biến đó chỉ định tất cả các thuộc tính có thể liệt kê của một đối tượng nhất định. Câu lệnh for… in sẽ trả về tên của các thuộc tính do người dùng xác định cùng với các chỉ số cho mọi thuộc tính riêng biệt.
-
Vậy nên, tốt hơn hết là nên lặp lại các mảng bằng vòng lặp for bằng cách sử dụng chỉ số. Lý do là mệnh đề for… in lặp lại trên các thuộc tính do người dùng định nghĩa cũng như các phần tử của mảng, ngay cả khi bạn sửa đổi đối tượng mảng (bằng cách thêm các thuộc tính hoặc phương thức tùy chỉnh).
const details = {firstName:
‘john’, lastName:
‘Doe’};
let fullName = ‘’;
for (let i in details) {
fullName += details[i] + ‘ ‘; // fullName: john doe
}
For…in vs. for…of
For… of và for… in khác nhau chủ yếu ở các phần tử mà chúng lặp lại. Với vòng lặp for… in, bạn lặp qua các thuộc tính của đối tượng, trong khi với vòng lặp for… of, bạn lặp qua các giá trị của một đối tượng có thể lặp lại.
let arr= [4, 5, 6];
for (let i in arr) {
console.log(i); // ‘0’, ‘1’, ‘2’
}
for (let i of arr) {
console.log(i); // ‘4’, ‘5’, ‘6’
}
Kết luận
-
Vòng lặp for là nhanh nhất, nhưng không dễ đọc.
-
Foreach nhanh và phép lặp có thể được kiểm soát.
-
For...of mất thời gian, nhưng nó dễ dàng hơn.
-
For… in cũng mất thời gian và ít tiện lợi hơn.
Cuối cùng, một lời khuyên khôn ngoan dành cho bạn. Hãy ưu tiên tính dễ đọc. Duy trì khả năng đọc mã là điều cần thiết khi phát triển một cấu trúc phức tạp tại thời điểm đó, nhưng bạn cũng nên chú ý đến hiệu suất.
Tránh thêm các phần bổ sung không cần thiết vào mã của bạn vì nó có thể làm chậm ứng dụng.
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #icthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python