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

Paul Boyer

00:16:49 Thứ Năm, 20 tháng 6, 2024

Sắp xếp các đối tượng JavaScript theo thuộc tính chuỗi

Sắp xếp mảng đối tượng là một tác vụ phổ biến trong JavaScript, đặc biệt khi làm việc với dữ liệu cần hiển thị theo một thứ tự cụ thể. Một kịch bản điển hình liên quan đến việc sắp xếp một mảng đối tượng theo giá trị thuộc tính chuỗi, chẳng hạn như họ hoặc chức danh.

Trong bài viết này, chúng ta sẽ khám phá cách sắp xếp một mảng các đối tượng JavaScript theo giá trị của thuộc tính chuỗi. Chúng ta sẽ kiểm tra việc sử dụng phương thức `sort()` và thảo luận xem liệu các bước bổ sung, như thêm phương thức `toString()` vào các đối tượng, có cần thiết hay không.

Yêu cầu	Sự miêu tả
sort(function(a, b) {...})	Xác định hàm sắp xếp tùy chỉnh để xác định thứ tự của các phần tử mảng dựa trên tiêu chí cụ thể.
localeCompare()	So sánh hai chuỗi trong ngôn ngữ hiện tại, trả về một số cho biết chuỗi tham chiếu đến trước hay sau hay giống với chuỗi đã cho.
console.log()	Xuất thông tin ra bảng điều khiển, thường nhằm mục đích gỡ lỗi.

Giải thích chi tiết về sắp xếp đối tượng JavaScript

Các tập lệnh được cung cấp ở trên được thiết kế để sắp xếp một mảng các đối tượng JavaScript theo giá trị của thuộc tính chuỗi được gọi là last_nom. Trong ví dụ đầu tiên, chúng tôi sử dụng sort(function(a, b) {...}) phương thức, cho phép chúng ta xác định hàm sắp xếp tùy chỉnh. Hàm này so sánh last_nom thuộc tính của từng đối tượng. Nếu đối tượng đầu tiên last_nom nhỏ hơn vật thứ hai last_nom, nó trả về -1, cho biết đối tượng đầu tiên sẽ xuất hiện trước đối tượng thứ hai. Nếu đối tượng đầu tiên last_nom lớn hơn, nó trả về 1, nghĩa là đối tượng đầu tiên sẽ xuất hiện sau đối tượng thứ hai. Nếu chúng bằng nhau, nó trả về 0, cho biết vị trí của chúng sẽ không thay đổi.

Tập lệnh thứ hai sử dụng cú pháp ES6 ngắn gọn hơn. Các localeCompare() phương pháp được sử dụng trong sort() chức năng so sánh các last_nom thuộc tính của các đối tượng. Phương thức này trả về một số cho biết một chuỗi có trước, sau hay giống với một chuỗi khác trong ngôn ngữ hiện tại. Các console.log() được sử dụng trong cả hai tập lệnh để xuất mảng đã sắp xếp ra bảng điều khiển để xác minh. Cả hai phương pháp đều sắp xếp hiệu quả mảng đối tượng theo last_nom thuộc tính, trình bày cách xử lý việc sắp xếp thuộc tính đối tượng trong JavaScript.

Sắp xếp một mảng đối tượng theo thuộc tính chuỗi trong JavaScript

JavaScript phía máy khách

var objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort(function(a, b) {
    if (a.last_nom < b.last_nom) {
        return -1;
    }
    if (a.last_nom > b.last_nom) {
        return 1;
    }
    return 0;
});

console.log(objs);

Sắp xếp một mảng đối tượng theo thuộc tính chuỗi bằng cú pháp ES6

JavaScript ES6

const objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));

console.log(objs);

Sắp xếp một mảng đối tượng theo thuộc tính chuỗi trong JavaScript

JavaScript phía máy khách

var objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort(function(a, b) {
    if (a.last_nom < b.last_nom) {
        return -1;
    }
    if (a.last_nom > b.last_nom) {
        return 1;
    }
    return 0;
});

console.log(objs);

Sắp xếp một mảng đối tượng theo thuộc tính chuỗi bằng cú pháp ES6

JavaScript ES6

const objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));

console.log(objs);

Các kỹ thuật nâng cao để sắp xếp các đối tượng trong JavaScript

