JavaScript sort ข้อมูลตัวเลข ไม่ถูกต้อง?

พอดีวันนี้ได้มีโอกาส นั่ง sort และ merge พวกข้อมูลจาก Array ก็เลยได้ไอเดีย นำมาเขียนเป็นบทความซะเลย เกี่ยวกับการ Sort ใน JavaScript

ปกติเราสามารถเรียงข้อมูลใน Array ได้ง่ายๆ ด้วย sort() ใช่มั้ย? แต่บางครั้ง ก็มีปัญหา เช่น

1
let items = [5, 2, 10, 20, 50, 4, 1]
2
item.sort() // [1, 10, 2, 20, 4, 5, 50]
3

4
let numbers = [50, 100, 2, 0, 1, 500]
5
numbers.sort() // [0, 1, 100, 2, 50, 500]

เพราะอะไร? เพราะว่า sort() มันจะแปลงข้อมูลใน Array เป็น String ไม่ใช่ number ฉะนั้น ข้อมูล array เวลา sort() ตัว 10 ก็เลยมาก่อน 2 นั่นเอง

ข้อควรรู้เกี่ยวกับ sort()

• จะ sort โดยการเปรียบเทียบ ข้อมูลใน array เป็น string ไม่ใช่ number
• จะทำการเรียงลำดับข้อมูล (default จากน้อยไปมาก)
• จะทำกำการเรียงข้อมูลจากข้อมูลเก่า (ไม่ได้ copy) มันจะเปลี่ยนข้อมูล array เราเลย ฉะนั้นใครใช้ ระวังด้วย ควร copy array แทนที่จะแก้ไข original array.

ใช้ Object.assign() หรือ Spread Operator

1
let names = ['John Doe', 'Chuck Norris', 'Jane Doe']
2

3
const sorted = [...names].sort()
4
const sorted2 = Object.assign([], names).sort()

เราสามารถ custom sort ได้มั้ย?

คำตอบคือได้ครับ รูปแบบ syntax จะเป็นแบบนี้ คือ sort() จะรับ custom function ได้

1
;[].sort(compareFn)

โดย compareFn จะเป็น function ที่มี 2 arguments คือ

• a - element ตัวแรก
• b - element ตัวที่สอง

ค่าที่ compareFn return จะมีผลต่อการ sort

• ถ้า return ค่า < 0 จะ sort a ก่อน b
• ถ้า return ค่า > 0 จะ sort b ก่อน a
• ถ้า return = 0 จะไม่ sort (เรียงเหมือนเดิม)

ก่อนหน้านี้ เรามีปัญหากับการ sort number ใช่มั้ย ลองเอาชุด ข้อมูลเดิมมา

1
let items = [5, 2, 10, 20, 50, 4, 1]

จากนั้น เราจะใช้ function compareFn แทนที่ default sort()

1
function compareNumbers(a, b) {
2
  return a - b;
3
}
4

5
// หรือ arrow function
6
// const compareNumbers = (a, b) => a - b
7

8

9
let items = [5, 2, 10, 20, 50, 4, 1]
10

11
[...items].sort(compareNumbers)

ข้อมูลก็จะทำการ sort เรียงจากค่าที่น้อยไปมาก นั่นเอง

สรุป

บางครั้งก็ลืมๆ เหมือนกันว่า sort() มันเรียง alphabet ไม่ใช่ number ถ้าใครจะ sort ด้วย Number ก็อย่าลืมทำ compareFn เองนะ แล้วที่สำคัญอย่าลืม copy array อย่าไปแก้ค่า original data เด็ดขาด

เรียงค่า จากน้อยไปมาก

1
;[].sort((a, b) => a - b)

เรียงค่า จากมากไปน้อย

1
;[].sort((a, b) => b - a)

Happy Coding ❤️