Chắc hẳn trong sự nghiệp lập trình viên/kỹ sư phần mềm/nhà phát triển/người dùng bàn phím chuyên nghiệp, bạn đã từng gặp phải tình huống phải sắp xếp một số loại dữ liệu hoặc thành phần giao diện người dùng. Trong hầu hết các trường hợp, nó khá đơn giản, nhưng đôi khi nó có thể là một nỗi đau thực sự. Trong bài viết này, tôi sẽ cố gắng giải thích cách sắp xếp hoạt động trong thế giới TypeScript và JavaScript, cho bạn thấy một số ví dụ thực tế và nói ngắn gọn về một số thư viện phổ biến có thể giúp việc sắp xếp dễ dàng hơn nhiều
sắp xếp cơ bản
Hãy bắt đầu với ví dụ cơ bản nhất và sắp xếp mảng các chuỗi
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[];
// -> ['Bravo', 'Lima', 'Tango', 'Zulu']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đó là cách đơn giản nhất để sắp xếp theo thứ tự bảng chữ cái một chuỗi các chuỗi theo thứ tự tăng dần. Thay vào đó, nếu chúng ta muốn sắp xếp nó từ Z đến A thì sao?
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Điều này thoạt nghe có vẻ khó hiểu [đã từng ở đó] nhưng hãy tin tôi, nó thực sự rất có ý nghĩa khi bạn hiểu nó
Cách thức hoạt động của chức năng so sánh
Hàm so sánh nhận hai đối số - phần tử hiện tại và phần tử tiếp theo. Nó phải trả về một số sẽ xác định cách sắp xếp các phần tử. Nguyên tắc chung là
- nếu bạn trả về một số lớn hơn 0 - phần tử
7 sẽ về đầu [sẽ nhận được số chỉ mục thấp hơn phần tửconst words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
8]const words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo'] - nếu bạn trả về một số nhỏ hơn 0 - phần tử
8 sẽ về đầu [sẽ nhận được số chỉ mục thấp hơnconst words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
7]const words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo'] - nếu bạn trả về 0 - các phần tử sẽ giữ nguyên vị trí
Với cách sắp xếp số đơn giản, chúng ta thậm chí có thể tiến thêm một bước và đơn giản hóa phương pháp so sánh
// Ascending order
const arr = [1, -6, 8, 20, 3, 3];
arr.sort[[a, b] => a - b];
// -> [-6, 1, 3, 3, 8, 20]
// Descending order
const arr = [1, -6, 8, 20, 3, 3];
arr.sort[[a, b] => b - a];
// -> [20, 8, 3, 3, 1, -6]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Hãy phân tích so sánh hai phần tử mảng đầu tiên
- trong ví dụ đầu tiên, chúng tôi thực hiện
1 đánh giá thành// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
2 - nghĩa là phần tử// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
7 phải ở trước phần tửconst words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
8 [const words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
5 phải ở trước// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
6]// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6] - trong ví dụ thứ hai, chúng tôi thực hiện
7 ước tính thành// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
8 - nghĩa là phần tử// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
8 phải ở trước phần tửconst words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
7 [const words = ['Tango', 'Zulu', 'Bravo', 'Lima']; words.sort[[a, b] => { if [b > a] return 1; if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
6 phải ở trước// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
5]// Ascending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => a - b]; // -> [-6, 1, 3, 3, 8, 20] // Descending order const arr = [1, -6, 8, 20, 3, 3]; arr.sort[[a, b] => b - a]; // -> [20, 8, 3, 3, 1, -6]
Sau đó, phương pháp
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn muốn tìm hiểu sâu hơn nữa - hãy xem giải thích tuyệt vời này về các thuật toán sắp xếp khác nhau
TIỀN BOA
Đáng để ghi nhớ.
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sắp xếp theo phương pháp const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
95
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Trong các ví dụ trước, chúng ta chỉ cần so sánh các chuỗi và trả về giá trị đúng để sắp xếp các chuỗi trong mảng. Nhưng có một cách tuyệt vời khác để làm điều đó, ngoài ra nó còn cho chúng ta thêm siêu năng lực. Tôi đang nói về phương pháp
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Giống như tôi đã đề cập trước khi
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Nhưng các siêu năng lực ở đâu, bạn hỏi?
địa phương
Nếu bạn đang xử lý nhiều ngôn ngữ trong ứng dụng/trang web của mình, thì điều quan trọng là phải chuyển ngôn ngữ của ngôn ngữ hiện tại khi bạn sử dụng tính năng sắp xếp, vì một số ký tự có vị trí khác trong bảng chữ cái
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tùy chọn
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
vỏ bọc
Bạn có thể chuyển một thuộc tính
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Giá trị số
Giả sử chúng ta muốn sắp xếp các chuỗi số - nếu chúng ta không chuyển thuộc tính
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ví dụ thực tế
Chúng ta đã đề cập đến lý thuyết [mà tôi hy vọng sẽ giúp bạn hiểu rõ hơn về cách hoạt động của tính năng sắp xếp], bây giờ hãy tập trung vào các ví dụ thực tế. Tôi muốn cho bạn thấy một số sẽ chỉ sử dụng phương thức gốc
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Sắp xếp một mảng các đối tượng
Giả sử chúng ta có một mảng các đối tượng [mỗi đối tượng sẽ đại diện cho một con chó] và chúng ta muốn sắp xếp các đối tượng này theo thứ tự bảng chữ cái theo thuộc tính
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Như bạn có thể thấy, điều này rất giống với sắp xếp chuỗi thông thường, điểm khác biệt duy nhất là chúng ta đang so sánh các thuộc tính cụ thể của các đối tượng
TIỀN BOA
Tất cả phụ thuộc vào sở thích của bạn [và có thể là tiêu chuẩn nhóm của bạn] nhưng bạn có thể làm cho chức năng sắp xếp ngắn hơn nữa
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sắp xếp dựa trên các giá trị khác nhau
Vì vậy, chúng tôi đã đề cập đến điều đó, nhưng nếu chúng tôi có hai con chó bulgie trong danh sách của mình thì sao?
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Như bạn có thể thấy, chúng tôi chỉ cần thêm một "nhánh" khác vào đây - nếu các giá trị được so sánh giống nhau, chúng tôi sẽ thêm một đường dẫn
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
TIỀN BOA
Đôi khi các chức năng sắp xếp của bạn có thể trở nên khá phức tạp, vì vậy sẽ rất hợp lý khi trích xuất chúng theo các phương thức của riêng chúng và chuyển chúng tới
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sắp xếp dựa trên mảng khác
Quay trở lại với những chú chó yêu quý của chúng ta, hãy tưởng tượng chúng ta muốn sắp xếp chúng theo
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Điều gì đã xảy ra ở đây? . Trong tình huống này, nếu chúng ta so sánh chỉ số của
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
thư viện bên ngoài
Ngoài các giải pháp vanilla JS/TS của bạn, còn có rất nhiều thư viện bên ngoài hiển thị API đẹp để giúp sắp xếp dễ dàng hơn. Dưới đây tôi sẽ cho bạn thấy các ví dụ từ hai trong số đó -
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
lodash
Lodash là một thư viện tiện ích JavaScript rất phổ biến. Nó có tất cả các loại phương pháp khác nhau giúp ích rất nhiều cho bạn trong các công việc hàng ngày của nhà phát triển. Nó cũng cho phép bạn sử dụng một số chức năng trợ giúp sắp xếp
sắp xếpBy
Phương thức này cho phép bạn sắp xếp các mảng đối tượng. Đầu ra hoàn toàn giống như trong phần
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đặt bởi
Phương thức này hầu như giống hệt với
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
sắp xếp nhanh
Đây là thư viện sắp xếp linh hoạt và dễ sử dụng với sự hỗ trợ của TypeScript. Nó có cách tiếp cận hơi khác so với lodash khi nói đến API. Hãy xem cách chúng ta có thể giải quyết vấn đề sắp xếp giống như chúng ta đã làm trước đây
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tất nhiên, cả hai thư viện được đề cập đều có nhiều tùy chọn và khả năng hơn. Ngoài ra, có rất nhiều thư viện khác giải quyết các vấn đề tương tự hoặc tương tự, chỉ kể tên một số -
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort[[a, b] => {
if [b > a] return 1;
if [b ['Zulu', 'Tango', 'Lima', 'Bravo']
Tóm lược
Tôi hy vọng bài viết này sẽ giúp bạn tự tin hơn khi sắp xếp trong Javascript và Typescript. Chúng tôi đã đi từ những điều cơ bản, qua các ví dụ phức tạp hơn và hoàn thành trên các thư viện bên ngoài có thể giúp chúng tôi thực hiện một số công việc. Tôi nghĩ bây giờ bạn đã sẵn sàng để. khắc phục vấn đề. [ý định chơi chữ ở cấp độ trò đùa của bố]