รวมเทคนิค Array Sort() ใน JavaScript !!

เปลี่ยนการใช้ฟังก์ชัน 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 }
]

 

เป็นยังไงบ้างกับเทคนิคทั้งหมดที่เรานำมาฝากกันในวันนี้ เพื่อน ๆ ก็ลองเอาไปประยุกต์ใช้กันดูนะ หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะคะ หากผิดพลาดตรงไหน ขออภัยมา ณ ที่นี้ ด้วยนะคะ สำหรับวันนี้ไปก่อนละ บ้ายบาย 👋