Hướng dẫn sắp xếp một Array Objects trong JavaScript
Nếu bạn đang có array object bạn cần để sắp xếp theo một thứ tự cụ thể, bạn có thể sẽ bị “cám dỗ” tìm đến thư viện JavaScript. Tuy nhiên, trước khi bạn làm như vậy, bạn có thể thực hiện sorting rất đầy đủ và gọn gàng với hàm Array.sort sẵn có. Trong bài viết này, tôi sẽ cho bạn thấy cách sắp xếp array objects trong JavaScript mà không cần lo nghĩ.
Sắp xếp Array cơ bản
By default, the JavaScript Array.sort function converts each element in the array to be sorted, into a string, and compares them in Unicode code point order.
Theo mặc định, hàm Array.sort trong JavaScript chuyển đổi mỗi phần tử trong array để có thể sắp xếp được, thành string, và so sánh chúng theo thứ tự Unicode code point.
|
1
2
3
4
5
6
7
|
const foo = [ 9 , 2 , 3 , 'random' , 'panda' ] ;
foo . sort ( ) ; // returns [ 2, 3, 9, 'panda', 'random' ]
const bar = [ 4 , 19 , 30 , function ( ) { } , { key : 'value' } ] ;
bar . sort ( ) ; // returns [ 19, 30, 4, { key: 'value' }, [Function] ]
|
Có thể bạn đang tự hỏi tại sao 30 đến trước 4… không logic quá nhỉ? Well, thật ra có logic đó. Việc này xảy ra khi mỗi phần tử trong array trước hết được chuyển thành string, và ”30” đến trước “4” theo thứ tự Unicode.
Bạn cũng nên biết rằng không như những hàm array khác trong JavaScript, Array.sort thật sự có thay đổi, hoặc gây đột biến đến các array mà nó sắp xếp.
|
1
2
3
4
5
|
const baz = [ 'hello world' , 31 , 5 , 9 , 12 ] ;
baz . sort ( ) ; // baz array is modified
console . log ( baz ) ; // shows [12, 31, 5, 9, "hello world"]
|
Để tránh trường hợp này xảy ra, bạn có thể tạo instance array mới để được sắp xếp, và thay vào đó chỉnh sửa lên instance này.
|
1
2
3
4
5
6
|
const baz = [ 'hello world' , 31 , 5 , 9 , 12 ] ;
const newBaz = baz . slice ( ) . sort ( ) ; // new instance of baz array is created and sorted
console . log ( baz ) ; // "hello world", 31, 5, 9, 12]
console . log ( newBaz ) ; // [12, 31, 5, 9, "hello world"]
|
Thử xem
JS Bin on jsbin.com
Nếu chỉ dùng Array.sort, bạn sẽ không thể nào tận dụng được hết tất cả chức năng sẵn có khi sắp xếp một array objects. Thật may mắn thay, Hàm này còn có thể tiếp nhận tham số compareFunction tùy chỉnh, khiến các phần tử trong array được sắp xếp theo giá trị được trả lại từ hàm so sánh.
Dùng hàm so sánh để sắp xếp
Giả sử như a và b là hai phần tử được so sánh bằng hàm so sánh. Nếu hàm so sánh có giá trị được trả lại:
- Ít hơn 0 — a đứng trước b
- Lớn hơn 0 — b đứng trước a
- bằng 0 — a và b vẫn giữ nguyên
Hãy nhìn vào ví dụ đơn giản với array số sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const arr = [ 1 , 2 , 30 , 4 ] ;
function compare ( a , b ) {
let comparison = 0 ;
if ( a > b ) {
comparison = 1 ;
} else if ( b > a ) {
comparison = - 1 ;
}
return comparison ;
}
arr . sort ( compare ) ;
// => 1, 2, 4, 30
|
Kết quả trên có thể được refactor một phần để nhận được giá trị kết quá bằng cách trừ a với b;
|
1
2
3
4
5
|
function compare ( a , b ) {
return a - b ;
}
|
Từ đó trở thành ứng viên hoàn hảo cho hàm arrow:
|
1
2
3
|
arr . sort ( ( a , b ) = > a - b ) ) ;
|
Sắp xếp một array object trong JavaScript
Giờ đây, hãy nhìn vào cách sắp xếp một array object. Ta cùng nhìn vào một array nhạc cụ:
|
1
2
3
4
5
6
7
|
const bands = [
{ genre : 'Rap' , band : 'Migos' , albums : 2 } ,
{ genre : 'Pop' , band : 'Coldplay' , albums : 4 } ,
{ genre : 'Rock' , band : 'Breaking Benjamins' , albums : 1 }
] ;
|
Chúng ta có thể sử dụng hàm so sánh sau để sắp xếp array object này theo từng thể loại:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function compare ( a , b ) {
// Dùng toUpperCase() để không phân biệt ký tự hoa thường
const genreA = a . genre . toUpperCase ( ) ;
const genreB = b . genre . toUpperCase ( ) ;
let comparison = 0 ;
if ( genreA > genreB ) {
comparison = 1 ;
} else if ( genreA < genreB ) {
comparison = - 1 ;
}
return comparison ;
}
bands . sort ( compare ) ;
/* returns [
{ genre: 'Pop', band: 'Coldplay', albums: 4 },
{ genre: 'Rap', band: 'Migos', albums: 2 },
{ genre: 'Rock', band: 'Breaking Benjamins', albums: 1 }
] */
|
Để đảo ngược thứ tự sắp xếp, bạn chỉ việc đảo ngược giá trị trả lại từ hàm so sánh:
|
1
2
3
4
5
6
7
8
|
function compare ( a , b ) {
. . .
//nghịch đảo giá trị trả lại bằng cách nhân với -1
return comparison * - 1 ;
}
|
Thử xem
JS Bin on jsbin.com
Tạo hàm sắp xếp dynamic
Cuối cùng, chúng ta hãy cùng tạo hàm so sánh “động”, mà bạn có thể sử dụng để sắp xếp array objects, giá trị của những object này có thể là chuỗi hoặc số. Hàm này có hai tham số — key để sắp xếp theo đó, và thứ tự của kết quả (i.e. tăng dần hay giảm dần).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
const bands = [
{ genre : 'Rap' , band : 'Migos' , albums : 2 } ,
{ genre : 'Pop' , band : 'Coldplay' , albums : 4 , awards : 13 } ,
{ genre : 'Rock' , band : 'Breaking Benjamins' , albums : 1 }
] ;
// hàm cho sắp xếp động
function compareValues ( key , order = 'asc' ) {
return function ( a , b ) {
if ( ! a . hasOwnProperty ( key ) || ! b . hasOwnProperty ( key ) ) {
// không tồn tại tính chất trên cả hai object
return 0 ;
}
const varA = ( typeof a [ key ] === 'string' ) ?
a [ key ] . toUpperCase ( ) : a [ key ] ;
const varB = ( typeof b [ key ] === 'string' ) ?
b [ key ] . toUpperCase ( ) : b [ key ] ;
let comparison = 0 ;
if ( varA > varB ) {
comparison = 1 ;
} else if ( varA < varB ) {
comparison = - 1 ;
}
return (
( order == 'desc' ) ? ( comparison * - 1 ) : comparison
) ;
} ;
}
|
Và đây là cách dùng:
|
1
2
3
4
5
6
7
8
9
10
|
// array được sắp xếp theo band nhạc, mặc định theo thứ tự tăng dần
bands . sort ( compareValues ( 'band' ) ) ;
// array được sắp xếp theo band nhạc, thứ tự giảm dần
bands . sort ( compareValues ( 'band' , 'desc' ) ) ;
// array được sắp xếp theo album, thứ tự tăng dần
bands . sort ( compareValues ( 'albums' ) ) ;
|
Thử xem
JS Bin on jsbin.com
Ở đoạn code bên trên, method hasOwnProperty được sử dụng để kiểm tra xem liệu tính chất định sẵn có được xác định trên object hay không, và có thừa hưởng qua chuỗi nguyên mẫu (prototype chain) hay không hàm này trả giá trị 0, khiến thứ tự sắp xếp giữ nguyên.
Toán tử typeof cũng được sử dụng để kiểm tra kiểu dữ liệu của giá trịnh của tính chất. Như vậy, hàm có thể xác định cách sắp xếp array phù hợp. Ví dụ, nếu giá trị của tính chất định sẵn là một string, một method toUpperCase sẽ được sử dụng để chuyển đổi tất cả ký tự trong đó thành uppercase, vì vậy khi sắp xếp, các ký tự hoa thường được đánh giá không phân biệt.
Bạn cũng có thể điều chỉnh hàm trên để chứa các kiểu dữ liệu khác, và bất kỳ đặc điểm đặc thù nào mà script cần.
Kết
Tuy nhiều thư viện JavaScript cung cấp khả năng sắp xếp động (Underscore.js, Lodash và Sugar) như đã đã giới thiệu, nhưng tự mình làm cũng đâu có khó lắm đâu.
Sitepoint
Có thể bạn chưa biết:
- Đăng nhập không cần password, tại sao không?
- Trò đùa với package del (npm)
- Hướng dẫn sử dụng phần mềm subversion (svn) toàn tập
- Mobile marketing là gì ?
- Implement bài toán duyệt cây nhị phân với Rust
- API là gì? Vì sao API có ý nghĩa sống còn với cả thế giới điện toán?
- in dễ dàng, mọi lúc, mọi nơi với Google Cloud Print
- Tạo file cấu hình để cài đặt chart vừa cài vào hệ thống SugarCRM
- Blockchain thực sự hoạt động như thế nào?
- Tại sao Nodejs chạy nhanh hơn Apache?
- Cấm truy cập danh mục file và thư mục trên web server
- Web developer, HTTP/2 ảnh hưởng tới công việc của bạn như thế nào?
DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...
Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>
