Hướng dẫn dùng sorting 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




    var subject = ["php", "javascript", "css", "html"];
    document.getElementById["demo"].innerHTML = subject;

    function myFunction[] {
        subject.sort[];
        document.getElementById["demo"].innerHTML = subject;
    }

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

Run




    var subject = [4, 144, 25, 16];
    document.getElementById["demo"].innerHTML = subject;
    function compare[a, b] {
        return a - b;
    }
    function myFunction[] {
        subject.sort[compare];
        document.getElementById["demo"].innerHTML = subject;
    }

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é.

Nội dung chính

1. Hàm sort trong javascript là gì?
2. Các ví dụ hàm array sort trong javascript
1. Hàm sort trong javascript là gì?
2. Các ví dụ hàm array sort trong javascript
Video học lập trình mỗi ngày
Sử dụng sort[] có sự phân biệt chữ hoa và thường
Sort array number JavaScript
Sắp xếp một mảng chuỗi với định dạng Date
Sort object array javascript by key
Sort object array javascript by mutiple key

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

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ì?

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

var subject = ["php", "javascript", "css", "html"]; document.getElementById["demo"].innerHTML = subject; function myFunction[] { subject.sort[]; document.getElementById["demo"].innerHTML = subject; }

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

Run

var subject = [4, 144, 25, 16]; document.getElementById["demo"].innerHTML = subject; function compare[a, b] { return a - b; } function myFunction[] { subject.sort[compare]; document.getElementById["demo"].innerHTML = subject; }

Nội dung chính

1. Hàm sort trong javascript là gì?
2. Các ví dụ hàm array sort trong javascript
Video học lập trình mỗi ngày
Sử dụng sort[] có sự phân biệt chữ hoa và thường
Sort array number JavaScript
Sắp xếp một mảng chuỗi với định dạng Date
Sort object array javascript by key
Sort object array javascript by mutiple key

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

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ì?

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] { ... }]

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




    var subject = ["php", "javascript", "css", "html"];
    document.getElementById["demo"].innerHTML = subject;

    function myFunction[] {
        subject.sort[];
        document.getElementById["demo"].innerHTML = subject;
    }

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

Run




    var subject = [4, 144, 25, 16];
    document.getElementById["demo"].innerHTML = subject;
    function compare[a, b] {
        return a - b;
    }
    function myFunction[] {
        subject.sort[compare];
        document.getElementById["demo"].innerHTML = subject;
    }

Nội dung bài viết

Video học lập trình mỗi ngày

Trong bài viết này, chúng ta sẽ xem các trường hợp sử dụng phổ biến nhất cho phương thức Array sort[] và cách chúng ta có thể sử dụng tối đa sức mạnh của nó.

Đây là một bài viết 41 của Series - Mẹo viết javascript mục đích giúp các bạn có thể tiết kiệm được nhiều thời gian để làm các việc khác. Ngoài ra, bạn có thể học nâng cao hơn trong Series - Con đường kiến trúc sư ở đó tập trung nhiều vào xử lý các tình huống khó hơn.

Hôm nay bài viết có lẽ mà tôi khó có thể viết tốt hơn được tác giả, bạn muốn đọc vui lòng truy cập link gốc dưới bài viết, mục đích muốn chia sẻ một số trường hợp sử dụng phổ biến nhất cho sort[] phương thức Array trong JavaScript. Các phương pháp sort[] sắp xếp các yếu tố của một mảng và trả về mảng được sắp xếp. Thứ tự sắp xếp mặc định tăng dần và giảm dần. Trong bài viết này, bạn sẽ xem cách chúng ta có thể sử dụng sức mạnh của nó một cách tối đa về sort[].

Trước khi bắt đầu bạn cũng nên xem qua 10 tính năng phổ biến nhất của Array mà bất kỳ bạn nào cũng nên biết. Ok, đi thôi.

Tăng dần [A đến Z]:

Chúng ta có thể sắp xếp một mảng chuỗi đơn giản bằng cách sử dụng một phương thức mảng sort[] mà không có hàm như sau:

let fruits = ['Apples', 'Watermelon', 'Bananas', 'Cherries'];
fruits.sort[];    // 👈 default sort

console.log[ fruits ];
// ["Apples", "Bananas", "Cherries", "Watermelon"]
// A → B → C → W

Giảm dần [Z đến A]: Để sắp xếp mảng chuỗi theo thứ tự giảm dần, chúng ta có thể sử dụng phương thức String localeCompare[] như sau:

let fruits = ['Apples', 'Watermelon', 'Bananas', 'Cherries'];
fruits.sort[[a, b] => b.localeCompare[a]];

