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

JavaScript Mar 27, 2023

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

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

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

let numbers = [50, 100, 2, 0, 1, 500]
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

let names = ["John Doe", "Chuck Norris", "Jane Doe"]

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

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

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

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 ใช่มั้ย ลองเอาชุด ข้อมูลเดิมมา

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

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

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

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


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

[...items].sort(compareNumbers)

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

สรุป

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

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