Sắp xếp phần tử trong mảng JavaScript (sort) | Laptrinhcanban.com

Sắp xếp phần tử trong mảng JavaScript (sort)

Bạn có biết sau khi tạo xong một mảng, bạn có thể tự do sắp xếp phần tử trong mảng JavaScript theo thứ tự tăng dần, giảm dần hoặc là theo một điều kiện tuỳ ý không? Hãy tìm hiểu cách sắp xếp phần tử trong mảng JavaScript bằng phương thức sort() thông qua bài học này nhé.

Chúng ta có 3 phương pháp để sắp xếp phần tử trong mảng JavaScript như sau:

  • Sắp xếp phần tử trong mảng JavaScript theo thứ tự tăng dần
  • Sắp xếp phần tử trong mảng JavaScript theo thứ tự giảm dần dần
  • Sắp xếp phần tử trong mảng JavaScript theo điều kiện tuỳ chỉnh

Phương thức sort() trong JavaScript

sort() là một phương thức của đối tượng mảng trong JavaScript, có tác dụng sắp xếp các phần tử trong mảng theo thứ tự tăng hoặc giảm, hoặc là theo một điều kiện nào đó. Phép sắp xếp này sẽ làm thay đổi mảng ban đầu.

Phương thức sort() trong JavaScript

Chúng ta sử dụng phương thức sort() trong JavaScript với cú pháp cơ bản như sau.

arr.sort()

Phương thức sort() sẽ trả về mảng ban đầu đã được sắp xếp lại theo thứ tự tăng dần. Lưu ý là với cú pháp cơ bản của sort() thì chỉ có thể sắp xếp mảng theo thứ tự tăng dần mà thôi.

Trong trường hợp chúng ta muốn sắp xếp mảng theo thứ tự giảm dần, hoặc là theo một điều kiện nào đó, hãy dùng sort() với cú pháp kết hợp callback function như sau:

arr.sort( callbackFn (a, b))

Trong đó callbackFN là hàm callback sẽ nhận lần lượt các cặp giá trị ab từ mảng ban đầu và tiến hành sắp xếp theo điều kiện được viết trong các xử lý trong nó. Chúng ta sẽ cùng làm rõ chúng ở các phần dưới đây.

Sắp xếp phần tử trong mảng JavaScript theo thứ tự tăng dần

Như Kiyoshi đã giới thiệu ở trên thì cú pháp cơ bản của phương thức sort() sẽ giúp chúng ta Sắp xếp phần tử trong mảng JavaScript theo thứ tự tăng dần.

Ví dụ cụ thể, chúng ta sắp xếp phần tử trong mảng như sau:

let myarray = ['red', 'blue', 'yellow', 'black'];
myarray.sort();

console.log(myarray);
//>[ 'black', 'blue', 'red', 'yellow' ]

Lại nữa, do phương thức sort() trực tiếp làm thay đổi mảng ban đầu, nên tất cả các biến nếu đang tham chiếu mảng này cũng sẽ bị thay đổi giá trị theo. Ví dụ:

let myarray = ['red', 'blue', 'yellow', 'black'];

let a = myarray;
console.log(a);//>[ 'red', 'blue', 'yellow', 'black' ]

myarray.sort();

console.log(a);//>[ 'black', 'blue', 'red', 'yellow' ]

Ngoài ra, chúng ta cũng cần lưu ý khi sử dụng phương thức sort() để sắp xếp mảng chứa phần tử thuộc kiểu số. Do sort() hoạt động theo kiểu lấy các phần tử trong mảng dưới dạng chuỗi và đem đi sắp xếp, do đó các số nếu có trong mảng cũng sẽ được chuyển sang chuỗi trước khi được sắp xếp.

Do phép sắp xếp lúc này không phải là giữa số với số, mà biến thành giữa chuỗi với chuỗi, nên kết quả sắp xếp của mảng chứa số có thể không theo ý muốn của chúng ta.

Ví dụ, việc sắp xếp các số trong mảng sau có thể được thực hiện suôn sẻ bởi sort():

let myarray = [5,2,3,1,4];
myarray.sort();

console.log(myarray);//>[ 1, 2, 3, 4, 5 ]

Tuy nhiên nếu trong mảng tồn tại số lớn hơn 2 chữ số, thì kết quả phép sắp xếp sẽ không tuân theo thứ tự dãy số tự nhiên như sau:

let myarray = [5,12,3,1,4];
myarray.sort();

console.log(myarray);//>[ 1, 12, 3, 4, 5 ]

Để có thể tiến hành sắp xếp các số trong mảng JavaScript một cách tự nhiên, chúng ta cần phải thêm các xử lý khác mà Kiyoshi sẽ hướng dẫn ở các phần tiếp theo.

