Cách sắp xếp các phần tử trong mảng Javascript

Làm việc với Array – Mảng là một trong những công việc thường xuyên nhất. Mình cũng có nhiều bài viết chuyên sâu hoặc thủ thuật để làm việc với mảng được hiệu quả hơn.

Bài hôm nay, mình sẽ chia sẻ cách sắp xếp các phần tử trong mảng tăng dần hoặc giảm dần.

Nếu để ý kỹ, bạn sẽ nhận ra một vấn đề ở đây. Sắp xếp tăng dần hoặc giảm dần là theo tiêu chí gì? Nếu mảng chỉ gồm các phần tử là số, hoặc string thì đơn giản quá. Nhưng nếu mảng chứa các phần tử là object thì sao?

Chúng ta sẽ cùng nhau tìm hiểu nhé.

Sắp xếp mảng có phần tử là số, String

Chúng ta vào bài toán đơn giản trước nhé. Giả sử, chúng ta có một mảng sau:

const numArray = [9, 5, 3, 2, 8, 6, 1]

Để sắp xếp mảng này, chúng ta có thể sử dụng hàm có sẵn của JS là hàm sort(). Mặc định, hàm sort() chỉ sắp xếp các phần tử theo bảng chữ cái. Do đó, để sắp xếp các số thì cần truyền vào một function so sánh để xác định quy tắc sắp xếp.

const numArray = [9, 5, 3, 2, 8, 6, 1]
// Sắp xếp tăng dần
numArray.sort((a, b) => a - b);
console.log(numArray);
// in ra: [1, 2, 3, 5, 6, 8, 9]

Như ở trên, để sắp xếp tăng dần thì quy tắc là số ở phía sau lớn hơn phía trước, do đó, (a - b) > 0 và trả về true. Ngược lại, để sắp xếp giảm dần, bạn đảo chiều thành (b-a) là được.

Hàm sort() sẽ tác động trực tiếp vào mảng, biến đổi thứ tự của mảng chứ không clone ra mảng mới.

Sắp xếp mảng có phần tử là Object

Với mảng có phần tử là object, việc sắp xếp sẽ phức tạp hơn chút, không phải vì kỹ thuật phức tạp mà vì cách hiểu của chúng ta: thế nào là lớn hơn, thế nào là kém hơn?

Do đó, trước khi thực hiện so sánh, chúng ta cần xác định tiêu chí cụ thể để sắp xếp là gì?

Ví dụ: Để so sánh giữa hai con người, chúng ta không thể khẳng định chung chung là ông A tốt hơn ông B. Ông A có thể cao,to hơn ông B. Nhưng chắc gì ông A đã đen và hôi hơn ông B.

Tóm lại, để sắp xếp được mảng có phần từ là các objects, bạn cần xác định thuộc tính, tiêu chí cần so sánh trong hàm so sánh.

Giả sử, bạn có mảng cần sắp xếp tăng dần theo độ tuổi: ai lớn tuổi lên trước – ưu tiên người già:

const persons = [ 
  { name: 'Kiều Phong', age: 30, height: 170},
  { name: 'Lý Quỳ', age: 45, height: 150},
  { name: 'Dương Tiễn', age: 35, height: 180},
];

function compare(a, b) {
  return b.age - a.age;
}

console.log(persons.sort(compare))
// in ra: [{ name: 'Lý Quỳ', age: 45, height: 150},{ name: 'Dương Tiễn', age: 35, height: 180}, { name: 'Kiều Phong', age: 30, height: 170}]

Cũng đơn giản phải không?

Nếu bạn sử dụng thư viện Lodash thì còn dễ hơn nữa. Bạn chỉ cần phải truyền vào thuộc tính cần so sánh, khỏi cần viết hàm so sánh luôn.

const persons = [ 
  { name: 'Kiều Phong', age: 30, height: 170},
  { name: 'Lý Quỳ', age: 45, height: 150},
  { name: 'Dương Tiễn', age: 35, height: 180},
];

var sortedPersons = _.orderBy(persons, ['age'], ['desc']);
console.log(sortedPersons);

Cú pháp sắp xếp của Lodash:

_.orderBy(collection, iteratees, orders)

Trên đây là một số cách đơn giản để bạn sắp xếp một mảng. Bạn có cách nào hay hơn thì chia sẻ với mọi người trong phần bình luận nhé.

💦 Đọc thêm thủ thuật hay khác về Javascript:

• Cách kiểm tra empty/undefined/null trong Javascript
• Cách sử dụng Javascript Classes
• [Javascript] Các cách xóa phần tử trong mảng (Array)