Như chúng ta có thể thấy trong hình, RxSwift chậm hơn nhiều so với các chức năng tích hợp và cả vòng lặp for-in. Giải pháp chức năng tích hợp là 5. Nhanh hơn 14 lần so với RxSwift và giải pháp vòng lặp for-in là 12. Nhanh hơn 21 lần so với RxSwift
Vui lòng không sử dụng RxSwift khi bạn cần làm việc với lượng dữ liệu khổng lồ
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];1, vì vậy chúng tôi không cần phải suy nghĩ về
const new_arr = arr.map[d => d];arr === new_arr; // false
iterable
. Nếu bạn muốn nghiên cứu thêm, tôi khuyên bạn nên xem đối tượng iterable
trong JavaScript là gìconst arr = [1];4 và
const new_arr = arr.map[d => d];arr === new_arr; // false
const arr = [1];5 là gì?
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];8 đã đồng hành cùng chúng ta từ những ngày đầu của kỷ nguyên JavaScript. Cần 3 biểu thức. giá trị ban đầu, điều kiện và biểu thức cuối cùng
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];8 thực hiện, ngoại trừ việc
const new_arr = arr.map[d => d];arr === new_arr; // false
map
tạo một mảng mới với kết quả là gọi một hàm được cung cấp trên mọi phần tử trong mảng đang gọiPhả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;
4 mà hàm gọi lại sẽ sử dụng khi được gọiChứ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;
4Đối tượng
[1,2,3].map[d => d + 1]; // [2, 3, 4];
[1,2,3].forEach[d => d + 1]; // undefined;
8 đã trở thành [1,2,3].map[d => d + 1]; // [2, 3, 4];
[1,2,3].forEach[d => d + 1]; // undefined;
4 cho map
. Nhưng chức năng gọi lại mũi tên không thể nhận được [1,2,3].map[d => d + 1]; // [2, 3, 4];
[1,2,3].forEach[d => d + 1]; // undefined;
8 như [1,2,3].map[d => d + 1]; // [2, 3, 4];
[1,2,3].forEach[d => d + 1]; // undefined;
4 của nóĐ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;
4 mà chúng sử dụng làm thisSau đó, 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. 👏
Khi nào nên sử dụng map[] và forEach[]?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;
7subjects.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
jsPerf kết quả bên trái và jsPerf kết quả bên phải
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];8
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