• Trang chủ
• Học JavaScript
• Sắp xếp mảng trong JS

Sắp xếp mảng trong JS

Trong hướng dẫn này, bạn sẽ học cách sắp xếp các phần tử mảng trong JavaScript.

Sắp xếp một mảng

Sắp xếp là một nhiệm vụ phổ biến khi làm việc với mảng. Ví dụ, nó sẽ được sử dụng nếu bạn muốn hiển thị tên thành phố hoặc quận theo thứ tự bảng chữ cái.

Đối tượng Array trong JavaScript có một phương thức tích hợp sẵn sort() để sắp xếp các phần tử mảng theo thứ tự bảng chữ cái. Ví dụ sau minh họa cách nó hoạt động:

var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
var sorted = fruits.sort();

alert(fruits); // Outputs: Apple,Banana,Mango,Orange,Papaya
alert(sorted); // Outputs: Apple,Banana,Mango,Orange,Papaya

Đảo ngược một mảng

Bạn có thể sử dụng phương thức reverse()này để đảo ngược thứ tự các phần tử của mảng.

Phương thức này đảo ngược một mảng theo cách mà phần tử mảng đầu tiên trở thành phần tử cuối cùng và phần tử mảng cuối cùng trở thành phần tử đầu tiên. Đây là một ví dụ:

var counts = ["one", "two", "three", "four", "five"];
var reversed = counts.reverse(); 

alert(counts); // Outputs: five,four,three,two,one
alert(reversed); // Output: five,four,three,two,one

Sắp xếp mảng số

Phương thức sort() có thể tạo ra kết quả không mong muốn khi nó được áp dụng trên mảng số (tức là mảng chứa các giá trị số). Ví dụ:

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); // Sorts numbers array
alert(numbers); // Outputs: 10,100,20,5,50,75

Như bạn có thể thấy, kết quả khác với những gì chúng ta mong đợi. Nó xảy ra bởi vì, phương thức sort()sắp xếp các phần tử mảng số bằng cách chuyển đổi chúng thành chuỗi (tức là 20 trở thành "20", 100 trở thành "100", v.v.) và do ký tự đầu tiên của chuỗi "20" (tức là "2" ) xuất hiện sau ký tự đầu tiên của chuỗi "100" (tức là "1"), đó là lý do tại sao giá trị 20 được sắp xếp sau 100.

Để khắc phục sự cố sắp xếp này với mảng số, bạn có thể truyền hàm so sánh, như sau:

var numbers = [5, 20, 10, 75, 50, 100];

// Sorting an array using compare function
numbers.sort(function(a, b) {
    return a - b;
});
alert(numbers); // Outputs: 5,10,20,50,75,100

Như bạn có thể thấy, lần này chúng ta có kết quả chính xác. Hãy xem nó hoạt động như thế nào.

Khi hàm so sánh được chỉ định, các phần tử mảng được sắp xếp theo giá trị trả về của hàm so sánh. Ví dụ: khi so sánh avà b:

• Nếu hàm so sánh trả về một giá trị nhỏ hơn 0, thì nó ađến trước.
• Nếu hàm so sánh trả về một giá trị lớn hơn 0, thì nó bđến trước.
• Nếu hàm so sánh trả về 0 avà bkhông thay đổi đối với nhau, nhưng được sắp xếp đối với tất cả các phần tử khác.

Do đó, vì 5 - 20 = -15cái nào nhỏ hơn 0 nên 5 đứng trước, tương tự 20 - 10 = 10cái nào lớn hơn 0 thì 10 đứng trước 20, tương tự 20 - 75 = -55mà nhỏ hơn 0 thì 20 đứng trước 75, tương tự 50 đứng trước 75, v.v.

Tìm giá trị tối đa và tối thiểu trong một mảng

Bạn có thể sử dụng phương thức apply() kết hợp với Math.max()và Math.min()để tìm giá trị lớn nhất và nhỏ nhất bên trong một mảng, như sau:

var numbers = [3, -7, 10, 8, 15, 2];

// Defining function to find maximum value
function findMax(array) {
    return Math.max.apply(null, array);
}

// Defining function to find minimum value
function findMin(array) {
    return Math.min.apply(null, array);
}

alert(findMax(numbers)); // Outputs: 15
alert(findMin(numbers)); // Outputs: -7

Phương thức apply()cung cấp một cách thuận tiện để truyền các giá trị mảng dưới dạng đối số cho một hàm chấp nhận nhiều đối số theo cách giống như mảng, nhưng không phải là một mảng (ví dụ: Math.max()và Math.min()các phương thức ở đây). Vì vậy, câu lệnh kết quả Math.max.apply(null, numbers)trong ví dụ trên tương đương với câu lệnh Math.max(3, -7, 10, 8, 15, 2).

Sắp xếp một mảng các đối tượng

Phương thức sort()cũng có thể được sử dụng để sắp xếp các mảng đối tượng bằng cách sử dụng hàm so sánh.

Ví dụ sau sẽ chỉ cho bạn cách sắp xếp một mảng đối tượng theo giá trị thuộc tính:

var persons = [
    { name: "Harry", age: 14 },
    { name: "Ethan", age: 30 },
    { name: "Peter", age: 21 },
    { name: "Clark", age: 42 },
    { name: "Alice", age: 16 }
];

// Sort by age
persons.sort(function (a, b) {
    return a.age - b.age;
});

console.log(persons);

// Sort by name
persons.sort(function(a, b) {
    var x = a.name.toLowerCase(); // ignore upper and lowercase
    var y = b.name.toLowerCase(); // ignore upper and lowercase
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // names must be equal
    return 0;
});

console.log(persons);