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

Hướng dẫn sắp xếp một Array Objects trong JavaScript
Nếu bạn thấy hay hãy like share cho bạn bè cùng biết nhé !
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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ĩ.

Việc tốt – Lương cao cùng CAREERBUILDER

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.

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ư a và b 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:

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:

Ở đ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ó thừa 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 và Sugar) như đã đã giới thiệu, nhưng tự mình làm cũng đâu có khó lắm đâu.

Bài viết liên quan

Leave a Reply

avatar
  Subscribe  
Notify of