เปลี่ยนการใช้ฟังก์ชัน sort() ที่ใช้สำหรับเรียงข้อมูลธรรมดา ๆ ในภาษา JavaScript ด้วยเทคนิคที่เรานำมาฝากกันในบทความนี้ ที่จะให้คุณจัดการข้อมูลใน Array ได้แบบคนเซียน !! มีเทคนิคอะไรดี ๆ บ้าง หากพร้อมแล้วไปอ่านกันเลย
Array of String
นี่เป็นวิธี Basic จัด ๆ ในการเรียง String จากน้อยไปมาก (A-Z) หรือมากไปน้อย (Z-A) ไปดูตัวอย่างโค้ดกันเลย !!
น้อยไปมาก (A-Z)
let names = ['Jojo', 'Banglee', 'Oreo', 'Prayut', 'Meow'];
names.sort();
console.log(names);
// output => [ 'Banglee', 'Jojo', 'Meow', 'Oreo', 'Prayut' ]
มากไปน้อย (Z-A)
let names = ['Jojo', 'Banglee', 'Oreo', 'Prayut', 'Meow'];
names.sort((a, b) => b.localeCompare(a));
console.log(names);
// output => [ 'Prayut', 'Oreo', 'Meow', 'Jojo', 'Banglee' ]
เรียง String โดยไม่สนใจตัวพิมพ์เล็กหรือพิมพ์ใหญ่
โดยปกติแล้วการ sort() จะเรียงจากตัวอักษรพิมพ์ใหญ่ไปเล็ก เพราะ String ถูกจัดเรียงตาม Character’s Unicode Code นั่นเอง
ตัวอย่าง
let names = ['Jojo', 'banglee', 'Oreo', 'prayut', 'Meow'];
names.sort();
console.log(names);
// output => [ 'Jojo', 'Meow', 'Oreo', 'banglee', 'prayut' ]
มาดู Character’s Unicode Code กันให้ชัด ๆ อีกที
'J'.charCodeAt() //74
'M'.charCodeAt() //77
'O'.charCodeAt() //79
'b'.charCodeAt() //98
'p'.charCodeAt() //112
และเราสามารถใช้วิธีนี้ในการเรียง String โดยไม่สนใจว่าจะเป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ โดยใช้ความสามารถของฟังก์ชัน toLowerCase() จะเป็นยังไงไปดู !!
เรียงจากน้อยไปมาก (aA-zZ)
let names = ['Jojo', 'banglee', 'Oreo', 'prayut', 'Meow'];
names.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(names);
//output => [ 'banglee', 'Jojo', 'Meow', 'Oreo', 'prayut' ]
เรียงจากมากไปน้อย (zZ-aA)
let names = ['Jojo', 'banglee', 'Oreo', 'prayut', 'Meow'];
names.sort((a, b) => b.toLowerCase().localeCompare(a.toLowerCase()));
console.log(names);
//output => [ 'prayut', 'Oreo', 'Meow', 'Jojo', 'banglee' ]
Array of Number
ลองใช้ sort() เรียงค่าใน Array จากน้อยไปมาก
let nums = [22,10,1,2,9,8];
nums.sort();
console.log(nums);
//output => [ 1, 10, 2, 22, 8, 9 ]
แต่ผลลัพธ์ที่ได้ออกมามันไม่ได้เรียงแบบที่เราต้องการ 10 และ 22 ควรจะอยู่เป็นลำดับท้าย ๆเพราะมีค่ามากกว่าตัวเลขที่เหลือ เพราะการใช้ Sort() จะแปลง Number เป็น String ซึ่งมันจะสนใจแค่ลำดับตัวอักษรตาม Unicode “10” จึงมาก่อน “2” เพราะขึ้นต้นด้วย “1” นั่นเอง
ซึ่งเราสามารถแก้ไขปัญหานั้นได้ง่าย ๆ โดยใช้เทคนิคการเปรียบเทียบค่าแต่ละตัว ไปดูตัวอย่างกันเลย
let nums = [22,10,1,2,9,8];
nums.sort((a, b) => a - b);
console.log(nums);
//output => [ 1, 2, 8, 9, 10, 22 ]
วิธีเรียงจากมากไปน้อยก็ทำได้เช่นเดียวกัน
let nums = [22,10,1,2,9,8];
nums.sort((a, b) => b - a);
console.log(nums);
//output => [ 22, 10, 9, 8, 2, 1 ]
ซึ่งเทคนิคนี้สามารถประยุกต์ใช้ได้กับ Date Strings อีกด้วย ไปดูตัวอย่างการใช้งานกันเลยจ้า ~~
Date Strings
let dates = [
'2021-08-22',
'2021-08-2',
'2021-08-10',
'2021-08-1'
];
dates.sort()
console.log(dates);
//output => ['2021-08-1', '2021-08-10', '2021-08-2', '2021-08-22']
ถ้าใช้ฟังก์ sort() เดี่ยว ๆ ก็จะได้ผลลัพธ์แบบนี้เลย ‘2021-08-10’ มาก่อน ‘2021-08-2’ ไปดูวิธีแก้โดยใช้เทคนิคเดิมกันเลย !!
let dates = [
'2021-08-22',
'2021-08-2',
'2021-08-10',
'2021-08-1'
];
dates.sort((a, b) => new Date(a) - new Date(b))
console.log(dates);
//output => [ '2021-08-1', '2021-08-2', '2021-08-10', '2021-08-22' ]
ได้ผลลัพธ์โดยเรียงวันที่จากน้อยไปมากตามที่เราต้องการแล้วววว ~~
เรียงจากมากไปน้อยก็ทำเช่นเดียวกัน
let dates = [
'2021-08-22',
'2021-08-2',
'2021-08-10',
'2021-08-1'
];
dates.sort((a, b) => new Date(b) - new Date(a))
console.log(dates);
//output => [ '2021-08-22', '2021-08-10', '2021-08-2', '2021-08-1' ]
ลองมาใช้งานกับ Object กันดูบ้าง
Object
โดยกำหนด Object ดังนี้
let lists = [
{ name:"Jojo", id:40000 },
{ name:"Prayut", id:8400 },
{ name:"banglee", id:69 },
{ name:"Meow", id:9 },
{ name:"Oreo", id:10 },
{ name:"Jojo", id:15000 },
];
ต้องการจัดเรียงข้อมูลใน Object นี้จากน้อยไปมาก มีวิธีการดังนี้
- เรียงลำดับ name จากน้อยไปมาก
- เรียงลำดับ id จากน้อยไปมาก
โดยจะจัดเรียงจากตัวอักษรก่อน ส่วน name ที่มีค่าเท่ากันก็จะจัดเรียงตาม id นั่นเอง
ไปดูตัวอย่างโค้ดชัด ๆ กันเลย !!
let lists = [
{ name:"Jojo", id:40000 },
{ name:"Prayut", id:8400 },
{ name:"banglee", id:69 },
{ name:"Meow", id:9 },
{ name:"Oreo", id:10 },
{ name:"Jojo", id:15000 },
];
lists.sort((a, b) => a.name.localeCompare(b.name) || a.id - b.id);
console.log(lists);
Output
[
{ name: 'banglee', id: 69 },
{ name: 'Jojo', id: 15000 },
{ name: 'Jojo', id: 40000 },
{ name: 'Meow', id: 9 },
{ name: 'Oreo', id: 10 },
{ name: 'Prayut', id: 8400 }
]
ลองเรียงจากมากไปน้อยกันบ้าง โดยใช้หลักการเดียวกันเลย
let lists = [
{name:"Jojo", id:40000},
{name:"Prayut", id:8400},
{name:"banglee", id:69},
{name:"Meow", id:9},
{name:"Oreo", id:10},
{name:"Jojo", id:15000},
];
lists.sort((a, b) => b.name.localeCompare(a.name) || b.id - a.id);
console.log(lists);
Output
[
{ name: 'Prayut', id: 8400 },
{ name: 'Oreo', id: 10 },
{ name: 'Meow', id: 9 },
{ name: 'Jojo', id: 40000 },
{ name: 'Jojo', id: 15000 },
{ name: 'banglee', id: 69 }
]
เป็นยังไงบ้างกับเทคนิคทั้งหมดที่เรานำมาฝากกันในวันนี้ เพื่อน ๆ ก็ลองเอาไปประยุกต์ใช้กันดูนะ หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะคะ หากผิดพลาดตรงไหน ขออภัยมา ณ ที่นี้ ด้วยนะคะ สำหรับวันนี้ไปก่อนละ บ้ายบาย 👋