Sắp xếp phần tử trong mảng JavaScript theo điều kiện chỉ định.

Như Kiyoshi đã giới thiệu ở trên thì bằng việc sử dụng sort() với callback function thì chúng ta có thể tuỳ ý chỉ định điều kiện sắp xếp trong mảng ban đầu.

Bạn nào chưa hiểu rõ về callback function có thể tham khảo bài viết sau đây:

Nhắc lại một chút thì cú pháp sử dụng sort() với hàm callback sẽ là:

arr.sort( callbackFn (a, b))

Hàm callback sẽ nhận cặp giá trị a, b được lấy ra lần lượt từ trong mảng ban đầu làm đối số của nó. Và sau đó, nó sẽ thực hiện việc sắp xếp theo các quy tắc sau đây:

  1. Nếu callbackFn (a, b) trả về giá trị nhỏ hơn 0 (ví dụ như -1) thì xếp b trước a
  2. Nếu callbackFn (a, b) trả về giá bằng 0 thì giữ nguyên
  3. Nếu callbackFn (a, b) trả về giá trị lớn hơn 0 (ví dụ như 1) thì xếp a trước b

Bằng việc áp dụng 3 quy tắc sắp xếp ở trên, chúng ta có thể tuỳ chỉnh viết xử lý trong callback function và trả về các giá trị lớn hơn, nhỏ hơn hoặc bằng 0 để tiến hành sắp xếp phần tử trong mảng theo ý muốn của mình. Hãy cùng tìm hiểu các ví dụ sau đây để hiểu rõ hơn nha.

Sắp xếp chuỗi trong mảng theo thứ tự tăng dần

Ý tưởng ở đây sẽ là:

  1. Lấy lần lượt các chuỗi trong mảng ban đầu, sau đó gán vào hai biến ab
  2. Dùng hàm callback để nhận hai giá trị này, sau đó so sánh a, b và trả về -1, 0 hoặc 1 trong các trường hợp
  3. So sánh kết quả của callback với chuỗi 0, và áp dụng 3 quy tắc ở trên để xếp vị trí cho a và b.
  4. Tiến hành sắp xếp cho tới khi lấy hết phần tử trong mảng.

Trước hết, chúng ta chuẩn bị một hàm callback có tác dụng trả về giá trị -1 , 0 hoặc 1 tuỳ vào kết quả so sánh giữa hai chuỗi ký tự truyền vào như sau:

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

Sau đó chúng ta dùng hàm callback này với phương thức sort() để sắp xếp chuỗi trong mảng theo thứ tự tăng dần như sau:

let myarray = ["Kiyoshi", "Honda", "Ajinomoto", "Suzuki"];
myarray.sort(function(a, b) {
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;
});
console.log(myarray); //>[ 'Ajinomoto', 'Honda', 'Kiyoshi', 'Suzuki' ]

Sắp xếp phần tử trong mảng chứa các số theo thứ tự tăng dần trong JavaScript

Khi sắp xếp phần tử trong mảng chứa các số theo thứ tự tăng dần trong JavaScript, do với số chúng ta có thể sử dụng hiệu giữa chúng để so sánh xem số nào lớn hơn, nên chúng ta không cần phải sử dụng tới hàm callback giống như trong trường hợp với chuỗi ở trên, mà trực tiếp trả về hiệu giữa chúng trong hàm callback.

Ý tưởng ở đây sẽ là:

  1. Lấy lần lượt các số trong mảng ban đầu, sau đó gán vào hai biến ab
  2. Dùng hàm callback để nhận hai giá trị này, sau đó tính toán và trả về hiệu của a và b
  3. So sánh kết quả của callback với số 0, và áp dụng 3 quy tắc ở trên để xếp vị trí cho a và b.
  4. Tiến hành sắp xếp cho tới khi lấy hết phần tử trong mảng.

Trước hết, chúng ta chuẩn bị một hàm callback có tác dụng trả về hiệu của hai số được truyền vào:

(function (a, b) {
return a - b;
})

Sau đó chúng ta dùng hàm callback này với phương thức sort() để sắp xếp số trong mảng theo thứ tự tăng dần như sau:

let myarray = [5,12,3,1,4];
myarray.sort(function(a, b) {
return a - b;
});
console.log(myarray); //>[ 1, 3, 4, 5, 12 ]

Sắp xếp phần tử trong mảng JavaScript theo độ dài phần tử