Khi sắp xếp một mảng các đối tượng theo thuộc tính chuỗi trong JavaScript, điều cần thiết là phải hiểu sự phức tạp của sort() phương pháp. Theo mặc định, sort() phương thức sắp xếp các phần tử dưới dạng chuỗi. Điều này có thể dẫn đến kết quả không mong muốn khi xử lý các con số hoặc ký tự đặc biệt. Để đảm bảo sắp xếp chính xác, đặc biệt với thuộc tính chuỗi, bạn nên sử dụng hàm so sánh tùy chỉnh. Ngoài ra localeCompare(), một kỹ thuật hữu ích khác là xử lý phân biệt chữ hoa chữ thường. Theo mặc định, so sánh chuỗi của JavaScript phân biệt chữ hoa chữ thường, vì vậy 'a' sẽ được coi là nhỏ hơn 'A'. Để tránh điều này, bạn có thể chuyển đổi tất cả các chuỗi thành chữ thường hoặc chữ hoa trong hàm so sánh của mình.

Một khía cạnh quan trọng khác cần xem xét là sắp xếp theo nhiều thuộc tính. Ví dụ: nếu hai đối tượng có cùng last_nom giá trị, bạn có thể muốn sắp xếp thêm chúng theo first_nom. Điều này có thể đạt được bằng cách mở rộng chức năng so sánh tùy chỉnh để bao gồm các điều kiện bổ sung. Việc sắp xếp đa cấp như vậy đảm bảo rằng dữ liệu được sắp xếp một cách toàn diện, mang lại kết quả có ý nghĩa hơn. Bằng cách hiểu và áp dụng các kỹ thuật sắp xếp nâng cao này, bạn có thể xử lý các tình huống sắp xếp dữ liệu phức tạp hơn một cách hiệu quả trong JavaScript.

Các câu hỏi thường gặp về sắp xếp các đối tượng JavaScript

Làm cách nào để sắp xếp một mảng đối tượng theo thuộc tính chuỗi?
Sử dụng sort() phương pháp có chức năng so sánh tùy chỉnh, sử dụng localeCompare() để so sánh chuỗi.
Việc sắp xếp JavaScript có phân biệt chữ hoa chữ thường không?
Có, theo mặc định. Chuyển đổi chuỗi thành chữ thường hoặc chữ hoa trong hàm so sánh để tránh điều này.
Bạn xử lý việc sắp xếp theo nhiều thuộc tính như thế nào?
Mở rộng chức năng so sánh tùy chỉnh để bao gồm các điều kiện bổ sung để sắp xếp theo thuộc tính phụ.
Bạn có cần thêm một toString() phương pháp cho các đối tượng của bạn để sắp xếp?
Không, sử dụng chức năng so sánh tùy chỉnh là đủ.
làm gì localeCompare() LÀM?
Nó so sánh hai chuỗi trong miền địa phương hiện tại và trả về một số cho biết thứ tự của chúng.
Bạn có thể sắp xếp các đối tượng theo thuộc tính số bằng cách sử dụng cùng một phương pháp không?
Có, bạn cũng có thể tùy chỉnh hàm so sánh để xử lý các so sánh số.
Làm thế nào để bạn xuất ra mảng đã sắp xếp?
Sử dụng console.log() để in mảng đã sắp xếp ra bàn điều khiển để xác minh.
Tầm quan trọng của các giá trị trả về trong hàm so sánh là gì?
Chúng xác định thứ tự của các phần tử: -1 cho nhỏ hơn, 1 cho lớn hơn và 0 cho bằng nhau.

Kết thúc việc sắp xếp đối tượng trong JavaScript

Việc sắp xếp một mảng các đối tượng theo thuộc tính chuỗi trong JavaScript có thể đạt được một cách hiệu quả bằng cách sử dụng sort() phương pháp với một chức năng so sánh tùy chỉnh. Bằng cách tận dụng localeCompare() và xử lý phân biệt chữ hoa chữ thường, bạn có thể đảm bảo sắp xếp dữ liệu chính xác và có ý nghĩa. Hiểu các kỹ thuật này cho phép thao tác và trình bày dữ liệu tốt hơn, phục vụ các tình huống phức tạp hơn một cách dễ dàng. Ngoài ra, việc sắp xếp theo nhiều thuộc tính sẽ thêm một lớp phức tạp khác, làm cho kết quả được sắp xếp trở nên phù hợp và có tổ chức hơn.