Cách sắp xếp một mảng đối tượng theo giá trị thuộc tính trong JavaScript

Tìm hiểu cách sắp xếp một mảng đối tượng theo giá trị thuộc tính trong JavaScript


Giả sử bạn có một mảng các đối tượng như sau:

const list = [
  { color: 'white', size: 'XXL' },
  { color: 'red', size: 'XL' },
  { color: 'black', size: 'M' }
]

Bạn muốn hiển thị danh sách này, nhưng trước tiên bạn muốn sắp xếp nó theo giá trị của một trong các thuộc tính. Ví dụ bạn muốn đặt nó theo tên màu, theo thứ tự bảng chữ cái: đen, đỏ, trắng.

Bạn có thể dùngsort()phương pháp củaArray, hàm này nhận một hàm gọi lại, nhận như là tham số 2 đối tượng chứa trong mảng (mà chúng ta gọi làab):

list.sort((a, b) => (a.color > b.color) ? 1 : -1)

Khi chúng ta trả về 1, hàm sẽ giao tiếp vớisort()rằng đối tượngbđược ưu tiên trong việc sắp xếp đối tượnga. Trở về-1sẽ làm ngược lại.

Hàm callback cũng có thể tính toán các thuộc tính khác, để xử lý trường hợp màu giống nhau và cũng sắp xếp thứ tự theo thuộc tính phụ:

list.sort((a, b) => (a.color > b.color) ? 1 : (a.color === b.color) ? ((a.size > b.size) ? 1 : -1) : -1 )

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: