5 mẹo khi sử dụng hàm sort() trong JavaScript | Học JS

Trong bài viết này, chúng ta sẽ tìm hiểu 5 mẹo khi sử dụng hàm sort() trong JavaScript. Hy vọng bạn sẽ thấy chúng hữu dụng.

Mảng JavaScript là một tập hợp có thứ tự các phần tử và nó có thể chứa bất kỳ loại dữ liệu nào. Mảng được tạo bằng dấu ngoặc vuông […] và cho phép các phần tử trùng lặp. Trong JavaScript, chúng ta có thể sắp xếp các phần tử của một mảng bằng hàm tích hợp có sẵn được gọi là sort().

>> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trình

1. Hàm sort() cho kiểu chuỗi

Hàm sort() sắp xếp các phần tử của mảng và trả về mảng đã sắp xếp.

let
 artists = [
    
'John White Abbott'
, 
    
'Leonardo da Vinci'
, 
    
'Charles Aubry'
, 
    
'Anna Atkins'
, 
    
'Barent Avercamp'
];

let
 sorted = artists.sort();

console
.log(
'Sort the artist names'
, sorted);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

Sort the artist names
[
"Anna Atkins"
, 
"Barent Avercamp"
, 
"Charles Aubry"
, 
"John White Abbott"
, 
"Leonardo da Vinci"
]
Code language:
 
JavaScript
 
(
javascript
)

Lưu ý rằng hàm sort() thực sự thay đổi mảng ban đầu và mảng sau khi sắp xếp.

console
.log(artists === sorted); 
Code language:
 
JavaScript
 
(
javascript
)

Và điều quan trọng bạn phải nhớ là:

“Với hàm sort(), thứ tự sắp xếp mặc định là tăng dần và các phần tử được chuyển thành chuỗi. Do đó, phương thức sort() mặc định không được sử dụng nếu kiểu dữ liệu của các phần tử khác nhau”.

Sắp xếp theo thứ tự giảm dần

Hàm sort() mặc định sắp xếp theo thứ tự tăng dần. Làm thế nào để sắp xếp theo thứ tự giảm dần? Hãy sử dụng hàm so sánh. Hàm so sánh giúp các phần tử sắp xếp theo thứ tự theo giá trị trả về của nó:

 
function
 
(a, b)
 
{
    
if
 (a > b) {
      
return
 
-1
;
    }
    
if
 (a < b) {
      
return
 
1
;
    }
     
    
return
 
0
;
 }
Code language:
 
PHP
 
(
php
)

Hàm so sánh trên giúp so sánh từng phần tử trong mảng để thực hiện sắp xếp giảm dần. Tất nhiên, cùng một hàm có thể được viết theo cách đơn giản hơn nhiều,

function
 (
a,b
) 
{
   
return
 a === b ? 
0
 : a > b ? 
-1
 : 
1
;
}
Code language:
 
JavaScript
 
(
javascript
)

Vì vậy, bây giờ, chúng ta hãy sắp xếp mảng artists theo thứ tự giảm dần.

artists.sort(
function
 (
a, b
) 
{
   
return
 a === b ? 
0
 : a > b ? 
-1
 : 
1
;
});

console
.log(
'Sort the artist names(Descending)'
, artists);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

Sort the artist names(Descending)
[
"Leonardo da Vinci"
, 
"John White Abbott"
, 
"Charles Aubry"
, 
"Barent Avercamp"
, 
"Anna Atkins"
]
Code language:
 
JavaScript
 
(
javascript
)

Sắp xếp số

let
 ages = [
2
, 
1000
, 
10
, 
3
, 
23
, 
12
, 
30
, 
21
];

ages.sort();
console
.log(ages);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
10
, 
1000
, 
12
, 
2
, 
21
, 
23
, 
3
, 
30
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

Kỳ lạ phải không? Đúng vì với sort() mặc định, các phần tử được chuyển đổi thành chuỗi và được so sánh theo thứ tự đơn vị mã UTF-16. Do đó, ’12’ được chuyển đổi đứng trước ‘2’ được chuyển đổi.

ages.sort(
function
(
a,b
) 
{
return
 a-b});
console
.log(ages);
Code language:
 
JavaScript
 
(
javascript
)

Lưu ý, hàm so sánh được truyền cho hàm sort(). Hàm so sánh trừ a khỏi b và kết quả sẽ là số dương, số âm hoặc 0.

Nếu bạn đang sử dụng ES6, bạn có thể viết nó bằng cách sử dụng hàm mũi tên như sau:

ages.sort(
(
a,b
) =>
 a-b);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
2
, 
3
, 
10
, 
12
, 
21
, 
23
, 
30
, 
1000
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

Sắp xếp số giảm dần là một thay đổi dễ dàng, thay vì a-b, hãy trả về b-a từ hàm so sánh.

ages.sort(
function
(
a,b
) 
{
return
 b-a})
console
.log(ages);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
1000
, 
30
, 
23
, 
21
, 
12
, 
10
, 
3
, 
2
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

2. Array.reverse() với sắp xếp

Array.reverse() là một hàm hữu ích khác để sắp xếp thứ tự các phần tử theo cách ngược lại.

let
 arr = [
'bob'
, 
'anna'
, 
'elsa'
, 
'marlon'
];
console
.log(arr.reverse());
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
"marlon"
, 
"elsa"
, 
"anna"
, 
"bob"
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

Như bạn thấy, các phần tử của mảng bây giờ đang theo thứ tự ngược lại. Điều này là tốt nhưng chúng ta thường sử dụng phương thức reverse() để sắp xếp.

let
 arr = [
'bob'
, 
'anna'
, 
'elsa'
, 
'marlon'
];
let
 sorted = arr.sort();  
let
 reversed = sorted.reverse();  

console
.log(reversed);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
"marlon"
, 
"elsa"
, 
"bob"
, 
"anna"
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

Nó hoạt động nhưng có thể dẫn đến một kết quả không mong muốn vì hàm reverse() không dùng để sắp xếp thứ tự, nó chỉ dùng để đảo ngược.

3. Sắp xếp ký tự không phải ASCII dễ dàng

Trong ứng dụng của bạn, bạn có thể gặp các chuỗi không phải tiếng Anh và được biểu diễn bằng các ký tự không phải ASCII. Sử dụng phương thức string localeCompare() trong hàm so sánh của bạn để sắp xếp chúng.

let
 items = [
'communiqué'
, 
'zèbre'
, 
'adieu'
, 
'éclair'
];

items.sort();
console
.log(
'Without localeCompare'
, items);

items.sort(
(
a,b
) =>
 a.localeCompare(b));
console
.log(
'With localeCompare'
, items);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

Without localeCompare 
[
"adieu"
, 
"communiqué"
, 
"zèbre"
, 
"éclair"
]
With localeCompare 
[
"adieu"
, 
"communiqué"
, 
"éclair"
, 
"zèbre"
]
Code language:
 
JavaScript
 
(
javascript
)

4. Sắp xếp một mảng đối tượng theo kiểu giá trị

Trong JavaScript, các đối tượng được sử dụng để lưu trữ nhiều giá trị như một cấu trúc dữ liệu phức tạp.

Một đối tượng được tạo bằng dấu ngoặc nhọn {…} và danh sách các thuộc tính. Thuộc tính là một cặp khóa-giá trị trong đó khóa phải là một chuỗi và giá trị có thể thuộc bất kỳ loại nào.

Sắp xếp một đối tượng chủ yếu là sắp xếp dựa trên các giá trị thuộc tính. Vì các giá trị có thể thuộc bất kỳ loại nào, hãy để chúng tôi hiểu các cách sắp xếp khác nhau với các ví dụ,

Một đối tượng user:

