Javascript cho... hiệu suất của vòng lặp

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

Nội dung chính Show

1. Đối với vòng lặp (tiến và lùi)
2. cho mỗi
3. Cho…của
Sự kết luận

Ảnh của Artem Sapegin trên Bapt

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,

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

6 ,

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

7 ,

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

8 ,

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

9 ,

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

0 ,

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

0. Bài viết này sẽ đề cập đến một cuộc tranh luận như vậy

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

1 là vòng lặp nhanh nhất trong số tất cả các vòng lặp for. Hãy để tôi chia sẻ một ví dụ. Lấy một

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

3 với hơn 1 triệu mục và thực hiện một vòng lặp

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ì

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

7 chỉ tính toán 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

5 một lần. Trong khi ở vòng lặp

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

6 chuyển tiếp, nó sẽ kiểm tra điều kiện

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

7 sau mỗi lần tăng giá trị của một biến. Sự khác biệt nhỏ nhất này sẽ không thành vấn đề, bạn có thể bỏ qua nó

Mặt khác, một nửa

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

9 là một phương thức của nguyên mẫu mảng. So với vòng lặp

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

6 thông thườ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

9 và

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

8 dành nhiều thời gian hơn cho việc lặp lại 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

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

6, 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

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

6 truyền thống là nhanh nhất, vì vậy bạn nên luôn sử dụng vòng lặp đó 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,

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

9 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,

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

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

6 cho các tham số tùy chọn trong chức năng gọi 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

Ghi chú. - Nếu bạn sử dụ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

9, 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 ta sử dụng một toán tử logic như ________ 78, ________ 79 trong JavaScript, nó sẽ giúp chúng ta kết thúc sớm và/hoặc bỏ qua một lần lặp lại vòng lặp

3. Cho…của

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

8 được chuẩn hóa trong ES6(ECMAScript 6).

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

8 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 sử dụng 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

8 trên máy phát điện, ngay cả khi

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

8 kết thúc 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

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

0 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

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

0 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

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

6 truyền thống với chỉ mục số khi lặp qua mảng. Bởi vì câu lệnh

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

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

Sự khác biệt giữa

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

28 và

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

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

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

28 và

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

0 là những gì chúng lặp lại. Các vòng lặp

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

0 lặp lại các thuộc tính của một đối tượng trong khi các vòng lặp

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

8 lặp lại các giá trị của một đối tượng có thể lặp 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

Ảnh của Tine Ivanič trên Bapt

Sự kết luận

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

6 nhanh nhất, nhưng kém về khả năng đọc

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

9 nhanh, kiểm soát thuộc tính lặp

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

8 chậm rãi nhưng ngọt ngào hơn

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

0 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ẻ