[JavaScript] Sort ข้อมูลใน Object ทำยังไง?
![[JavaScript] Sort ข้อมูลใน Object ทำยังไง?](/_vercel/image?url=%2Fimages%2F2023%2F05%2Fjavascript.png&w=828&q=80)
ก่อนหน้านี้เราพูดถึง JavaScript sort()
เบื้องต้นกันไปแล้ว วันนี้จะมาลองใช้งาน sort()
ในระดับลึกขึ้นนั่นก็คือ การ sort ข้อมูลในรูปแบบที่เป็น Object ใน Array กันนะครับ
หลายๆ คนอาจจะเคยใช้งาน orderBy หรือ sortBy ของ Lodash หรือ Underscore มา แต่วันนี้มาลองทำ sortBy ของเราเองแบบไม่ต้องใช้ third party library
JavaScript sort ข้อมูลตัวเลข ไม่ถูกต้อง?
สมมติ เรามีข้อมูลเริ่มต้น เป็น Array ที่มีข้อมูล Object ดังนี้
const items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Zeros', value: 37 }]
Sorting
ถ้าเราอยาก sort จากข้อมูล Object ใน Array ทำได้ยังไง?
เรียงค่า value
ถ้าอยากให้เรียงจากค่า value ซึ่ง value เป็น number เราสามารถ sort ได้ง่ายๆ แบบนี้
items.sort((a, b) => a.value - b.value)
เรียงค่า name
ถ้าอยาก sort ค่า name ซึ่งเป็น string ทำได้โดย เริ่มจาก เราเช็คให้เป็น lowercase หรือ uppercase ก่อน จากนั้นก็เปรียบเทียบค่า ถ้า a น้อย กว่า b ก็ return -1
a มากกว่า return 1
เท่ากัน ก็ 0 แบบนี้
items.sort((a, b) => { const nameA = a.name.toUpperCase() // ignore upper and lowercase const nameB = b.name.toUpperCase() // ignore upper and lowercase
if (nameA < nameB) { return -1 } if (nameA > nameB) { return 1 }
// names must be equal return 0})
ลอง reuse function ให้รองรับการ sort แบบน้อยไปมาก หรือมากไปน้อยได้ โดยใช้ ASC
หรือ DESC
แบบนี้
const createCompareFn = (direction = 'ASC') => { return (a, b) => { if (direction === 'ASC') { return a.value - b.value } else if (direction === 'DESC') { return b.value - a.value } }}
ผมสร้าง function ที่รับ items และ direction จากนั้น ก็ return function ที่เป็น compareFn (มี argument คือ a, b) เวลาเราใช้งานก็เรียกแบบนี้
const sortByDesc = createCompareFn('DESC')const sortBy = createCompareFn()
// เวชา sort ก็เรียกitems.sort(sortByDesc)items.sort(sortBy)
ทีนี้ ข้อจำกัดของมัน คือ function compare เรา sort แค่ number ไม่ได้ sort string จะ sort string เราก็ต้องเปลี่ยน function อีกเป็นแบบนี้
const createCompareFn = (direction = 'ASC') => { return (a, b) => { const nameA = a.name.toUpperCase() // ignore upper and lowercase const nameB = b.name.toUpperCase() // ignore upper and lowercase if (nameA < nameB) { return -1 } if (nameA > nameB) { return 1 }
return 0 }}
การใช้งาน ก็เหมือนเดิม
const sortByName = createCompareFn()
items.sort(sortByName)
ดูแล้ว ถ้าเราอยาก sort ค่าอื่นๆ เราก็ต้องมา สร้าง function compare ใหม่ ทุกครั้ง ก็รู้สึกว่ามันยังไม่ตอบโจทย์ ทำไมเราไม่ทำ function ให้มันรับค่า key ที่เราต้องการซะเลย
สร้าง function ให้รับ key อะไรก็ได้
ก็คือ เราอยากให้มัน sort ด้วย key อะไรใน object ก็แค่ใส่ค่า key เข้าไป ข้างในผมก็ เช็คก่อนว่ามันเป็น string หรือ number แบบนี้ (logic compare ก็แบบเดียวกันกับก่อนหน้า)
const createCompareFn = (key, direction = 'ASC') => { const isString = typeof a[key] === 'string' && typeof b[key] === 'string'
if (isString) { // logic compare string } else { // logic compare number }}
ทีนี้ตรงเงื่อนไข sort น้อยไปมาก หรือมากไปน้อย ถ้าเรามาเช็ค แบบนี้ มันดูจะไม่สวย และซับซ้อนกับ check string
const nameA = a.name.toUpperCase() // ignore upper and lowercaseconst nameB = b.name.toUpperCase() // ignore upper and lowercase
if (direction === 'ASC') { if (nameA < nameB) { return -1 } if (nameA > nameB) { return 1 } return 0} else { if (nameA < nameB) { return 1 } if (nameA > nameB) { return -1 } return 0}``
เราใช้เป็น ค่าๆ นึงขึ้นมา เพื่อให้เป็น เครื่องหมายตรงข้าม นั่นก็คือ 1 และ -1 แบบนี้
```jsconst directionValue = direction === 'ASC' ? 1 : -1
ผลลัพธ์ function ที่ได้ ก็ได้แบบนี้
const createCompareFn = (key, direction = 'ASC') => { return (a, b) => { const isString = typeof a[key] === 'string' && typeof b[key] === 'string' const directionValue = direction === 'ASC' ? 1 : -1
if (isString) { const A = a[key].toUpperCase() const B = b[key].toUpperCase()
if (A < B) return -1 * directionValue if (A > B) return 1 * directionValue return 0 } else { return (a[key] - b[key]) * directionValue } }}
ตัวอย่าง ผมเพิ่ม parameter key เพื่อให้ user เลือกได้ว่าจะ sort ด้วย property อะไรของ Object จากนั้น ใน compareFn เราก็ เข้าถึงได้จาก a[key]
เราจะรู้ว่าเป็น string หรือ number และก็ reuse function ก่อนหน้ามาใช้
ทีนี้ ส่วน directionValue ก็เป็นสิ่งที่เอาไว้บอก ถ้า asc ผมก็ให้มัน 1 และ desc = -1 เพื่อให้มันมีความหมายตรงกันข้ามกัน
ทีนี้ในการเช็ค compare number return 1, -1 และ 0 มันก็จะสลับกันเป็น -1, 1, 0 นั่นเอง
เวลาใช้งานก็แค่ง่ายๆ แบบนี้
const sortByName = createCompareFn('name')const sortByNameDesc = createCompareFn('name', 'DESC')const sortByValue = createCompareFn('value')
items.sort(sortByName)items.sort(sortByNameDesc)
จบแล้ว หวังว่าจะเห็นแนวทาง และลองนำไปใช้กันดูนะครับ
ซึ่ง function ที่ผมยกตัวอย่างมาก็เป็นเพียงแค่ function ง่ายๆ ไม่ได้ซับซ้อน ถ้าเราจะใช้งานจริงๆ เราอาจจะต้องเช็คว่า property key มีค่ามั้ย และค่าเป็นอะไร เพื่อจะ compare ถูก หรือรองรับ nest object มั้ย? หรือค่า direction หรือ key เป็น case sensitive หรือ case insensitive
ลองไปฝึกทำ ฝึกเล่น และปรับแก้ พัฒนาเพิ่มกันดูนะครับ
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust