DVMS Co., Ltd

Hướng dẫn sắp xếp một Array Objects trong JavaScript

Nếu bạn đang có array object bạn cần để sắp xếp theo một thứ tự cụ thể, bạn có thể sẽ bị “cám dỗ” tìm đến thư viện JavaScript. Tuy nhiên, trước khi bạn làm như vậy, bạn có thể thực hiện sorting rất đầy đủ và gọn gàng với hàm Array.sort sẵn có. Trong bài viết này, tôi sẽ cho bạn thấy cách sắp xếp array objects trong JavaScript mà không cần lo nghĩ.

Sắp xếp Array cơ bản

By default, the JavaScript Array.sort function converts each element in the array to be sorted, into a string, and compares them in Unicode code point order.

Theo mặc định, hàm Array.sort trong JavaScript chuyển đổi mỗi phần tử trong array để có thể sắp xếp được, thành string, và so sánh chúng theo thứ tự Unicode code point.

 

Có thể bạn đang tự hỏi tại sao 30 đến trước 4… không logic quá nhỉ? Well, thật ra có logic đó. Việc này xảy ra khi mỗi phần tử trong array trước hết được chuyển thành string, và ”30” đến trước “4” theo thứ tự Unicode.

Bạn cũng nên biết rằng không như những hàm array khác trong JavaScript, Array.sort thật sự có thay đổi, hoặc gây đột biến đến các array mà nó sắp xếp.

Để tránh trường hợp này xảy ra, bạn có thể tạo instance array mới để được sắp xếp, và thay vào đó chỉnh sửa lên instance này.

 

Thử xem

JS Bin on jsbin.com

Nếu chỉ dùng Array.sort, bạn sẽ không thể nào tận dụng được hết tất cả chức năng sẵn có khi sắp xếp một array objects. Thật may mắn thay, Hàm này còn có thể tiếp nhận tham số compareFunction tùy chỉnh, khiến các phần tử trong array được sắp xếp theo giá trị được trả lại từ hàm so sánh.

Dùng hàm so sánh để sắp xếp

Giả sử như ab là hai phần tử được so sánh bằng hàm so sánh. Nếu hàm so sánh có giá trị được trả lại:

  1. Ít hơn 0 — a đứng trước b
  2. Lớn hơn 0  — b đứng trước a
  3. bằng 0  — a và b vẫn giữ nguyên

Hãy nhìn vào ví dụ đơn giản với array số sau:

Kết quả trên có thể được refactor một phần để nhận được giá trị kết quá bằng cách trừ a với b;

Từ đó trở thành ứng viên hoàn hảo cho hàm arrow:

 

Sắp xếp một array object trong JavaScript

Giờ đây, hãy nhìn vào cách sắp xếp một array object. Ta cùng nhìn vào một array nhạc cụ:

Chúng ta có thể sử dụng hàm so sánh sau để sắp xếp array object này theo từng thể loại:

Để đảo ngược thứ tự sắp xếp, bạn chỉ việc đảo ngược giá trị trả lại từ hàm so sánh:

 

Thử xem

JS Bin on jsbin.com

Tạo hàm sắp xếp dynamic

Cuối cùng, chúng ta hãy cùng tạo hàm so sánh “động”, mà bạn có thể sử dụng để sắp xếp array objects, giá trị của những object này có thể là chuỗi hoặc số. Hàm này có hai tham số — key để sắp xếp theo đó, và thứ tự của kết quả (i.e. tăng dần hay giảm dần).

Và đây là cách dùng:

 

Thử xem

JS Bin on jsbin.com

Ở đoạn code bên trên, method hasOwnProperty được sử dụng để kiểm tra xem liệu tính chất định sẵn có được xác định trên object hay không, và có tha hưởng qua chuỗi nguyên mẫu (prototype chain) hay không hàm này trả giá trị 0, khiến thứ tự sắp xếp giữ nguyên.

Toán tử typeof cũng được sử dụng để kiểm tra kiểu dữ liệu của giá trịnh của tính chất. Như vậy, hàm có thể xác định cách sắp xếp array phù hợp. Ví dụ, nếu giá trị của tính chất định sẵn là một string, một method toUpperCase sẽ được sử dụng để chuyển đổi tất cả ký tự trong đó thành uppercase, vì vậy khi sắp xếp, các ký tự hoa thường được đánh giá không phân biệt.

Bạn cũng có thể điều chỉnh hàm trên để chứa các kiểu dữ liệu khác, và bất kỳ đặc điểm đặc thù nào mà script cần.

Kết

Tuy nhiều thư viện JavaScript cung cấp khả năng sắp xếp động  (Underscore.js, Lodash Sugar) như đã đã giới thiệu, nhưng tự mình làm cũng đâu có khó lắm đâu.

Sitepoint

DVMS chuyên:

- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...

Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>

ứng dụng quản lý vận tải thông minh

ứng dụng quản lý đội xe, điều tài thông minh

Phần mềm, ứng dụng thông minh dành cho quản lý xe doanh nghiệp, điều xe đi công tác,...

SGO Giải pháp thông minh cho các công ty vận chuyển, logistics thuê ngoài

fintech

banking mobile apps

insurtech

medical tech, health care mobile apps

© Copyright DVMS Co., Ltd. All Rights Reserved.