Sắp xếp JavaScript có bất biến không?
Chắc hẳn trong sự nghiệp lập trình viên/kỹ sư phần mềm/nhà phát triển/người dùng bàn phím chuyên nghiệp, bạn đã từng gặp phải tình huống phải sắp xếp một số loại dữ liệu hoặc thành phần giao diện người dùng. Trong hầu hết các trường hợp, nó khá đơn giản, nhưng đôi khi nó có thể là một nỗi đau thực sự. Trong bài viết này, tôi sẽ cố gắng giải thích cách sắp xếp hoạt động trong thế giới TypeScript và JavaScript, cho bạn thấy một số ví dụ thực tế và nói ngắn gọn về một số thư viện phổ biến có thể giúp việc sắp xếp dễ dàng hơn nhiều Show
sắp xếp cơ bảnHãy bắt đầu với ví dụ cơ bản nhất và sắp xếp mảng các chuỗi
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đó là cách đơn giản nhất để sắp xếp theo thứ tự bảng chữ cái một chuỗi các chuỗi theo thứ tự tăng dần. Thay vào đó, nếu chúng ta muốn sắp xếp nó từ Z đến A thì sao?
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Điều này thoạt nghe có vẻ khó hiểu (đã từng ở đó) nhưng hãy tin tôi, nó thực sự rất có ý nghĩa khi bạn hiểu nó Cách thức hoạt động của chức năng so sánhHàm so sánh nhận hai đối số - phần tử hiện tại và phần tử tiếp theo. Nó phải trả về một số sẽ xác định cách sắp xếp các phần tử. Nguyên tắc chung là
Với cách sắp xếp số đơn giản, chúng ta thậm chí có thể tiến thêm một bước và đơn giản hóa phương pháp so sánh
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Hãy phân tích so sánh hai phần tử mảng đầu tiên
Sau đó, phương pháp 93 tiếp tục cho các số khác. Thật là chính xác? . Hóa ra các trình duyệt khác nhau đang sử dụng các thuật toán khác nhau để làm điều đó. API và đầu ra giống nhau, nhưng về cơ bản, chúng đang sắp xếp mọi thứ theo một cách hơi khác. Nếu bạn muốn có bằng chứng, hãy thử mã bên dưới trong bảng điều khiển Firefox và Chrome và xem nội dung được trả về - mã không giống nhau 9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Nếu bạn muốn tìm hiểu sâu hơn nữa - hãy xem giải thích tuyệt vời này về các thuật toán sắp xếp khác nhau TIỀN BOAĐáng để ghi nhớ. 93 là một phương thức có thể thay đổi, có nghĩa là nó thay đổi mảng ban đầu. Nếu bạn muốn tạo một mảng mới, bạn có thể trải nó ra rồi sắp xếp như thế này 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sắp xếp theo phương pháp const words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort((a, b) => { if (b > a) return 1; if (b < a) return -1; return 0; }); // -> ['Zulu', 'Tango', 'Lima', 'Bravo'] 95Trong các ví dụ trước, chúng ta chỉ cần so sánh các chuỗi và trả về giá trị đúng để sắp xếp các chuỗi trong mảng. Nhưng có một cách tuyệt vời khác để làm điều đó, ngoài ra nó còn cho chúng ta thêm siêu năng lực. Tôi đang nói về phương pháp 95. Đó là những gì bạn yêu cầu? . Điều này đặc biệt hữu ích với các ngôn ngữ có ký tự đặc biệt, vì chúng có thể có vị trí khác trong bảng chữ cái. Hãy xem một số ví dụ để mọi thứ có ý nghĩa hơn 5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Giống như tôi đã đề cập trước khi 95 trả về một giá trị số, vì vậy nếu 8 đứng trước 7 trong bảng chữ cái, nó sẽ mang lại một giá trị âm. Nếu 7 trước 8 - nó mang lại giá trị dương. Nếu chúng giống nhau - nó mang lại 22. Và chúng ta đã biết điều đó có ý nghĩa gì đối với phương pháp 93 từ phần 24Nhưng các siêu năng lực ở đâu, bạn hỏi? địa phươngNếu bạn đang xử lý nhiều ngôn ngữ trong ứng dụng/trang web của mình, thì điều quan trọng là phải chuyển ngôn ngữ của ngôn ngữ hiện tại khi bạn sử dụng tính năng sắp xếp, vì một số ký tự có vị trí khác trong bảng chữ cái 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Tùy chọn 95 cũng có một đối số thứ ba, đó là tùy chọn. Có một vài trong số chúng, nhưng tôi sẽ chỉ cho bạn hai, theo ý kiến của tôi, cần thiết nhất hàng ngày. Nếu bạn muốn đọc thêm về tất cả chúng, tôi thực sự khuyên dùng MDN và Tech trên mạngvỏ bọcBạn có thể chuyển một thuộc tính 26 cho các tùy chọn. Nếu bạn thiết lập nó là 27, nó sẽ sắp xếp các từ viết hoa trước (khi chúng bắt đầu bằng cùng một chữ cái). Nếu bạn vượt qua 28 - nó sẽ sắp xếp chữ thường trước 9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Giá trị sốGiả sử chúng ta muốn sắp xếp các chuỗi số - nếu chúng ta không chuyển thuộc tính 29, chúng sẽ được coi là các chuỗi và được sắp xếp giống như chúng - 50 sẽ đi trước 51 vì 1 nhỏ hơn 2. Kiểm tra các ví dụ dưới đây để hiểu rõ hơn 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Ví dụ thực tếChúng ta đã đề cập đến lý thuyết (mà tôi hy vọng sẽ giúp bạn hiểu rõ hơn về cách hoạt động của tính năng sắp xếp), bây giờ hãy tập trung vào các ví dụ thực tế. Tôi muốn cho bạn thấy một số sẽ chỉ sử dụng phương thức gốc 93 và một số khác sẽ sử dụng các thư viện bên ngoài như 53. Đi nàoSắp xếp một mảng các đối tượngGiả sử chúng ta có một mảng các đối tượng (mỗi đối tượng sẽ đại diện cho một con chó) và chúng ta muốn sắp xếp các đối tượng này theo thứ tự bảng chữ cái theo thuộc tính 54. Hãy xem làm thế nào chúng ta có thể làm điều đó 7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Như bạn có thể thấy, điều này rất giống với sắp xếp chuỗi thông thường, điểm khác biệt duy nhất là chúng ta đang so sánh các thuộc tính cụ thể của các đối tượng TIỀN BOATất cả phụ thuộc vào sở thích của bạn (và có thể là tiêu chuẩn nhóm của bạn) nhưng bạn có thể làm cho chức năng sắp xếp ngắn hơn nữa 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sắp xếp dựa trên các giá trị khác nhauVì vậy, chúng tôi đã đề cập đến điều đó, nhưng nếu chúng tôi có hai con chó bulgie trong danh sách của mình thì sao? 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Như bạn có thể thấy, chúng tôi chỉ cần thêm một "nhánh" khác vào đây - nếu các giá trị được so sánh giống nhau, chúng tôi sẽ thêm một đường dẫn 57 khác để xử lý việc so sánh một thuộc tính khác trên đối tượng - trong trường hợp này là 56TIỀN BOAĐôi khi các chức năng sắp xếp của bạn có thể trở nên khá phức tạp, vì vậy sẽ rất hợp lý khi trích xuất chúng theo các phương thức của riêng chúng và chuyển chúng tới 93 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sắp xếp dựa trên mảng khácQuay trở lại với những chú chó yêu quý của chúng ta, hãy tưởng tượng chúng ta muốn sắp xếp chúng theo 54 nhưng không theo thứ tự bảng chữ cái. Giả sử chúng ta có một danh sách cụ thể các giống cần được sử dụng làm tham chiếu cho logic sắp xếp. Hãy xem bên dưới vì nó có thể dễ hiểu hơn với ví dụ mã 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Điều gì đã xảy ra ở đây? . Trong tình huống này, nếu chúng ta so sánh chỉ số của 42 và 43, chúng ta sẽ nhận được 44, điều đó có nghĩa là 45 sẽ đi đầu tiên trong phương pháp sắp xếp của chúng tathư viện bên ngoàiNgoài các giải pháp vanilla JS/TS của bạn, còn có rất nhiều thư viện bên ngoài hiển thị API đẹp để giúp sắp xếp dễ dàng hơn. Dưới đây tôi sẽ cho bạn thấy các ví dụ từ hai trong số đó - 53 và 47lodashLodash là một thư viện tiện ích JavaScript rất phổ biến. Nó có tất cả các loại phương pháp khác nhau giúp ích rất nhiều cho bạn trong các công việc hàng ngày của nhà phát triển. Nó cũng cho phép bạn sử dụng một số chức năng trợ giúp sắp xếp sắp xếpByPhương thức này cho phép bạn sắp xếp các mảng đối tượng. Đầu ra hoàn toàn giống như trong phần 48 trước đây. Với đối số đầu tiên, bạn chuyển mảng để sắp xếp và đối số thứ hai là một mảng các thuộc tính đối tượng mà chúng ta muốn sắp xếp theo (trong ví dụ bên dưới - sắp xếp đầu tiên theo giống, sau đó theo tên nếu giống giống nhau) 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đặt bởiPhương thức này hầu như giống hệt với 49 ngoại trừ việc nó cho phép chỉ định thứ tự sắp xếp của các lần lặp. Vì vậy, nếu chúng ta muốn sắp xếp theo giống tăng dần, nhưng sau đó theo tên giảm dần, chúng ta có thể làm như thế này 5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình sắp xếp nhanhĐây là thư viện sắp xếp linh hoạt và dễ sử dụng với sự hỗ trợ của TypeScript. Nó có cách tiếp cận hơi khác so với lodash khi nói đến API. Hãy xem cách chúng ta có thể giải quyết vấn đề sắp xếp giống như chúng ta đã làm trước đây 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Tất nhiên, cả hai thư viện được đề cập đều có nhiều tùy chọn và khả năng hơn. Ngoài ra, có rất nhiều thư viện khác giải quyết các vấn đề tương tự hoặc tương tự, chỉ kể tên một số - 90, 91 hoặc 92. Tôi khuyến khích bạn kiểm tra tài liệu của họ và thử chơi - hãy tin tôi, đôi khi họ có thể là người tiết kiệm trực tiếpTóm lượcTôi hy vọng bài viết này sẽ giúp bạn tự tin hơn khi sắp xếp trong Javascript và Typescript. Chúng tôi đã đi từ những điều cơ bản, qua các ví dụ phức tạp hơn và hoàn thành trên các thư viện bên ngoài có thể giúp chúng tôi thực hiện một số công việc. Tôi nghĩ bây giờ bạn đã sẵn sàng để. khắc phục vấn đề. (ý định chơi chữ ở cấp độ trò đùa của bố) JavaScript là loại gì?JavaScript theo mặc định sử dụng sắp xếp chèn cho phương thức sort(). Điều này có nghĩa là nó không phù hợp khi sắp xếp các tập dữ liệu lớn. Khi xử lý các tập dữ liệu lớn, người ta nên xem xét các thuật toán sắp xếp khác, chẳng hạn như sắp xếp hợp nhất.
Tại sao sắp xếp không sắp xếp JavaScript?Điều này là do sort() cần bộ so sánh gọi lại và khi sort() được sử dụng mà không có bộ so sánh, String() đóng vai trò là . Đây là chức năng gọi lại của chúng tôi sẽ giúp sắp xếp các số theo đúng thứ tự tăng dần.
Thời gian sắp xếp của JavaScript có phức tạp không?sort(Object[]) dựa trên thuật toán TimSort, cho chúng ta độ phức tạp về thời gian là O(n log(n)) . Tóm lại, TimSort sử dụng thuật toán sắp xếp Chèn và sắp xếp Sắp xếp. Tuy nhiên, nó vẫn chậm hơn so với các thuật toán sắp xếp khác như một số triển khai QuickSort.
Sắp xếp trong js có phải là một hàm thuần túy không?phương thức sort() không thuần túy —nó thực sự sắp xếp mảng tại chỗ và trả về một tham chiếu đến mảng ban đầu. Đây là lý do tại sao bạn sẽ thường thấy các nhà phát triển lọc hoặc ánh xạ mảng trước để tạo một bản sao của mảng ban đầu trước khi sắp xếp nó. |