[JavaScript] Array .sort() ใช้งานยังไง?

Array.sort() โดย default ของมันคือการแปลงค่าใน array เป็น string แล้วจับมาเรียงลำดับตามตัวอักษร แต่ก็รองรับการทำ custom sorting แบบอื่น ๆ ซึ่งอยู่ที่เราเขียนเลยว่าจะให้มันทำงานยังไง

บทความนี้ตัวอย่างผมจะเน้นเขียนแบบ Arrow function หากใครยังไม่เข้าใจให้ลองอ่านวิธีการเขียนก่อนนะครับตาม link

ตัวอย่างการใช้แบบ default

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();//เรียกแบบนี้ได้เลย
console.log(months);
// ค่าที่ได้: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// ค่าที่ได้: Array [1, 100000, 21, 30, 4] จะเห็นว่ามันไม่มองค่าตัวเลขเป็นตัวเลข แต่เป็นการเทียบ string แทน

โครงสร้างโค้ดการทำ custom sorting

ในตัวอย่างด้านล่างจะเป็น callback function ที่ใช้สำหรับโยนให้ .sort() โดยค่า a และ b จะตั้งชื่อยังไงก็ได้ และเราจะทราบแค่ว่าเป็นค่า 2 ค่าที่มาเทียบกันเท่านั้น โดยเบื้องหลังการทำงานก็ขึ้นอยู่กับ compiler ของแต่ละ browser หรือ platform ว่าจัดการยังไง ซึ่งเราจะไม่ลงไปลึกขนาดนั้นนะครับ

function compare(a, b) {
  if (a มีค่าน้อยกว่า b) {
    return -1;//ให้ return -1
  }
  if (a มีค่ามากกว่า b) {
    return 1;//ให้ return 1
  }
  // สุดท้ายคือ a มีค่าเท่ากับ b ให้ return 0
  return 0;
}

ตัวอย่างการทำ sort สำหรับตัวเลข

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);//ใช้ a - b ได้เลย แต่ต้องมั่นใจนะว่าใน array คือตัวเลขจริง ๆ
console.log(numbers);// [1, 2, 3, 4, 5]

นำมาใช้เรียง array ของ object

let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 16 },
  { name: 'Jane', age: 20 },
  { name: 'Bo', age: 23 },
  { name: 'Noon', age: 25 },
  { name: 'Jane', age: 28 },
  { name: 'John', age: 45 },
  { name: 'Doe', age: 51 },
];

//เรียงด้วยอายุ
people.sort((a, b) => a.age - b.age);

//เรียงด้วยชื่อ
people.sort((a, b) => {
  let nameA = a.name.toUpperCase(); // ทำเพื่อให้เป็นการเทียบแบบไม่สนตัวเล็กตัวใหญ่
  let nameB = b.name.toUpperCase(); // 
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});

อ้างอิง: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

ค้นหาบล็อกนี้

Kotenarok