JavaScript Sort Array: Hướng dẫn sắp xếp mảng

Bạn có thể dùng phương thức JavaScript sort() để sắp xếp mảng. sort() chấp nhận mảng làm đối số và sắp xếp giá trị theo thứ tự tăng dần. Mảng được sắp xếp tại chỗ (in place) nghĩa là mảng gốc bị sửa đổi. Mảng mới không được tạo ra.

Bạn có thể quyết định sắp xếp mảng theo thứ tự cụ thể. Ví dụ: có danh sách tên muốn hiển thị cho user theo thứ tự bảng chữ cái.

Tùy cách muốn sắp xếp phần tử trong mảng, có hàm built-in JavaScript giúp. Ví dụ: dùng sort() sắp xếp mảng theo thứ tự bảng chữ cái, reverse() sắp xếp ngược, và sort() với hàm lồng nhau tạo custom sorts.

Trong tutorial này, ta phân tích cách dùng sort() và reverse() thực hiện sắp xếp mảng trong JavaScript.

Phương thức JavaScript sort()

Phương thức sort() JavaScript đọc giá trị trong mảng và trả về giá trị đó theo thứ tự tăng dần hoặc giảm dần. Chuỗi chứa số hoặc chuỗi đều có thể sắp xếp.

Xem cú pháp:

const values = [1, 2, 8, 9, 3];
values.sort();

Code sắp xếp list "values". List được sắp xếp tại chỗ (in place) nghĩa là list gốc bị sửa đổi. sort() không tạo version mới của list.

Lưu ý: sort() sửa đổi mảng gốc và thay đổi thứ tự. Nếu muốn giữ mảng gốc, có thể chạy sort() và lưu giá trị vào biến mới.

Nếu gán nội dung sort() cho biến mới, list gốc vẫn bị thay đổi.

Ví dụ JavaScript Sort Array

Để sắp xếp mảng trong JavaScript, dùng built-in default sort(). Dạng đơn giản nhất, sort() sắp xếp mảng theo thứ tự bảng chữ cái tăng dần. Ví dụ sort() hoạt động:

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var sorted_students = students.sort();
console.log(sorted_students);

Code trả về:

["Alex", "Cathy", "Jeff", "Lincoln"]

Mảng đã sắp xếp tăng dần. Dùng sort() sắp xếp biến "students". Sau đó in giá trị "students" ra console.

JavaScript Array sort(): Sắp xếp mảng số

Có thể dùng sort() sắp xếp giá trị trong danh sách số tăng dần.

Giả sử có danh sách điểm học sinh muốn sắp xếp tăng dần. Dùng sort():

var grades = [67, 75, 62, 78];
grades.sort();
console.log(grades);

Output:

[62, 67, 75, 78]

Mảng đã sắp xếp tăng dần! Khi chương trình bắt đầu sort(), phần tử trong mảng sắp xếp dựa trên giá trị.

Vì sort() sắp xếp tại chỗ, không cần gán kết quả cho biến mới. Code in mảng "grades" mới sắp xếp ra console.

JavaScript Sắp xếp mảng đối tượng (Array of Objects)

sort() có thể sắp xếp mảng đối tượng. Ví dụ: có mảng JSON object lưu tên và tuổi học sinh.

Ví dụ sort() sắp xếp mảng theo tuổi học sinh:

var students = [
  { name: "Alex", age: 16 },
  { name: "Cathy", age: 14 },
  { name: "Lincoln", age: 14 },
  { name: "Jeff", age: 15 }
];
var sorted_students = students.sort(function(a, b) {
  return a.age - b.age;
});
console.log(sorted_students);

Code trả về:

[
  { "name": "Cathy", "age": 14},
  { "name": "Lincoln", "age": 14},
  { "name": "Jeff", "age": 15},
  { "name": "Alex", "age": 16}
]

Code trả về mảng JSON object theo thứ tự tuổi học sinh.

Dòng đầu khai báo "students" với bốn học sinh. Tạo hàm sắp xếp "students" dựa trên giá trị "age" trong JSON object bằng cách so sánh tuổi. Cuối in danh sách học sinh đã sắp xếp.

JavaScript Array sort(): Sắp xếp ngược (Reverse Order)

Có built-in function JavaScript cho phép sắp xếp mảng ngược: reverse().

Phương thức reverse() đảo ngược mảng: phần tử đầu thành cuối, cuối thành đầu. Do đó, phương thức này không sắp xếp mảng theo thứ tự bảng chữ cái giảm dần.

Nếu sắp xếp list trước dùng sort(), có thể dùng reverse() xem mảng giảm dần.

Ví dụ reverse() hoạt động:

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var reversed_students = students.reverse();
console.log(reversed_students);

Code trả về:

["Jeff", "Lincoln", "Cathy", "Alex"]

Đầu tiên sắp xếp list tăng dần dùng sort(). Sau đó đảo ngược list dùng reverse(). List giờ hiển thị tên theo thứ tự bảng chữ cái giảm dần.

Hàm reverse(), giống sort(), sửa đổi thứ tự list. Không thể gán kết quả reverse() cho biến mới mà không sửa mảng gốc. Đã nói chuyện này trước với sort().

Kết luận

Phương thức JavaScript sort() sắp xếp nội dung list tăng dần hoặc giảm dần. sort() sửa đổi list tại chỗ nghĩa là phương thức không tạo list mới. reverse(), khi dùng sau sort(), sắp xếp list giảm dần.

Trong tutorial, ta phân tích cách sắp xếp mảng JavaScript dùng sort(). Thảo luận sắp xếp mảng số, sắp xếp mảng đối tượng, và dùng reverse() đảo ngược nội dung mảng.

Lời khuyên tài nguyên học JavaScript top, khóa học online, xem bài How to Learn JavaScript.