เมธอด Array.prototype.sort() ใน JavaScript - การเรียงลำดับอาร์เรย์

เมธอด Array.prototype.sort() ใช้สำหรับเรียงลำดับสมาชิกในอาร์เรย์ โดยค่าเริ่มต้นจะเรียงตามลำดับตัวอักษร (Unicode) ซึ่งอาจไม่ตรงกับการเรียงตัวเลขที่คาดหวัง

ตัวอย่าง: การเรียงลำดับอาร์เรย์ตัวเลข

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array sort() Method</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .sample, .result { font-size: 18px; font-weight: 500; }
        .sample { color: red; }
        .result { color: rebeccapurple; }
        button { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>เมธอด Array.prototype.sort() ใน JavaScript</h1>
    <div class="sample"></div>
    <div class="result"></div>
    <button class="Btn">คลิกเพื่อเรียงลำดับ</button>
    <h3>กดปุ่มด้านบนเพื่อเรียงลำดับอาร์เรย์ข้างต้น</h3>

    <script>
        let sampleEle = document.querySelector(".sample");
        let resultEle = document.querySelector(".result");
        
        let arr = [9, 1, 4, 2, 99, 11, 22];
        sampleEle.innerHTML = "อาร์เรย์ก่อนเรียง = " + arr;
        
        document.querySelector(".Btn").addEventListener("click", () => {
            // เรียงแบบค่าเริ่มต้น (สตริง) - ผลลัพธ์อาจผิดสำหรับตัวเลข
            resultEle.innerHTML = "เรียงแบบสตริง = " + [...arr].sort();
            
            // เรียงตัวเลขอย่างถูกต้อง ต้องใช้ฟังก์ชันเปรียบเทียบ
            resultEle.innerHTML += "<br>เรียงตัวเลขถูกต้อง = " + [...arr].sort((a, b) => a - b);
            
            // เรียงจากมากไปน้อย
            resultEle.innerHTML += "<br>เรียงจากมากไปน้อย = " + [...arr].sort((a, b) => b - a);
        });
    </script>
</body>
</html>

ผลลัพธ์

อาร์เรย์ก่อนเรียง: [9, 1, 4, 2, 99, 11, 22]
เรียงแบบสตริง (ค่าเริ่มต้น): [1, 11, 2, 22, 4, 9, 99] ❌
เรียงตัวเลขถูกต้อง: [1, 2, 4, 9, 11, 22, 99] ✅
เรียงจากมากไปน้อย: [99, 22, 11, 9, 4, 2, 1] ✅

ข้อสังเกตสำคัญ

• sort() แก้ไขอาร์เรย์ต้นฉบับ (Mutates original array) - ใช้ [...arr] เพื่อสร้างสำเนาก่อนเรียงหากต้องการเก็บค่าเดิม
• ค่าเริ่มต้นเรียงตาม Unicode code point - เหมาะสำหรับสตริง แต่ไม่ใช่ตัวเลข
• ต้องใช้ Compare Function (a, b) => a - b สำหรับเรียงตัวเลขขึ้น และ (a, b) => b - a สำหรับเรียงลง
• สำหรับสตริงภาษาไทยหรือ Unicode ควรใช้ localeCompare()

ตัวอย่างเพิ่มเติม: เรียงสตริงภาษาไทย

let thaiWords = ["มะม่วง", "กล้วย", "แอปเปิ้ล", "ส้ม"];
thaiWords.sort((a, b) => a.localeCompare(b, "th"));
// ผลลัพธ์: ["กล้วย", "มะม่วง", "ส้ม", "แอปเปิ้ล"]