Bản đồ có nhanh hơn vòng lặp JavaScript không

Phần kết luận

Theo các trường hợp thử nghiệm, không có gì sai khi sử dụng các hàm bậc cao khi chúng ta KHÔNG cần xâu chuỗi chúng. Hiệu suất tốt hơn rất nhiều (1. nhanh hơn 63 lần) khi chúng tôi sử dụng chức năng bản đồ tích hợp hoặc tốt hơn/tệ hơn một chút khi chúng tôi sử dụng bộ lọc/giảm tích hợp

Nếu chúng ta muốn xâu chuỗi các hàm bậc cao, chúng ta nên cân nhắc việc không sử dụng chúng và triển khai chúng như một giải pháp vòng lặp for-in. Hiệu suất là cách tốt hơn, 2. Nhanh hơn 37 lần (trong các ví dụ của bài viết này) so với các chức năng tích hợp sẵn

Không cần phải luôn sử dụng các yếu tố, cấu trúc hoặc chức năng hiện đại của ngôn ngữ hiện đại chỉ vì cú pháp có vẻ đẹp hơn hoặc mọi người đều sử dụng nó. Sự phức tạp về thời gian và không gian quan trọng hơn nhiều so với cú pháp hiện đại và cuối cùng, cú pháp ưa thích không giúp chúng ta trở thành những nhà phát triển giỏi hơn, mặc dù chúng ta có thể nghĩ rằng nó có.

Một số chức năng được yêu thích nhất trong JavaScript có thể là map và forEach. Cả hai đều bắt đầu tồn tại kể từ ECMAScript 5, hay ngắn gọn là ____21_______

Trong bài đăng này, tôi sẽ nói về sự khác biệt chính giữa mỗi loại và cho bạn thấy một số ví dụ về cách sử dụng của chúng

Trước khi đọc

Về cơ bản, việc lặp qua một đối tượng trong JavaScript phụ thuộc vào việc đối tượng đó có phải là một iterable hay không. Mảng có thể lặp lại theo mặc định

map và forEach được bao gồm trong

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

map và forEach là các phương thức trợ giúp trong mảng để lặp qua một mảng một cách dễ dàng. Chúng tôi đã sử dụng để lặp qua một mảng, như bên dưới, mà không có bất kỳ hàm trợ giúp nào

Vòng lặp

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Đây là một cách cổ điển để lặp một mảng. Kể từ ECMAScript 5, các chức năng mới đã xuất hiện giúp chúng ta hạnh phúc hơn

bản đồ

map thực hiện chính xác điều tương tự như những gì vòng lặp

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Phải mất hai tham số. một hàm gọi lại sẽ được gọi sau khi map hoặc forEach được gọi và biến ngữ cảnh có tên là

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Chức năng gọi lại có thể được sử dụng như dưới đây

arr.map((str) => { console.log(Number(str)); })

Kết quả của map không bằng mảng ban đầu

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Bạn cũng có thể chuyển đối tượng cho map dưới dạng

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Đối tượng

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Điều này là do các hàm mũi tên hoạt động khác với các hàm thông thường. Truy cập bài viết này để xem có gì khác nhau giữa chức năng mũi tên và chức năng thông thường

cho mỗi

forEach là một chức năng lặp khác cho một mảng nhưng có sự khác biệt giữa map và forEach khi sử dụng. Có hai tham số mà map và forEach có thể nhận — hàm gọi lại và

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Sau đó, những gì khác nhau?

map trả về một mảng mới của mảng ban đầu. forEach, tuy nhiên, không. Nhưng cả hai đều đảm bảo tính bất biến của đối tượng ban đầu

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

~~Sửa~~

forEach không đảm bảo tính bất biến của mảng nếu bạn thay đổi giá trị bên trong mảng. Phương pháp này chỉ đảm bảo tính bất biến khi bạn không chạm vào bất kỳ giá trị nào bên trong

[{a: 1, b: 2}, {a: 10, b: 20}].forEach((obj) => obj.a += 1);
// [{a: 2, b: 2}, {a: 11, b: 21}]
// The array has been changed!

Ví dụ trên là của Kenny Martin Rguez. Cảm ơn bạn. 👏

Vì sự khác biệt chính giữa chúng là có giá trị trả về hay không, nên bạn sẽ muốn sử dụng map để tạo một mảng mới và sử dụng forEach chỉ để ánh xạ qua mảng

Đây là một ví dụ đơn giản

Ví dụ, trong React, map được sử dụng rất phổ biến để tạo các phần tử vì map tạo và trả về một mảng mới sau khi thao tác dữ liệu của mảng ban đầu

Mặt khác, forEach rất hữu ích khi bạn muốn làm gì đó với dữ liệu mà không cần tạo một mảng mới. Nhân tiện, ví dụ này có thể được cấu trúc lại bằng cách sử dụng

subjects.filter(subject => mySubjectId.includes(subject.id)).length;

subjects.filter(subject => mySubjectId.includes(subject.id)).length;

Tóm lại, tôi khuyên bạn nên sử dụng map khi tạo một mảng mới mà bạn sẽ sử dụng và sử dụng forEach khi bạn không cần tạo một mảng mới, mà thay vào đó, bạn muốn làm gì đó với dữ liệu

So sánh tốc độ

Một số bài viết đề cập đến map nhanh hơn forEach. Vì vậy, tôi đã tò mò nếu nó là thật. Tôi tìm thấy kết quả so sánh này

Mã trông rất giống nhưng kết quả thì ngược lại. Một số bài kiểm tra cho biết forEach nhanh hơn và một số cho biết map nhanh hơn

Có thể bạn đang tự nhủ rằng map/_______20_______ nhanh hơn cái kia, và bạn có thể đúng. Tôi không chắc, thành thật mà nói. Tôi nghĩ khả năng đọc quan trọng hơn nhiều so với tốc độ giữa map và forEach khi nói đến phát triển web hiện đại

Nhưng có một điều chắc chắn — cả hai đều chậm hơn so với tính năng tích hợp sẵn của JavaScript, vòng lặp

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Phần kết luận

map và forEach là các hàm hữu ích để lặp qua một đối tượng có thể lặp lại và có thể làm đẹp mã của bạn và giúp bạn dễ đọc hơn

Nhưng một lưu ý quan trọng thực sự cần ghi nhớ là hiểu những gì từng làm và khi nào sử dụng từng

map sẽ tốt hơn khi bạn muốn tạo một mảng mới không ảnh hưởng đến mảng ban đầu và forEach sẽ tốt hơn khi bạn chỉ muốn ánh xạ qua một mảng

Cái nào nhanh hơn vòng lặp for trong JavaScript?

Tại sao chúng tôi sử dụng bản đồ thay vì vòng lặp trong JavaScript?

Bản đồ có chậm JavaScript không?

Chúng ta có thể sử dụng bản đồ thay vì vòng lặp trong JavaScript không?