Trong bài trước chúng ta đã biết sử dụng phương thức length để tìm độ dài ( số ký tự) của một chuỗi ký tự rồi. Bằng cách sử dụng length trong hàm callback, chúng ta có thể tiến hành Sắp xếp phần tử trong mảng JavaScript theo độ dài phần tử như sau:

Trước hết là chuẩn bị hàm callback có tác dụng so sánh độ dài chuỗi và trả về hiệu độ dài như sau:

(function(a, b) {
return a.length - b.length;
})

Sau đó chúng ta dùng hàm callback này với phương thức sort() để Sắp xếp phần tử trong mảng JavaScript theo độ dài phần tử như sau:

let myarray = ["Kiyoshi", "Honda", "Ajinomoto", "Suzuki"];
myarray.sort(function(a, b) {
return a.length - b.length;
});
console.log(myarray); //>[ 'Honda', 'Suzuki', 'Kiyoshi', 'Ajinomoto' ]

Sắp xếp phần tử trong mảng JavaScript theo giá trị tuyệt đối của phần tử trong mảng

Chúng ta cần sử dụng hàm Math.abs() để tìm giá trị tuyệt đối của phần tử, và áp dụng nó trong callback khi sử dụng sort() để sắp xếp phần tử trong mảng JavaScript theo giá trị tuyệt đối của phần tử trong mảng như sau.

Trước hết là chuẩn bị hàm callback có tác dụng so sánh giá trị tuyệt đối giữa 2 phần tử và trả về hiệu độ dài như sau:

(function(a, b) {
return Math.abs(a) - Math.abs(b);
})

Sau đó chúng ta dùng hàm callback này với phương thức sort() để Sắp xếp phần tử trong mảng JavaScript theo độ dài phần tử như sau:

let myarray = [-5,12,-3,1,-4];
myarray.sort(function(a, b) {
return Math.abs(a) - Math.abs(b);
});
console.log(myarray); //> 1, -3, -4, -5, 12 ]

Sắp xếp phần tử trong mảng JavaScript theo thứ tự giảm dần

Để sắp xếp phần tử trong mảng JavaScript theo thứ tự giảm dần, chúng ta cũng sử dụng tới cú pháp của sort() với hàm callback như ở trên. Tuy nhiên chúng ta cần phải lưu ý chỉnh hàm callback để trả về giá trị ngược lại so với khi sắp xếp thứ tự tăng dần. Ví dụ như khi sắp xếp tăng dần chúng ta trả về a - b thì khi sắp xếp giảm dần chúng ta phải trả về giá trị b - a.

Ví dụ cụ thể, chúng ta sắp xếp phần tử trong mảng JavaScript chứa dãy số theo thứ tự giảm dần như sau:

let myarray = [5,12,3,1,4];
myarray.sort(function(a, b) {
return b - a;
});
console.log(myarray); //>[ 12, 5, 4, 3, 1 ]

Hoặc là chúng ta Sắp xếp phần tử trong mảng JavaScript theo thứ tự giảm dần trong trường hợp mảng chứa các chuỗi như sau:

let myarray = ["Kiyoshi", "Honda", "Ajinomoto", "Suzuki"];
myarray.sort(function(a, b) {
if (a < b) {
return 1;
}
if (a > b) {
return -1;
}
return 0;
});
console.log(myarray); //>[[ 'Suzuki', 'Kiyoshi', 'Honda', 'Ajinomoto' ]

Ứng dụng phương thức sort() để đảo ngược phần tử trong mảng JavaScript

Phương thức sort() trong JavaScript ngoài công dụng sắp xếp phần tử trong mảng, thì chúng ta còn có thể sử dụng nó để đảo ngược phần tử trong mảng JavaScript. Ý tưởng ở đây là nếu chúng ta truyền vào hàm callback 2 phần tử và luôn trả về giá trị -1 , thì hai phần tử này sẽ luôn được tráo đổi vị trí cho nhau.

Ví dụ cụ thể:

let org_arr = [1, 2, 3, 4, 5];
org_arr.sort(function(a,) {
return -1;
})
console.log(org_arr); //>[ 5, 4, 3, 2, 1 ]

Và do chúng ta chỉ định kết quả trả về từ hàm callback luôn là -1 mà không phụ thuộc vào giá trị của biến truyền vào, nên chúng ta cũng có thể lược bỏ luôn cả 2 biến với cách viết như sau:

let org_arr = [1, 2, 3, 4, 5];
org_arr.sort(function() {
return -1;
})
console.log(org_arr); //>[ 5, 4, 3, 2, 1 ]

Bạn cũng có thể xem thêm các cách đảo ngược phần tử trong mảng JavaScript cơ bản và nâng cao khác tại bài viết sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sắp xếp phần tử trong mảng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.