Trong bài này chúng ta sẽ tìm hiểu hàm sắp xếp 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ẽ đưa ra kết quả sắp xếp đó vào một mảng mới
Nội dung chính Hiển thị
- 1. Hàm sắp xếp trong javascript là gì?
- 2. Các ví dụ về hàm sắp xếp mảng trong javascript
- Video learning setting per day
- Sử dụng sort[] có sự phân biệt chữ hoa và thông thường
- Sắp xếp số mảng JavaScript
- Sắp xếp một mảng với định dạng Date
- Sắp xếp mảng đối tượng javascript theo khóa
- Sắp xếp mảng đối tượng javascript theo nhiều khóa
Bài viết này đã được đăng tại freetuts. net , không được sao chép 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ể truy cập vào quá trình sắp xếp bằng cách truyền vào nó một hàm gọi lại. Trước khi vào học cú pháp thì hãy xem ví dụ dưới đây
mảng. loại[]
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 sắp xếp trong javascript là gì?
Hàm sort là một phương thức thuộc mảng đối tượng trong javascript, được xếp chồng lên nhau 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 hàm gọi lại
- Mặc dù xá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 sắp xếp phương thức 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 chính xác [ví dụ 20 và 100 thì 20 sẽ lớn hơn 100 vì 2 > 1]
- Bạn có thể giải quyết vấn đề này bằng cách truyền tham số là một mảng so sánh
- Hàm sắp xếp sẽ làm thay đổi mảng ban đầu
Cú pháp sắp xếp javascript như sau
Bài viết này đã được đăng tại [free tuts. mạng lưới]
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]in which.
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange3 is an tham số không bắt buộc. Đây là một chức năng gọi lại được sử dụng để quyết định thứ tự sắp xếp của các phần tử trong mảng. Hai tham số
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange4 và
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange5 đại diện cho hai phần tử liền 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 gọi lại trả về số lớn hơn 0 thì
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange
5 sẽ đứng trướcconst fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange
4 - Nếu hàm gọi lại trả về số bé hơn hoặc bằng 0 thì thứ tự được giữ nguyên, tức là
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange
4 sẽ đứng trướcconst fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange
5
2. Các ví dụ về hàm sắp xếp mảng 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 theo số
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]0Như bạn đã thấy, kết quả trả về là sai, do hàm sắp xếp nó hiểu giữa hai số 3 và 10 nên 3 lớn hơn 1, vì vậy 3 sẽ đứng sau 10
Để giải quyết, ta sẽ sử dụng chức năng gọi lại như sau
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]1Ví dụ 3. Use function sort to so sánh một mảng với các phần tử là các chuỗi
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]2Ví dụ 4. Use tham số so sánhFn
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]3Như vậy là mình đã hướng dẫn hoàn thành cách sử dụng hàm sắp xếp trong javascript để sắp xếp các 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 bài viết
Video learning setting per day
Trong bài viết này, chúng ta sẽ xem xét các trường hợp sử dụng biến phổ biến nhất cho phương thức
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]00 và cách chúng ta có thể sử dụng tối đa sức mạnh của nóĐây là bài viết số 41 của Series - mục đích viết javascript giúp các bạn có thể tiết kiệm được nhiều thời gian để làm các công 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 vấn đề khó hơn
Hôm nay bài viết có thể là tôi khó có thể viết tốt hơn là tác giả, bạn muốn đọc vui lòng truy cập liên kết gốc bên 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
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]01 Mảng phương thức . Các phương pháp // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]01 sắp xếp các yếu tố của một mảng và trả về các mảng 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 làm thế nào chúng ta có thể sử dụng sức mạnh của nó một cách tối đa về // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]01Trướ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 chuỗi mảng đơn giản bằng cách sử dụng một phương thức mảng
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]01 mà không có hàm như sau// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]9Giảm dần [Z đến A]. Để sắp xếp các chuỗi mảng theo thứ tự giảm dần, chúng ta có thể sử dụng phương thức String
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]05 như sauconst fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange1
Sử dụng sort[] có sự phân biệt chữ hoa và thông 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
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange2
Tăng dần [aA đến zZ]. Đó là một sơ đồ nếu bạn không biết có thể đi tìm rất mệt mỏi, để giải quyết vấn đề đó thì một giải pháp được đưa ra đó là chuyển tất cả các
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]06 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// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]0Hoặc một giải pháp khác
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]1Sắp xếp số mảng JavaScript
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]2Trong 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,
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]07 sẽ đứng trước // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]08, khi mà đáng ra // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]07 nằm ở đó . Điều này xảy ra bởi vì các phần tử của mảng được sắp xếp theo 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ã // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]10. 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 thành chuỗi, nên // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]11 đứng trước // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]12 theo thứ tự UnicodeGiải pháp 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
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]3Giải pháp sắp xếp giảm dần. To sort an array number theo thứ tự giảm dần, chúng ta có thể chỉ cần thay đổi
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]13 như sau// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]4Sắp xếp một mảng với định dạng Date
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]5Trong ví dụ trên, chúng ta có thể thấy rằng chuỗi ngày
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]14 đến trước // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]15 đó không phải là kết quả chính xác. Điều này xảy ra bởi vì lý do tương tự khi sắp xếp các mảng số, nơi mà chúng tôi đã tìm thấy // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]07 trước đây // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]08 khi sử dụng sắp xếp mặc địnhTăng dần Để sắp xếp đúng một chuỗi ngày, chúng ta có thể tạo một đối tượng
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]18 bằng cách chuyển chuỗi ngày thành // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]19 bên trong hàm so sánh như sau// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]6dần dần. Đối với thứ tự giảm dần, chúng ta có thể chỉ cần thay đổi như sau
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]7Sắp xếp mảng đối tượng javascript theo khóa
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
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]8Đó là thứ 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 thứ tự giảm dần
dần dần. Đối với logic thứ tự giảm dần, chúng ta chỉ cần thay đổi
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]13 trong hàm so sánh sắp xếp như// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]9Sắp xếp mảng đối tượng javascript theo nhiều khóa
Tăng dần. Giả sử chúng ta có một mảng như thế này
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange0
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
// Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]21 theo thứ tự tăng dần, sau đó thêm một điều kiện nữa đó là // Functionless
array.sort[]
// Arrow function
array.sort[[firstEl, secondEl] => { .. } ]
// Compare function
array.sort[compareFn]
// Inline compare function
array.sort[function compareFn[firstEl, secondEl] { .. }]22 tăng dần theo thứ tự. Vì vậy, kết qủa sẽ như thế nàyBạ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
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange1
// Đầu ra giống như trong bảng trên Hoặc, bạn cũng có thể viết điều này trong một dòng như
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort[]; // Apple,Banana,Mango,Orange2
and results does not have anything change
Tóm tắt
Bài viết này thật ra nó không mới nên 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 sắp xếp trong mảng. 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 ý kiến hơn tại bài viết gốc. Chúc các bạn đạo code giỏi hơn nữa. ]