console.log[ fruits ];
// ["Watermelon", "Cherries", "Bananas", "Apples"]
// W → C → B → A

Sử dụng sort[] có sự phân biệt chữ hoa và thường

Trước tiên, chúng ta hãy xem điều gì sẽ xảy ra khi chúng ta sắp xếp mặc định cho một mảng có chứa cả phần tử chuỗi chữ thường và chữ hoa.

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort[]; 

console.log[ fruits ];
// ["Apples", "Bananas", "Watermelon", "cherries"]
// A → B → W → c
Như bạn có thể thấy đầu ra ở trên, với từ sắp xếp mặc định thì `Watermelon` bắt đầu bằng chữ hoa `W` sẽ đứng trước `cherries` bắt đầu bằng chữ thường là `c`. Điều này xảy ra vì các chuỗi được sắp xếp theo giá trị điểm mã `Unicode` của mỗi ký tự. Sử dụng `charCodeAt[]` chúng ta có thể nhận được đơn vị mã `UTF-16` cho mỗi ký tự và sau đó nhận thấy rằng: 

```js
'C'.charCodeAt[]   // 67
'W'.charCodeAt[]   // 87
'c'.charCodeAt[]   // 99

// 67 < 87 < 99
// C → W → c

Tăng dần [aA đến zZ]: Đó là một sơ hở nếu bạn không biết có thể đi tìm rất mệt, để giải quyết vấn đề đó thì một giải pháp được đưa ra đó là chuyển tất cả các String về chữ thường và sau đó chúng ta tiếp tục so sánh. Bạn có thể xem ví dụ dưới đây.

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort[[a, b] => a.toLowerCase[].localeCompare[b.toLowerCase[]]]; 

console.log[ fruits ];
// ["Apples", "Bananas", "cherries", "Watermelon"]
// A → B → c → W

Hoặc một giải pháp khác...

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort[[a, b] => a.localeCompare[b, 'en', { sensitivity: 'base' }]]; 

console.log[ fruits ];
// ["Apples", "Bananas", "cherries", "Watermelon"]

Sort array number JavaScript

let numbers = [4, 2, 5, 1, 3, 10];
numbers.sort[];    // 👈 default sort

console.log[ numbers ];
//  [1, 10, 2, 3, 4, 5]

Trong ví dụ trên, chúng ta có thể thấy rằng nếu chúng ta sử dụng một sắp xếp mặc định như ví dụ trên, chúng ta sẽ nhận được đầu ra không chính xác, 10 sẽ đứng trước 2, khi mà đáng ra 10 nằm ở vị trí cuối cùng. Điều này xảy ra vì các phần tử mảng được sắp xếp bằng cách chuyển đổi chúng thành chuỗi và so sánh các chuỗi theo thứ tự đơn vị mã UTF-16. Vì vậy, trong một sắp xếp số, 2 phải đứng trước 10, nhưng vì các số được chuyển đổi thành chuỗi, nên "10" đứng trước "2" theo thứ tự Unicode.

Giải pháp cho sắp xếp tăng dần: Chúng ta có thể sắp xếp một mảng số theo thứ tự tăng dần bằng cách sử dụng một hàm so sánh đơn giản như thế này

let numbers = [4, 2, 5, 1, 3, 10];
numbers.sort[[a, b] => a - b];   // 👈 compare function, simply return a - b

console.log[ numbers ];
// [1, 2, 3, 4, 5, 10]

Giải pháp cho sắp xếp giảm dần: Để sắp xếp một mảng số theo thứ tự giảm dần, chúng ta có thể chỉ cần hoán đổi a & b như sau:

let numbers = [4, 2, 5, 1, 3, 10];
numbers.sort[[a, b] => b - a];   // 👈 interchange `a` & `b` and return b - a

console.log[ numbers ];
// [10, 5, 4, 3, 2, 1]

Sắp xếp một mảng chuỗi với định dạng Date

// Date string in YYYY-MM-D format
let dates = [
  '2021-08-1',
  '2021-08-4',
  '2021-08-10',
  '2021-08-2'
];
dates.sort[]    // 👈 default sort

console.log[ dates ]
// ["2021-08-1", "2021-08-10", "2021-08-2", "2021-08-4"]

Trong ví dụ trên, chúng ta có thể thấy rằng chuỗi ngày "2021-08-10" đến trước "2021-08-2" đó không phải là kết quả chính xác. Điều này xảy ra vì lý do tương tự khi sắp xếp mảng số, nơi mà chúng tôi đã tìm thấy 10 trước đây 2 khi sử dụng sắp xếp mặc định.

Tăng dần Để sắp xếp đúng một mảng chuỗi ngày, chúng ta có thể tạo một đối tượng Date bằng cách chuyển chuỗi ngày vào new Date[] bên trong hàm so sánh như sau:

let dates = [ '2021-08-1', '2021-08-4', '2021-08-10', '2021-08-2' ];
dates.sort[[a, b] => new Date[a] - new Date[b]]  // 👈 using `Date` constructor here

console.log[ dates ]
// ["2021-08-1", "2021-08-2", "2021-08-4", "2021-08-10"]

Giảm dần: Đối với thứ tự giảm dần, chúng ta có thể chỉ cần hoán đổi như sau:

let dates = [ '2021-08-1', '2021-08-4', '2021-08-10', '2021-08-2' ];
dates.sort[[a, b] => new Date[b] - new Date[a]]  // 👈  here

console.log[ dates ]
// ["2021-08-10", "2021-08-4", "2021-08-2", "2021-08-1"]

Sort object array javascript by key

Chúng ta có thể sắp xếp một mảng các đối tượng theo một giá trị thuộc tính như sau:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples',  quantity: 10},
  {name: 'Grapes',  quantity: 2}
];

// Sort by the "quantity" property value
inventory.sort[[a, b] => a.quantity - b.quantity];  // 👈 here

console.log[ inventory ]
// Output
/*
[
  { "name": "Grapes",  "quantity": 2 },
  { "name": "Bananas", "quantity": 5 },
  { "name": "Apples",  "quantity": 10 }
]
*/

Đó là một sắp xếp cho thứ tự tăng dần và bạn cũng có thể làm ngược lại với chiều giảm dần.

Giảm dần: Đối với logic thứ tự giảm dần, chúng ta chỉ cần hoán đổi a & b trong hàm so sánh sắp xếp như:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples',  quantity: 10},
  {name: 'Grapes',  quantity: 2}
];

// Sort by the "quantity" property value
inventory.sort[[a, b] => b.quantity - a.quantity];  // 👈 interchange `a` & `b` here

console.log[ inventory ]
// Output
/*
[
  { "name": "Apples",  "quantity": 10 },
  { "name": "Bananas", "quantity": 5 },
  { "name": "Grapes",  "quantity": 2 }
]
*/

Sort object array javascript by mutiple key

Tăng dần: Giả sử chúng ta có một mảng như thế này:

let inventory = [
  {name:"Bananas", color:"Yellow", quantity:5},
  {name:"Apples", color:"Red", quantity:4},
  {name:"Apples", color:"Green", quantity:10},
  {name:"Grapes", color:"Green", quantity:2},
  {name:"Apples", color:"Yellow", quantity:6}
];

Yêu cầu của chúng tôi là:

Đầu tiên, chúng ta cần sắp xếp các giá trị có thuộc tính name theo thứ tự tăng dần, sau đó thêm một điều kiện nữa đó là quantity tăng dần tiếp theo. Vì vậy, kết qủa sẽ như thế này:

Bạn có thể làm theo nhiều cách nhưng có vẻ như cách này khá phổ biến nhất.

let inventory = [
  {name:"Bananas", color:"Yellow", quantity:5},
  {name:"Apples", color:"Red", quantity:4},
  {name:"Apples", color:"Green", quantity:10},
  {name:"Grapes", color:"Green", quantity:2},
  {name:"Apples", color:"Yellow", quantity:6}
];

// Sort by the "name" property value, then by "quantity"
inventory.sort[[a, b] => {
  let compareNames = a.name.localeCompare[b.name];
  let compareQuantity = a.quantity - b.quantity;

  // First compare using names
  // If values for "name" porperty for both a & b is same,
  // then compare by "quantity" property value
  return compareNames || compareQuantity;
}]

// Output is the same as shown in the above table Hoặc, bạn cũng có thể viết điều này trong một dòng như:

inventory.sort[[a, b] => a.name.localeCompare[b.name] || a.quantity - b.quantity];

và kết quả không có gì thay đổi.

Tóm lại

Bài viết này thật ra nó không mới so với nhiều bạn đã có kinh nghiệm với javascript rồi. Nhưng nó là một tài liệu tốt về cách sort trong array. Và đây là một bài viết được biên dịch lại từ bài viết gốc của tác giả Palash Mondal. Bạn có thể tham khảo hơn tại bài viết gốc. Chúc các bạn đạo code giỏi hơn nữa :]

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

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

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

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

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

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

Video học lập trình mỗi ngày

Sử dụng sort[] có sự phân biệt chữ hoa và thường

Sort array number JavaScript

Sắp xếp một mảng chuỗi với định dạng Date

Sort object array javascript by key

Sort object array javascript by mutiple key

Tóm lại

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề