Loại vòng lặp nào nhanh nhất trong JavaScript?

Ngày đăng: 07/05/2022   -    Cập nhật: 07/05/2022

 

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

 

Bình luận Facebook
Mục lục
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!