Sắp xếp object theo thứ tự ngày trong tuần trong JavaScript

Sắp xếp mảng object theo thứ tự ngày trong tuần

Khi dữ liệu ngày trong tuần lưu dưới dạng string ("Monday", "Tuesday"...), sắp xếp alphabet cho sai thứ tự logic. Cần mapping sang số thứ tự.

Dữ liệu ví dụ

const weather = [
    { day: 'Wednesday', humidity: 60 },
    { day: 'Saturday', humidity: 50 },
    { day: 'Thursday', humidity: 65 },
    { day: 'Monday', humidity: 40 },
    { day: 'Sunday', humidity: 35 },
    { day: 'Friday', humidity: 80 },
    { day: 'Tuesday', humidity: 45 }
];

Giải pháp: Map thứ tự + sort()

// 1. Tạo map thứ tự
const dayOrder = {
    'Monday': 1, 'Tuesday': 2, 'Wednesday': 3,
    'Thursday': 4, 'Friday': 5, 'Saturday': 6, 'Sunday': 7
};

// 2. Sort với custom comparator
weather.sort((a, b) => dayOrder[a.day] - dayOrder[b.day]);

// Kết quả
console.log(weather);
/*
[
  { day: 'Monday', humidity: 40 },
  { day: 'Tuesday', humidity: 45 },
  { day: 'Wednesday', humidity: 60 },
  { day: 'Thursday', humidity: 65 },
  { day: 'Friday', humidity: 80 },
  { day: 'Saturday', humidity: 50 },
  { day: 'Sunday', humidity: 35 }
]
*/

Ví dụ hoàn chỉnh có UI

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sort by Weekday</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .result { font-family: monospace; white-space: pre-wrap; margin-top: 20px; }
        button { padding: 10px 20px; cursor: pointer; }
        table { border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px 12px; }
        th { background: #f0f0f0; }
    </style>
</head>
<body>
    <h1>Sắp xếp dữ liệu theo thứ tự ngày trong tuần</h1>
    <button id="btnSort">SẮP XẾP</button>
    <div class="result" id="result"></div>

    <script>
        const weather = [
            { day: 'Wednesday', humidity: 60 },
            { day: 'Saturday', humidity: 50 },
            { day: 'Thursday', humidity: 65 },
            { day: 'Monday', humidity: 40 },
            { day: 'Sunday', humidity: 35 },
            { day: 'Friday', humidity: 80 },
            { day: 'Tuesday', humidity: 45 }
        ];

        const dayOrder = {
            'Monday': 1, 'Tuesday': 2, 'Wednesday': 3,
            'Thursday': 4, 'Friday': 5, 'Saturday': 6, 'Sunday': 7
        };

        // Hiển thị trước khi sort
        document.getElementById('result').textContent = 'Trước sort:\n' + 
            weather.map(w => `${w.day}: ${w.humidity}%`).join('\n');

        document.getElementById('btnSort').addEventListener('click', () => {
            weather.sort((a, b) => dayOrder[a.day] - dayOrder[b.day]);
            document.getElementById('result').textContent = 'Sau sort:\n' + 
                weather.map(w => `${w.day}: ${w.humidity}%`).join('\n');
        });
    </script>
</body>
</html>

Mở rộng: Hỗ trợ tiếng Việt

const dayOrderVN = {
    'Thứ Hai': 1, 'Thứ Ba': 2, 'Thứ Tư': 3,
    'Thứ Năm': 4, 'Thứ Sáu': 5, 'Thứ Bảy': 6, 'Chủ Nhật': 7
};

// Hoặc parse từ Date object
function getDayOrder(dateString) {
    const date = new Date(dateString);
    // getDay(): 0=CN, 1=Thứ 2... -> chuyển thành 1-7
    return date.getDay() === 0 ? 7 : date.getDay();
}

Mở rộng: Sắp xếp theo nhiều tiêu chí

// Sort by day, then by humidity descending
weather.sort((a, b) => {
    const dayDiff = dayOrder[a.day] - dayOrder[b.day];
    if (dayDiff !== 0) return dayDiff;
    return b.humidity - a.humidity; // humidity giảm dần
});

Performance Note

• Tạo dayOrder object bên ngoài sort (không tạo lại mỗi lần compare).
• Độ phức tạp: O(n log n) do sort.
• Nếu mảng rất lớn và sort nhiều lần, cân nhắc lưu sortKey vào object.