JavaScript Symbol.isConcatSpreadable: कन्कैट व्यवहार नियंत्रित करें

Symbol.isConcatSpreadable एक वेल-नोन सिंबल है जो कॉन्फिगर करता है कि Array.prototype.concat() मेथड किसी ऑब्जेक्ट को अपने तत्वों में फ्लैट करे या एकल तत्व के रूप में जोड़े।

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    div { font-size: 20px; font-weight: 500; } 
    .result { color: #dc3545; margin: 10px 0; } 
    button { padding: 10px 20px; background: #20c997; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>JavaScript Symbol.isConcatSpreadable सिंबल</h1> 
<div class="sample"></div> 
<button class="Btn">दोनों एरे कन्कैट करें</button> 
<h3>ऊपर दिए गए बटन पर क्लिक करके दोनों एरे को एक में कन्कैट करें</h3> 
<div class="result">isConcatSpreadable = true (डिफ़ॉल्ट एरे व्यवहार)</div> 
<div class="result">isConcatSpreadable = false</div> 
<script> 
    const fillEle = document.querySelector(".sample"); 
    const result = document.querySelectorAll(".result"); 
    const arr1 = [1, 2, 3]; 
    const arr2 = ["A", "B", "C"]; 
    
    fillEle.innerHTML += "arr1: " + arr1 + "<br>" + "arr2: " + arr2 + "<br><br>"; 
    
    document.querySelector(".Btn").addEventListener("click", () => { 
        // डिफ़ॉल्ट: एरे फैलते हैं
        let concatArr = arr1.concat(arr2); 
        result[0].innerHTML += " → " + concatArr.join(" - "); 
        
        // isConcatSpreadable = false सेट करें
        arr2[Symbol.isConcatSpreadable] = false; 
        concatArr = arr1.concat(arr2); 
        result[1].innerHTML += " → " + concatArr.join(" - "); 
    }); 
</script> </body> </html>

आउटपुट

डिफ़ॉल्ट (true): 1 - 2 - 3 - A - B - C

false सेट करने के बाद: 1 - 2 - 3 - A,B,C (दूसरा एरे एकल तत्व के रूप में जुड़ता है)

डिफ़ॉल्ट व्यवहार

व्यावहारिक उपयोग

// 1. एरे-लाइक ऑब्जेक्ट को फैलने दें
const arrayLike = {0: "a", 1: "b", length: 2};
arrayLike[Symbol.isConcatSpreadable] = true;
[1, 2].concat(arrayLike); // [1, 2, "a", "b"]

// 2. एरे को फैलने से रोकें
const arr = [1, 2];
arr[Symbol.isConcatSpreadable] = false;
[3, 4].concat(arr); // [3, 4, [1, 2]]

// 3. कस्टम क्लास
class MyCollection {
    constructor(...items) { this.items = items; }
    get [Symbol.isConcatSpreadable]() { return true; }
    *[Symbol.iterator]() { yield* this.items; }
}

[0].concat(new MyCollection(1, 2)); // [0, 1, 2]

सावधानी

यह प्रॉपर्टी म्यूटेबल है - किसी एरे पर false सेट करने से उस एरे के सभी भविष्य के concat कॉल प्रभावित होते हैं। आवश्यकता पड़ने पर रीसेट करें।