JavaScript Array.flatMap(): मैप और फ्लैटेन एक साथ

Array.prototype.flatMap() मेथड पहले प्रत्येक तत्व पर मैप फंक्शन लागू करता है, फिर परिणाम को एक स्तर तक फ्लैट करता है। यह arr.map(...).flat() के बराबर है लेकिन थोड़ा अधिक कुशल है।

उदाहरण

<!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; } 
    .sample { font-size: 20px; font-weight: 500; } 
    button { padding: 10px 20px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>JavaScript Array.flatMap() मेथड</h1> 
<div class="sample"></div> 
<button class="Btn">नेस्टेड एरे को फ्लैट करें</button> 
<h3>ऊपर दिए गए बटन पर क्लिक करके नेस्टेड एरे को फ्लैट एरे में बदलें</h3> 
<script> 
    const fillEle = document.querySelector(".sample"); 
    const arr = ["गाय", ["बैल", "शेर", "बाघ"], "भेड़"]; 
    
    fillEle.innerHTML = "मूल नेस्टेड एरे:<br>"; 
    for (const x of arr.entries()) { 
        fillEle.innerHTML += x + "<br>"; 
    } 
    
    document.querySelector(".Btn").addEventListener("click", () => { 
        const flat = arr.flatMap(x => x); 
        fillEle.innerHTML = "फ्लैट एरे:<br>"; 
        for (const x of flat.entries()) { 
            fillEle.innerHTML += x + "<br>"; 
        } 
    }); 
</script> </body> </html>

आउटपुट

मूल: [0, "गाय"], [1, ["बैल", "शेर", "बाघ"]], [2, "भेड़"]

फ्लैट के बाद: [0, "गाय"], [1, "बैल"], [2, "शेर"], [3, "बाघ"], [4, "भेड़"]

flatMap() vs map().flat()

const sentences = ["Hello world", "JavaScript is great"];

// flatMap - एक चरण
sentences.flatMap(s => s.split(" ")); 
// ["Hello", "world", "JavaScript", "is", "great"]

// map + flat - दो चरण
sentences.map(s => s.split(" ")).flat();
// समान परिणाम लेकिन मध्यवर्ती एरे बनाता है

फिल्टरिंग के साथ flatMap

// फिल्टर + मैप एक साथ (खाली एरे लौटाकर फिल्टर करें)
[1, 2, 3, 4, 5].flatMap(x => x % 2 === 0 ? [x * 2] : []); 
// [4, 8] - केवल सम संख्याएं, दोगुनी

// ऑब्जेक्ट्स से प्रॉपर्टी निकालें
const users = [
    {name: "अमित", tags: ["admin", "user"]},
    {name: "सुमन", tags: ["user"]}
];
users.flatMap(u => u.tags); // ["admin", "user", "user"]

सीमाएं

केवल एक स्तर फ्लैट करता है (गहरे नेस्टिंग के लिए flat(depth) उपयोग करें)
कॉलबैक को एरे या इटरेटर लौटाना चाहिए
मूल एरे को नहीं बदलता