Sắp xếp Mảng trong JavaScript

Trong bài hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu làm thế nào để sắp xếp các phần tử trong mảng với JavaScript.

Sắp xếp mảng trong Javascript

Sắp xếp mảng bằng phương thức sort() trong JS

Sắp xếp là một nhiệm vụ phổ biến khi làm việc với mảng.

Không chỉ riêng Javascript, cho dù bạn HỌC PHP, HỌC JAVA hay PYTHON bạn cũng cần phải hiểu cách sắp xếp mảng, các thuật toán sắp xếp mảng phổ biến. Tham khảo thêm tại đây!

Ví dụ, nếu bạn muốn hiển thị tên của các tỉnh, thành phố theo bảng chữ cái để dễ dàng theo dõi, tìm kiếm.

Lúc này, JavaScript cung cấp cho bạn một phương thức sort() tích hợp để sắp xếp các phần tử mảng theo thứ tự bảng chữ cái (mặc định từ A - Z).

Ví dụ sau đây cho thấy cách thức hoạt động của nó:

var thanhPhos = ["Hà Nội", "Hải Phòng", "Tuyên Quang", "Bắc Ninh", "TP HCM"];
var sorted = thanhPhos.sort();

console.log(thanhPhos);
// Kết quả: ["Bắc Ninh", "Hà Nội", "Hải Phòng", "TP HCM", "Tuyên Quang"]
console.log(sorted);
// Kết quả: ["Bắc Ninh", "Hà Nội", "Hải Phòng", "TP HCM", "Tuyên Quang"]

Đảo ngược mảng với phương thức reverse() trong JS

Bạn có thể sử dụng phương thức reverse() để đảo ngược thứ tự các phần tử của một 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 thanhPhos = ["Hà Nội", "Hải Phòng", "Tuyên Quang", "Bắc Ninh", "TP HCM"];
var reversed = thanhPhos.reverse();

console.log(thanhPhos);
// Kết quả: ["TP HCM", "Bắc Ninh", "Tuyên Quang", "Hải Phòng", "Hà Nội"]
console.log(reversed);
// Kết quả: ["TP HCM", "Bắc Ninh", "Tuyên Quang", "Hải Phòng", "Hà Nội"]

Như bạn thấy:

Phương thức sort() và reverse() thay đổi mảng đầu vào và trả lại chính mảng đó.

Sắp xếp mảng số trong Javascript

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 các mảng số (tức là các mảng có chứa các giá trị số).

* Trong bài viết Mảng trong Javascript bạn cũng đã được xem một ví dụ về sắp xếp mảng số. Tuy nhiên, hôm nay mình sẽ giải thích kỹ hơn về cách chúng hoạt động.

Ví dụ:

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); // Sắp xếp mảng số
console.log(numbers); // Kết quả: [10, 100, 20, 5, 50, 75]

Như bạn có thể thấy, kết quả không đúng như những gì chúng ta mong đợi.

Điều này 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à vì ký tự đầu tiên của chuỗi '20' (nghĩa 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.

Để sửa lỗi sắp xếp của phương thức sort() bạn cần phải truyền vào một hàm so sánh, như sau:

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

// Sắp xếp mảng sử dụng hàm so sánh
numbers.sort(function(a, b) {
    return a - b;
});
console.log(numbers); // Kết quả: [5, 10, 20, 50, 75, 100]

Như bạn có thể thấy, chúng đã hoạt động đúng như mong muốn.

Đây là cách nó hoạt động:

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

    + Nếu hàm so sánh trả về giá trị nhỏ hơn 0, thì a đứng trước.

    + Nếu hàm so sánh trả về giá trị lớn hơn 0, thì b đứng trước.

    + Nếu hàm so sánh trả về 0, a và b không thay đổi đối với nhau, nhưng được sắp xếp theo tất cả các phần tử khác.

Do đó,

    + Vì 5 - 20 = -15 nhỏ hơn 0, nên 5 đứng trước

    + Tương tự, 20 - 10 = 10 lớn hơn 0, nên đó 10 đến trước 20

    + 20 - 75 = -55 nhỏ hơn 0 , vì vậy 20 đứng trước 75

    + và 50 đứng trước 75, v.v.

Tìm kiếm giá trị lớn nhất và nhỏ nhất trong 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à giá trị nhỏ nhất trong một mảng, như sau:

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

// Định nghĩa hàm tìm kiếm giá trị lớn nhất
function findMax(array) {
    return Math.max.apply(null, array);
}

// Định nghĩa hàm tìm kiếm giá trị nhỏ nhất
function findMin(array) {
    return Math.min.apply(null, array);
}

console.log(findMax(numbers)); // Kết quả: 15
console.log(findMin(numbers)); // Kết quả: -7

Phương thức apply() trong Javascript cung cấp một cách đơn giả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ụ: ở đây là các phương thức Math.max() và Math.min()).

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 Math.max (3, -7, 10, 8, 15, 2).

Sắp xếp một mảng đối tượng trong JS

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 các đối tượng theo các giá trị của thuộc tính.

var persons = [
    { name: "Hải", age: 19 },
    { name: "Doanh", age: 27 },
    { name: "Việt", age: 29 },
    { name: "Huy", age: 18 },
    { name: "Hà", age: 20 }
];

// Sắp xếp theo tuổi
persons.sort(function (a, b) {
    return a.age - b.age;
});

console.log(persons);

// Sắp xếp theo tên
persons.sort(function(a, b) {
    var x = a.name.toLowerCase(); // Bỏ qua Hoa Thường
    var y = b.name.toLowerCase(); // Bỏ qua Hoa Thường
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // Tên giống nhau
    return 0;
});

console.log(persons);

Lời kết

Đây chỉ là những cách sắp xếp mảng trong Javascript rất đơn giản. Tùy vào mong muốn sắp xếp và kiểu dữ liệu, bạn có thể tự thiết lập các các sắp xếp khác nhau.

Chúc bạn học tốt!

Tham khảo thêm tại đây: https://khan4019.github.io/front-end-Interview-Questions/sort.html