Hướng dẫn sort trong javascript

Trong bài này chúng ta sẽ tìm hiểu hàm sort trong javascript, đây là hàm dùng để sắp xếp các phần tử trong chính mảng đó, đồng thời sẽ kết quả đã sắp xếp đó vào một mảng mới.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thứ tự sắp xếp mặc định được tính là tăng dần. Tuy nhiên, bạn có thể can thiệp vào quá trình sắp xếp bằng cách truyền vào nó một hàm callback. Trước khi đi vào học cú pháp thì hãy xem ví dụ dưới đây.

array.sort()

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// output: Array [1, 100000, 21, 30, 4]

1. Hàm sort trong javascript là gì?

Hàm sort là một method thuộc đối tượng array trong javascript, được đùng dể sắp xếp các phần tử trong mảng tăng dần hoặc giảm dần theo số thứ tự trong bảng mã ascii, hoặc theo quy tắc trong callback function.

• Mặc định các phần tử sẽ được sắp xếp theo bảng chữ cái với thứ tự tăng dần, điều này khiến phương thức sort sẽ sắp xếp các chuỗi rất chính xác. Tuy nhiên, khi sắp xếp các số sẽ không được chính xác (ví dụ 20 và 100 thì 20 sẽ lớn hơn 100 vì 2 > 1).
• Bạn có thể khắc phục điều này bằng việc truyền tham số là một mảng so sánh.
• Hàm sort sẽ làm thay đổi mảng ban đầu.

Cú pháp sort javascript như sau:

Bài viết này được đăng tại [free tuts .net]

// Functionless
array.sort()

// Arrow function
array.sort((firstEl, secondEl) => { ... } )

// Compare function
array.sort(compareFn)

// Inline compare function
array.sort(function compareFn(firstEl, secondEl) { ... })

Trong đó: compareFn là tham số không bắt buộc. Đây là một callback function dùng để quyết định thứ tự sắp xếp của các phần tử trong mảng. Hai tham số firstEl và secondEl đại diện cho hai phần tử kề nhau trong mảng, và ta sẽ sử dụng nó để quyết định cách sắp xếp.

• Nếu hàm callback trả về số lớn hơn 0 thì secondEl sẽ đứng trước firstEl.
• Nếu hàm callback trả về số bé hơn hoặc bằng 0 thì thứ tự được giữ nguyên, tức là firstEl sẽ đứng trước secondEl.

2. Các ví dụ hàm array sort trong javascript

Ví dụ 1: Trường hợp sắp xếp với chuỗi.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // Apple,Banana,Mango,Orange

Ví dụ 2: Trường hợp sắp xếp với số.

var score = [700, 8, 9, 10, 3];

console.log(score.sort());
// Keets Kết quả: [10, 3, 700, 8, 9]

Như bạn thấy, kết quả trả về là sai, bởi hàm sort nó hiểu giữa hai số 3 và 10 thì 3 lớn hơn 1, vì vậy 3 sẽ đứng sau 10.

Để khắc phục thì ta sẽ sử dụng callback function như sau:

var score = [700, 8, 9, 10, 3];

console.log(score.sort( (firstEl, secondEl) => {
    if (secondEl > firstEl){
        return -1;
    }
    else {
        return 0;
    }
} ));

// Kết quả: [3, 8, 9, 10, 700]

Ví dụ 3: Sử dụng hàm sort để so sánh một mảng với các phần tử là các chuỗi.

Run

Ví dụ 4: Sử dụng tham số compareFn.

Run

Như vậy là mình đã hướng dẫn xong cách sử dụng hàm sort trong javascript để sắp xếp mảng tăng dần trong javascript. Hẹn gặp lại các bạn ở các bài tiêp theo nhé.

• 1. Hàm sort() cho kiểu chuỗi
  • Sắp xếp theo thứ tự giảm dần
  • Sắp xếp số
• 2. Array.reverse() với sắp xếp
• 3. Sắp xếp ký tự không phải ASCII dễ dàng
• 4. Sắp xếp một mảng đối tượng theo kiểu giá trị
  • Sắp xếp theo tên
  • Sắp xếp theo lương
  • Sắp xếp theo ngày sinh (dob)
• 5. Bạn cần phân loại không phân biệt chữ hoa chữ thường
• Kết luận

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().

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); // returns true
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ó:

// A compare function
function (a, b) {
    if (a > b) {
      return -1;
    }
    if (a < b) {
      return 1;
    }
    // a must be equal to b
    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(); // Ascending
let reversed = sorted.reverse(); // Descending

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.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG