JavaScript Sort Array: คู่มือจัดเรียง Array ด้วย sort() และ reverse()

ใช้ JavaScript sort() method จัดเรียง array รับ array argument จัดค่าตัวอักษร ascending order แบบ in-place (modify array เดิม ไม่สร้าง array ใหม่)

อยากจัดเรียง array ตามลำดับเฉพาะ เช่น names เรียง alphabetical order มี built-in functions ช่วย: sort() เรียง alphabetical, reverse() เรียงย้อนกลับ, sort() กับ nested function สำหรับ custom sorts

JavaScript sort() Method

sort() อ่านค่าใน array คืนค่า ascending หรือ descending order รองรับ strings และ numbers

Syntax:

const values = [1, 2, 8, 9, 3];
values.sort(); // modifies original array

sort() modifies array เดิม (in-place) ไม่สร้าง array ใหม่ ถ้าอยากเก็บ array เดิม ต้อง copy ก่อน sort

Assign ให้ variable ใหม่ array เดิมก็ยังเปลี่ยน (เพราะ reference เดียวกัน)

ตัวอย่าง: เรียง Names Alphabetical

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var sorted_students = students.sort();
console.log(sorted_students);
// ["Alex", "Cathy", "Jeff", "Lincoln"]

เรียง Numeric Array

var grades = [67, 75, 62, 78];
grades.sort();
console.log(grades); // [62, 67, 75, 78]

เรียง ascending ตามค่าตัวเลข ไม่ต้อง assign variable ใหม่ array เดิมเปลี่ยนแล้ว

เรียง Array of Objects

เรียง object array ได้ เช่น students array มี name และ age:

var students = [
  { name: "Alex", age: 16 },
  { name: "Cathy", age: 14 },
  { name: "Lincoln", age: 14 },
  { name: "Jeff", age: 15 }
];

var sorted_students = students.sort(function(a, b) {
  return a.age - b.age; // ascending by age
});

console.log(sorted_students);
// Cathy (14), Lincoln (14), Jeff (15), Alex (16)

Compare function คืนค่า negative/zero/positive สำหรับ sort order

เรียงย้อนกลับด้วย reverse()

reverse() กลับลำดับ array: element แรกกลายสุดท้าย สุดท้ายกลายแรก ไม่ได้ sort descending alphabetical โดยตรง

ต้อง sort() ก่อน แล้ว reverse() เพื่อได้ descending alphabetical:

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
students.sort();        // ascending
students.reverse();     // descending
console.log(students);  // ["Jeff", "Lincoln", "Cathy", "Alex"]

reverse() ก็ modify array เดิมเหมือนกัน

สรุป

sort() เรียง array ascending/descending in-place (modify array เดิม) reverse() หลัง sort() ได้ descending order บทความครอบคลุม: numeric array, array of objects, reverse sorting