แปลง Array เป็น Set ใน JavaScript - ลบค่าซ้ำได้ง่าย

Set เป็นโครงสร้างข้อมูลใหม่ใน ES2015 ที่เก็บค่า ไม่ซ้ำกัน (Unique Values) การแปลง Array → Set เป็นวิธีเร็วที่สุดในการลบค่าซ้ำ (Deduplicate)

ตัวอย่าง: แปลง Array เป็น Set

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

    <script>
        const sampleEle = document.getElementById("sample");
        const resultEle = document.getElementById("result");
        const btn = document.getElementById("convertBtn");
        
        const arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
        sampleEle.innerHTML = `Array: [${arr}]`;
        
        btn.addEventListener("click", () => {
            // แปลง Array → Set (ลบค่าซ้ำอัตโนมัติ)
            const set1 = new Set(arr);
            
            // แปลงกลับเป็น Array เพื่อแสดงผล (Spread Operator)
            resultEle.innerHTML = `Set: { ${[...set1].join(", ")} }
`;
            resultEle.innerHTML += `Size: ${set1.size}
`;
            resultEle.innerHTML += `Type: ${Object.prototype.toString.call(set1)}`;
        });
    </script>
</body>
</html>

ผลลัพธ์

Array: [2, 3, 4, 2, 3, 4, A, A, B, B] (10 ค่า)
Set: { 2, 3, 4, A, B } (5 ค่า - ไม่ซ้ำ)
Size: 5

วิธีการแปลง Array ↔ Set

Array → Set

const arr = [1, 2, 2, 3, 3, 3];
const set = new Set(arr);        // Set(3) {1, 2, 3}
const uniqueArr = [...set];      // [1, 2, 3] (Spread Operator)
const uniqueArr2 = Array.from(set); // [1, 2, 3] (Array.from)

Set → Array

const set = new Set([1, 2, 3]);
const arr = [...set];           // [1, 2, 3] (Spread - เร็วที่สุด)
const arr2 = Array.from(set);   // [1, 2, 3]
const arr3 = [...set.values()]; // [1, 2, 3]

Set Operations (เซต теоรี่)

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

// Union (ยูเนียน) - รวมทั้งหมด
const union = new Set([...setA, ...setB]); // {1, 2, 3, 4, 5, 6}

// Intersection (อินเตอร์เซกชัน) - ค่าที่อยู่ในทั้งคู่
const intersection = new Set([...setA].filter(x => setB.has(x))); // {3, 4}

// Difference (ดิฟเฟอเรนซ์) - อยู่ใน A ไม่อยู่ใน B
const difference = new Set([...setA].filter(x => !setB.has(x))); // {1, 2}

// Symmetric Difference - อยู่ในอันใดอันหนึ่ง แต่ไม่ใช่ทั้งคู่
const symDiff = new Set([
    ...[...setA].filter(x => !setB.has(x)),
    ...[...setB].filter(x => !setA.has(x))
]); // {1, 2, 5, 6}

// Subset / Superset
const isSubset = [...setA].every(x => setB.has(x)); // false
const isSuperset = [...setB].every(x => setA.has(x)); // false

Set Methods

ประโยชน์ของ Set เทียบ Array

• ✅ O(1) สำหรับ has(), add(), delete() (Array O(n))
• ✅ ค่าไม่ซ้ำโดยอัตโนมัติ
• ✅ Iterate ตามลำดับที่เพิ่ม (Insertion Order)
• ✅ ใช้เป็น Key ได้ทุก Type (Objects, Functions, NaN)

ข้อจำกัด

• ❌ ไม่มี Index (ไม่สามารถ set[0] ได้)
• ❌ ไม่มี map(), filter(), reduce() ตรงๆ (ต้องแปลงเป็น Array ก่อน)
• ❌ JSON.stringify ไม่รองรับโดยตรง (ต้องแปลงเป็น Array ก่อน)