JavaScript Sort และ Reverse

JavaScript

เรียนรู้การเรียงลำดับข้อมูลใน JavaScript ด้วย sort(), toSorted() และ reverse() พร้อมเทคนิคเรียงตัวเลข ข้อความ Object และจัดการ Array โดยไม่แก้ไขข้อมูลต้นฉบับโดยไม่ตั้งใจ

EP12: เรียงลำดับข้อมูลด้วย JavaScript

1. เริ่มต้นด้วย sort()

const names = ['มะลิ', 'กานต์', 'อาทิตย์'];

names.sort();
console.log(names);

const values = [100, 20, 3, 45, 9];
values.sort();
console.log(values);

2. เรียงตัวเลขจากน้อยไปมาก

const scores = [78, 95, 42, 88, 61, 100];

scores.sort((a, b) => a - b);
console.log('จากน้อยไปมาก:', scores);

const prices = [120, 35, 450, 12, 89];
prices.sort((a, b) => a - b);
console.log('ราคาจากต่ำไปสูง:', prices);

3. เรียงตัวเลขจากมากไปน้อย

const scores = [78, 95, 42, 88, 61, 100];

scores.sort((a, b) => b - a);
console.log('จากมากไปน้อย:', scores);

const topThree = scores.slice(0, 3);
console.log('สามอันดับแรก:', topThree);

4. toSorted() เรียงข้อมูลโดยรักษา Array ต้นฉบับ

const originalScores = [78, 95, 42, 88, 61];

const ascendingScores = originalScores.toSorted((a, b) => a - b);
const descendingScores = originalScores.toSorted((a, b) => b - a);

console.log('ข้อมูลเดิม:', originalScores);
console.log('เรียงจากน้อยไปมาก:', ascendingScores);
console.log('เรียงจากมากไปน้อย:', descendingScores);

5. reverse() กลับลำดับสมาชิก

const steps = ['เริ่มต้น', 'กำลังทำงาน', 'ตรวจสอบ', 'เสร็จสิ้น'];

steps.reverse();
console.log(steps);

const numbers = [10, 30, 20, 40];
const reversedNumbers = [...numbers].reverse();

console.log('ต้นฉบับ:', numbers);
console.log('กลับลำดับ:', reversedNumbers);

6. เรียงข้อความและไม่สนใจตัวพิมพ์เล็กใหญ่

const englishNames = ['mango', 'Apple', 'banana', 'cherry'];

const sortedEnglishNames = englishNames.toSorted((a, b) =>
  a.localeCompare(b, 'en', { sensitivity: 'base' })
);

const thaiNames = ['มะลิ', 'กานต์', 'อาทิตย์', 'ขวัญ'];

const thaiCollator = new Intl.Collator('th');
const sortedThaiNames = thaiNames.toSorted(thaiCollator.compare);

console.log(sortedEnglishNames);
console.log(sortedThaiNames);

7. เรียง Array ของ Object ตามราคา

const products = [
  { id: 1, name: 'สมุด', price: 35, stock: 20 },
  { id: 2, name: 'ปากกา', price: 12, stock: 0 },
  { id: 3, name: 'กระเป๋า', price: 450, stock: 8 },
  { id: 4, name: 'ดินสอ', price: 8, stock: 50 },
  { id: 5, name: 'ขวดน้ำ', price: 120, stock: 5 }
];

const cheapestFirst = products.toSorted((a, b) => a.price - b.price);
const mostExpensiveFirst = products.toSorted((a, b) => b.price - a.price);

console.log('ราคาต่ำไปสูง:', cheapestFirst);
console.log('ราคาสูงไปต่ำ:', mostExpensiveFirst);

8. เรียงข้อมูลหลายเงื่อนไข

const sortedProducts = products.toSorted((a, b) => {
  const aOutOfStock = a.stock === 0;
  const bOutOfStock = b.stock === 0;

  if (aOutOfStock !== bOutOfStock) {
    return Number(aOutOfStock) - Number(bOutOfStock);
  }

  return a.price - b.price;
});

console.log(sortedProducts);

9. เรียงวันที่และเวลา

const orders = [
  { id: 'A101', createdAt: '2026-10-29T09:30:00Z' },
  { id: 'A102', createdAt: '2026-10-27T14:15:00Z' },
  { id: 'A103', createdAt: '2026-10-28T08:00:00Z' }
];

const oldestFirst = orders.toSorted((a, b) =>
  new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
);

console.log(oldestFirst);

10. ความเสถียรของการเรียงลำดับและค่าที่ไม่ใช่ตัวเลข

const records = [
  { name: 'A', group: 2 },
  { name: 'B', group: 1 },
  { name: 'C', group: 2 },
  { name: 'D', group: 1 }
];

const sortedRecords = records.toSorted((a, b) => a.group - b.group);
console.log(sortedRecords);

const mixedValues = [10, NaN, 3, 20];
const sortedValues = mixedValues.toSorted((a, b) => {
  if (Number.isNaN(a)) return 1;
  if (Number.isNaN(b)) return -1;
  return a - b;
});

console.log(sortedValues);

11. เปรียบเทียบ Method สำหรับเรียงและกลับลำดับ

12. แบบฝึกหัดท้ายบท

const scores = [72, 95, 48, 88, 61, 95];
const students = [
  { name: 'มีนา', score: 82 },
  { name: 'ต้น', score: 95 },
  { name: 'ฟ้า', score: 74 },
  { name: 'นัท', score: 95 }
];

// 1. เรียง scores จากน้อยไปมากโดยไม่แก้ไข Array ต้นฉบับ

// 2. เรียง scores จากมากไปน้อย

// 3. เรียง students ตามคะแนนจากมากไปน้อย

// 4. เรียง students ตามคะแนนจากมากไปน้อย และถ้าคะแนนเท่ากันให้เรียงชื่อตามภาษาไทย

// 5. กลับลำดับ scores โดยไม่แก้ไข Array ต้นฉบับ

13. สรุปและเตรียมพร้อมสำหรับตอนถัดไป