let
 users = [
    {
'name'
: 
'Joe'
, 
'address'
: 
'Huston'
, 
'dob'
:
'February 9, 1991'
, 
'income'
: 
87654
},
    {
'name'
: 
'Bob'
, 
'address'
: 
'London'
, 
'dob'
:
'July 1, 1986'
, 
'income'
: 
47974
},
    {
'name'
: 
'Carl'
, 
'address'
: 
'Bangalore'
, 
'dob'
:
'December 25, 1982'
, 
'income'
: 
97351
},
    {
'name'
: 
'Amanda'
, 
'address'
: 
'Lagos'
, 
'dob'
:
'March 19, 2001'
, 
'income'
: 
57753
},
];
Code language:
 
JavaScript
 
(
javascript
)

Sắp xếp theo tên

Sử dụng hàm so sánh để so sánh tên của từng đối tượng trong mảng.

 users.sort(
function
(
a, b
) 
{
    
let
 left = a.name;
    
let
 right = b.name;
    
return
 left === right ? 
0
 : left > right ? 
1
 : 
-1
;
  });

 
console
.table(users);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

Bạn biết đấy, phải làm gì để sắp xếp giảm dần, phải không? Vâng, một chút thay đổi trong chức năng so sánh như được hiển thị trước đó.

Sắp xếp theo lương

Giá trị thu nhập là những con số. Chúng tôi biết phải làm gì ở đây. Chúng ta sẽ so sánh giá trị thu nhập của các đối tượng.

 users.sort(
(
a,b
) =>
 (a.income - b.income));
 
console
.table(users);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

Sắp xếp theo ngày sinh (dob)

Người dùng có ngày sinh (thuộc tính dob) là một chuỗi. Chà, chúng ta không thể sắp xếp chúng như chuỗi, phải không? Chúng ta cần sắp xếp chúng giống như ngày tháng.

users.sort(
(
a,b
) =>
 (
new
 
Date
(b.dob) - 
new
 
Date
(a.dob)));
console
.table(users);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

5. Bạn cần phân loại không phân biệt chữ hoa chữ thường

Bạn có thể phải xử lý các phần tử mảng của các trường hợp khác nhau (lớn và nhỏ). Hàm sort() mặc định có thể không hữu ích. Đây là một mảng với các phần tử của các trường hợp hỗn hợp.

 
let
 names = [
'Bob'
, 
'bakshi'
, 
'adam'
, 
'Maya'
, 
'carl'
];
 names.sort();
 
console
.log(names);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
"Bob"
, 
"Maya"
, 
"adam"
, 
"bakshi"
, 
"carl"
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

Kết quả trên thực sự đúng khi so sánh xảy ra theo thứ tự đơn vị mã UTF-16. Tuy nhiên, bạn có thể muốn nó theo thứ tự sau.

"adam"
, 
"bakshi"
, 
"Bob"
, 
"carl"
, 
"Maya"
Code language:
 
JavaScript
 
(
javascript
)

Sử dụng hàm so sánh và so sánh các phần tử với toUpperCase() để so sánh không phân biệt chữ hoa chữ thường.

names.sort(
function
 (
a, b
) 
{
    
let
 left = a.toUpperCase();
    
let
 right = b.toUpperCase();

    
return
 (left === right) ? 
0
 : left > right ? 
1
 : 
-1
;
  });
console
.log(names);
Code language:
 
JavaScript
 
(
javascript
)

Kết quả:

[
"adam"
, 
"bakshi"
, 
"Bob"
, 
"carl"
, 
"Maya"
]
Code language:
 
JSON / JSON with Comments
 
(
json
)

Kết luận

Có một số điểm lưu ý khi sử dụng hàm sort() trong JavaScript:

• Hàm sort() rất dễ sử dụng, mặc định sắp xếp các phần tử của mảng theo thứ tự tăng dần bằng cách chuyển đổi chúng thành chuỗi
• Không sử dụng hàm reverse() để sắp xếp. Nó có thể dẫn đến kết quả không mong muốn
• Chúng ta có thể sử dụng hàm localeCompare() để sắp xếp các ký tự không phải ASCII
• Sắp xếp một mảng đối tượng cần sắp xếp trên nhiều kiểu dữ liệu khác nhau
• Phân loại không phân biệt chữ hoa chữ thường có thể được yêu cầu trong một số trường hợp

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Chia sẻ

Bài viết liên quan