Hiệu suất vòng lặp for...of vs for

Tìm hiểu vòng lặp for hoặc iterator nào phù hợp với yêu cầu của bạn và ngăn bạn mắc phải những lỗi ngớ ngẩn làm giảm hiệu suất ứng dụng của bạn

JavaScript là một cảm giác mới về phát triển web. Không chỉ các framework JS như NodeJS, React, Angular Vue, v.v. Nhưng, vanilla JS cũng có một lượng lớn người hâm mộ. Hãy nói về JavaScript hiện đại. Vòng lặp luôn là một phần quan trọng của hầu hết các ngôn ngữ lập trình. JS hiện đại cung cấp cho bạn rất nhiều cách để lặp lại hoặc lặp lại các giá trị của bạn

Nhưng câu hỏi đặt ra là bạn có thực sự biết vòng lặp hoặc vòng lặp nào phù hợp nhất theo yêu cầu của bạn không. Có rất nhiều tùy chọn có sẵn trong vòng lặp for, for , for(reverse), for...of , foreach , for...in ,

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

Vòng lặp nào nhanh hơn?

Câu trả lời.

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

Điều đáng ngạc nhiên nhất là khi tôi thử nghiệm nó trên một máy cục bộ, tôi bắt đầu tin rằng

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

từ chối trách nhiệm. bảng điều khiển. time() độ chính xác của kết quả phụ thuộc nhiều vào cấu hình hệ thống của bạn. Xem xét kỹ hơn về độ chính xác tại đây

const million = 1000000; 
const arr = Array(million);console.time('⏳');

for (let i = arr.length; i > 0; i--) {} // for(reverse) :- 1.5msfor (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms

arr.forEach(v => v)                     // foreach      :- 2.1msfor (const v of arr) {}                 // for...of     :- 11.7ms

console.timeEnd('⏳');

Lý do. Ở đây, vòng lặp tiến và lùi mất gần như cùng thời gian. chỉ là 0. Có sự khác biệt 1ms vì for(reverse) chỉ tính toán một biến bắt đầu

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

Mặt khác, một nửa foreach là một phương thức của nguyên mẫu mảng. So với vòng lặp for bình thường, foreach và for...of dành nhiều thời gian hơn cho phép lặp trong mảng

Các loại vòng lặp và bạn nên sử dụng chúng ở đâu

1. Đối với vòng lặp (tiến và lùi)

Có lẽ mọi người đã quen thuộc với vòng lặp này. Bạn có thể sử dụng vòng lặp for, nơi bạn cần, chạy một khối mã lặp đi lặp lại để khắc phục thời gian truy cập. Vòng lặp for truyền thống là nhanh nhất, vì vậy bạn nên luôn sử dụng nó phải không? . Khả năng đọc mã thường quan trọng hơn, vì vậy hãy mặc định kiểu phù hợp với ứng dụng của bạn

2. cho mỗi

Phương thức này chấp nhận hàm gọi lại làm tham số đầu vào và đối với mọi phần tử từ một mảng, hàm gọi lại này sẽ thực thi. Ngoài ra, foreach hàm gọi lại chấp nhận giá trị hiện tại và chỉ mục tương ứng. Ngoài ra, foreach, cho phép sử dụng

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'
}

const things = ['have', 'fun', 'coding'];const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}things.foreach(callbackFun); o/p:- have - 0
      fun - 1
      coding - 2

Ghi chú. - Nếu bạn sử dụng foreach, bạn không thể tận dụng tính năng đoản mạch trong JavaScript. Nếu bạn không biết về đoản mạch, hãy để tôi giới thiệu cho bạn. Khi chúng tôi sử dụng một toán tử logic như

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'
}

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'
}

3. Cho…của

for...of được chuẩn hóa trong ES6(ECMAScript 6). for...of tạo một vòng lặp lặp lại trên một đối tượng có thể lặp lại như một mảng, bản đồ, tập hợp, chuỗi, v.v. Một điểm cộng khác của vòng lặp này là khả năng đọc tốt 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'
}

Ghi chú. - Không tái sử dụng for...of trên máy phát điện, ngay cả khi for...of bị chấm dứt sớm. Sau khi thoát khỏi vòng lặp, trình tạo bị tắt và cố gắng lặp lại lần nữa không mang lại kết quả nào nữa

4. Tại

for...in lặp lại một biến được chỉ định trên tất cả các thuộc tính có thể đếm được của một đối tượng. Đối với mỗi thuộc tính riêng biệt, câu lệnh for...in sẽ trả về tên của thuộc tính do người dùng xác định bên cạnh các chỉ mục số

Do đó, tốt hơn là sử dụng vòng lặp for truyền thống với chỉ mục số khi lặp qua mảng. Bởi vì câu lệnh for...in lặp lại các thuộc tính do người dùng xác định ngoài các phần tử mảng, ngay cả khi bạn sửa đổi đối tượng mảng (chẳng hạn như 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
}

Sự khác biệt giữa

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

Sự khác biệt chính giữa

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

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'
}

Phần kết luận

• for nhanh nhất, nhưng kém về khả năng đọc
• foreach nhanh, kiểm soát thuộc tính lặp
• for...of chậm, nhưng ngọt ngào hơn
• for...in chậm, ít tiện dụng

Cuối cùng, một lời khuyên khôn ngoan dành cho bạn. Đặt mức độ ưu tiên của bạn thành khả năng đọc. Khi bạn đang phát triển một cấu trúc phức tạp vào thời điểm đó, khả năng đọc mã là điều cần thiết nhưng bạn cũng nên tập trung vào hiệu suất. Cố gắng tránh thêm trang trí thêm không cần thiết vào mã của bạn, đôi khi điều đó gây tốn kém cho hiệu suất ứng dụng của bạn. Chúc các bạn code vui vẻ

Vòng lặp for có nhanh hơn vòng lặp for không?

Sử dụng vòng lặp for có tốt hơn không?

Là for each chậm hơn for loop?

Vòng lặp for hay forEach hiệu quả hơn?