วิธีแปลง Array เป็น Set ใน JavaScript (ลบค่าซ้ำ)

การแปลง Array เป็น Set เป็นวิธีที่ง่ายและเร็วที่สุดในการลบค่าซ้ำ (Deduplicate) ออกจากอาร์เรย์ ใช้ Constructor new Set(array) แล้วแปลงกลับด้วย Spread Operator [...set]

ตัวอย่าง: แปลง Array → Set → Array (Unique)

<!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 resultEle = document.getElementById("result");
        const sampleEle = document.getElementById("sample");
        
        const arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
        sampleEle.innerHTML = `Array: [${arr}]`;
        
        document.getElementById("convertBtn").addEventListener("click", () => {
            // 1. สร้าง Set จาก Array (ลบซ้ำอัตโนมัติ)
            const set1 = new Set(arr);
            
            // 2. แปลงกลับเป็น Array ด้วย Spread Operator
            const uniqueArr = [...set1];
            
            resultEle.innerHTML = `Set: { ${[...set1].join(", ")} }
`;
            resultEle.innerHTML += `Unique Array: [${uniqueArr}]
`;
            resultEle.innerHTML += `Size: ${set1.size} (เดิม: ${arr.length})`;
        });
    </script>
</body>
</html>

ผลลัพธ์

Array: [2, 3, 4, 2, 3, 4, A, A, B, B]
Set: { 2, 3, 4, A, B }
Unique Array: [2, 3, 4, A, B]
Size: 5 (เดิม: 10)

One-Liner Patterns

Basic (ES6+)

const unique = [...new Set(array)];

Function Utility

const unique = (arr) => [...new Set(arr)];

// ใช้งาน
unique([1,2,2,3,3,3]); // [1,2,3]
unique(["a","b","a"]); // ["a","b"]

สำหรับ Object Array (ต้องมี Key เฉพาะ)

const users = [
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 1, name: "A" } // Duplicate
];

// ใช้ Map เพื่อ Key Unique
const uniqueUsers = [...new Map(users.map(u => [u.id, u])).values()];
// [{id:1,name:"A"}, {id:2,name:"B"}]

ประสิทธิภาพ (Performance)

// Benchmark: 100,000 items with duplicates
const largeArray = Array.from({length: 100000}, (_, i) => i % 1000);

console.time("Set");
const uniqueSet = [...new Set(largeArray)];
console.timeEnd("Set"); // ~3-5ms

console.time("Filter + indexOf");
const uniqueFilter = largeArray.filter((v, i, a) => a.indexOf(v) === i);
console.timeEnd("Filter + indexOf"); // ~500-1000ms (O(n²))

console.time("Reduce + Object");
const uniqueReduce = largeArray.reduce((acc, v) => {
    if (!acc.seen[v]) { acc.seen[v] = true; acc.arr.push(v); }
    return acc;
}, {seen: {}, arr: []}).arr;
console.timeEnd("Reduce + Object"); // ~10-20ms

Set เร็วที่สุด O(n) vs Filter O(n²)

ข้อจำกัดของ Set

• ❌ ไม่รองรับ NaN Equality ปกติ (แต่ Set จัดการ NaN ได้: new Set([NaN, NaN]).size === 1)
• ❌ Object/Array Comparison โดย Reference (ไม่ใช่ Deep Equal)
• ❌ ไม่ Maintain Insertion Order สำหรับ Object Keys (แต่ Set รักษา Insertion Order ของ Elements)

Set Methods เพิ่มเติม

const set = new Set([1, 2, 3]);

set.add(4);           // Set {1,2,3,4} - Chainable
set.delete(2);        // true, Set {1,3,4}
set.has(3);           // true
set.has(99);          // false
set.size;             // 3
set.clear();          // Set {}

// Iteration
for (const v of set) { console.log(v); }
set.forEach(v => console.log(v));

// Convert
[...set];             // [1,3,4]
Array.from(set);      // [1,3,4]